Компьютерная геометрия - трансформация квадрата в одну прямую

#javascript #svg #геометрия #svg_animation #maple

Есть задача дан квадрат ABCD в точке A разрыв с помощью различных преобразований
, сделать из него прямую ABCDA* желательно по оси OX . 
Не прошу решить задачу(но если возможно будет отлично) прошу помочь в нахождении
материала. Книги , что то еще. Или форумы . Буду рад любой помощи.
    

Ответы

Ответ 1

Решение SVG

Как комментировал @Stranger in the Q:


  Вот поочередно двигайте точки по  окружности на 90 градусов вокруг
  точки, которая является предыдущей, сначала точку A вокруг D, потом A и
  D вокруг С, потом A,D,C вокруг B  


   

Для реализации этого алгоритма создадим четыре прямых линии и будем поочередно поворачивать
каждую из них на 90 градусов вокруг точек, которые находятся на концах этих линий.  

Чтобы сохранить конечное положение линии после завершения анимации применим fill="freeze" 

Последовательность выполнения анимаций реализуется с помощью условия: 

begin="an_AD.end+1s"   


То есть вторая анимация вращения прямой DC начнется после завершения анимации вращения
первой линии 

Итак для всех последовательных анимаций вращения линий:  






  

Результат получился явно не тот, который требуется, но он наглядно показывает как
работают трансформации в SVG.  

Чтобы заставить при анимации поворота второй линии вращаться вместе с ней первую
линию, нужно объединить их в группу ... и вращать группу вокруг точки C  

Итак проделаем со всеми линиями дополнительно вкладывая группу в группу: 


    
     


Финальное расположение развернутой линии по вертикали 



var svg = document.getElementById('svg1');
svg.addEventListener("click",() =>{
  an_AD.beginElement();
})
	 




Финальное расположение развернутой линии по горизонтали 



var svg = document.getElementById('svg1');
svg.addEventListener("click",() =>{
  an_AD.beginElement();
})