lab done

labs/lab2/JavaScript/main.js

@@ -20,18 +20,23 @@ document.addEventListener("DOMContentLoaded", function () {
 
     updateAnimationControllsDisplay();
     enableAnimCheckbox.addEventListener("change", updateAnimationControllsDisplay);
+    animAlongPathCheckbox.addEventListener("change", updateAnimationControllsDisplay);
 
 
     startAnimButton.addEventListener("click", () => {
-        runAnimation(setting)
+        animRouter(setting)
     })
+
 })
 
 const updateAnimationControllsDisplay = () => {
     let isChecked = enableAnimCheckbox.checked;
+    let isPathAnim = animAlongPathCheckbox.checked;
     // console.log(isChecked);
     document.querySelectorAll(".anim-related").forEach((elem) => { elem.hidden = !isChecked });
     document.querySelectorAll(".anim-related-inverse").forEach((elem) => { elem.hidden = isChecked });
+    document.querySelectorAll(".path-anim-related").forEach((elem) => { elem.hidden = !(isPathAnim && isChecked) });
+    document.querySelectorAll(".path-anim-related-inverse").forEach((elem) => { elem.hidden = (isPathAnim && isChecked) });
 }
 
 
@@ -47,8 +52,23 @@ const draw = (dataForm) => {
 
 }
 
+const animRouter = (dataForm) => {
+    if (dataForm.animAlongPathCheckbox.checked) {
+        let path = drawPath(Number(dataForm.pathSelect.value));
+        const svg = d3.select("svg")
+        let pict = drawSmile(svg);
+        pict.transition()
+            .ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
+            .duration(6000)
+            .attrTween('transform', translateAlong(path.node()));
+    }
+    else {
+        runAnimation(dataForm)
+    }
+}
+
 const runAnimation = (dataForm) => {
-	const svg = d3.select("svg")
+    const svg = d3.select("svg")
     let pict = drawSmile(svg);
     pict.attr("transform", `
         translate(${dataForm.cx.value},
@@ -56,10 +76,10 @@ const runAnimation = (dataForm) => {
         scale(${dataForm.sx.value},
         ${dataForm.sy.value})
         rotate(${dataForm.r.value})`)
-    .transition()
+        .transition()
-    .duration(6000)
+        .duration(6000)
-    .ease([d3.easeLinear,d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
+        .ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
-    .attr("transform", `
+        .attr("transform", `
         translate(${dataForm.cx_finish.value},
         ${dataForm.cy_finish.value})
         scale(${dataForm.sx_finish.value},

labs/lab2/JavaScript/path.js

@@ -0,0 +1,74 @@
+/* массив точек пути будет иметь следующий вид:
+  [
+    {x: координата, y: координата},
+    {x: координата, y: координата},
+    ...
+  ]
+*/
+// создаем массив точек, расположенных буквой "Г"
+function createPathG() {
+    const svg = d3.select("svg")
+	const width = svg.attr("width")
+	const height = svg.attr("height")
+
+    let data = [];
+    const padding = 100;
+    //начальное положение рисунка
+    let posX = padding;
+    let posY = height - padding;
+    const h = 5;
+    // координаты y - уменьшаются, x - постоянны
+    while (posY > padding) {
+        data.push( {x: posX, y: posY});
+        posY -= h;
+    }
+    // координаты y - постоянны, x - увеличиваются
+    while (posX < width - padding) {
+        data.push( {x: posX, y: posY});
+        posX += h;
+    }
+    return data
+}
+
+// создаем массив точек, расположенных по кругу
+function createPathCircle() {
+    const svg = d3.select("svg")
+	const width = svg.attr("width")
+	const height = svg.attr("height")
+    let data = [];
+    // используем параметрическую форму описания круга
+    // центр расположен в центре svg-элемента, а радиус равен трети высоты/ширины
+    for (let t = 0 ; t <= Math.PI * 2; t += 0.1) {
+        data.push(
+            {x: width / 2 + width / 3 * Math.sin(t),
+             y: height / 2 + height / 3 * Math.cos(t)}
+        );
+    }
+    return data
+}
+const drawPath =(typePath) => {
+	// создаем массив точек
+	const dataPoints = (typePath == 0)? createPathG() : createPathCircle();
+
+	const line = d3.line()
+		.x((d) => d.x)
+		.y((d) => d.y);
+    const svg = d3.select("svg")
+	// создаем путь на основе массива точек	  
+	const path = svg.append('path')
+		.attr('d', line(dataPoints))
+		.attr('stroke', 'black')
+		.attr('fill', 'none');
+		
+	return path;	
+}
+
+function translateAlong(path) {
+    const length = path.getTotalLength();
+    return function() {
+        return function(t) {
+            const {x, y} = path.getPointAtLength(t * length);
+            return `translate(${x},${y})`;
+        }
+    }
+}

labs/lab2/index.html

@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <html lang="ru<head>
-    <meta charset="utf-8">
+    <meta charset=" utf-8">
-    <title> Трансформация и анимация</title>
+<title> Трансформация и анимация</title>
-    <link rel="stylesheet" href="CSS/style.css">
+<link rel="stylesheet" href="CSS/style.css">
-    <script src="JavaScript/d3.v7.min.js"> </script>
+<script src="JavaScript/d3.v7.min.js"> </script>
-    <script src="JavaScript/main.js"></script>
+<script src="JavaScript/main.js"></script>
-    <script src="JavaScript/image.js"></script>
+<script src="JavaScript/image.js"></script>
+<script src="JavaScript/path.js"></script>
 </head>
 
 <body>
     <form id="setting">
-        <p>Координаты рисунка<br>
+        <p class="path-anim-related-inverse">Координаты рисунка<br>
             <label for="cx">x: </label>
             <input type="number" id="cx" value="300" max="600" min="0">
             <label class="anim-related" for="cx_finish">до: </label>
@@ -21,7 +22,14 @@
             <label class="anim-related" for="cy_finish">до: </label>
             <input type="number" id="cy_finish" value="300" max="600" min="0">
         </p>
-        <p>Масштаб<br>
+        <p class="path-anim-related">Пути перемещения<br>
+            <select id="pathSelect">
+                <option value="0">Буквой "Г"</option>
+                <option value="1">По кругу</option>
+
+            </select>
+        </p>
+        <p class="path-anim-related-inverse" >Масштаб<br>
             <label for="sx">по x: </label>
             <input type="number" id="sx" value="1" max="100" min="-100">
             <label class="anim-related" for="sx_finish">до: </label>
@@ -32,19 +40,20 @@
             <label class="anim-related" for="sy_finish">до: </label>
             <input class="anim-related" type="number" id="sy_finish" value="1.5" max="100" min="-100">
         </p>
-        <p>Поворот<br>
+        <p class="path-anim-related-inverse">Поворот<br>
             <label for="r">x: </label>
             <input type="number" id="r" value="0" max="360" min="-360">
             <label class="anim-related" for="r_finish">до: </label>
             <input class="anim-related" type="number" id="r_finish" value="360" max="360" min="-360">
         </p>
         <p>
-            <input type="button"  class="anim-related-inverse" id="applyButton" value="Нарисовать">
+            <input type="button" class="anim-related-inverse" id="applyButton" value="Нарисовать">
             <input type="button" id="clearButton" value="Отчистить">
         </p>
         <p>
-            Включить Анимацию? <input type="checkbox" id="enableAnimCheckbox"> 
+            Включить Анимацию? <input type="checkbox" id="enableAnimCheckbox"><br>
-            <select class="anim-related"  id ="animTypeSelect">
+            <label class="anim-related" for="animAlongPathCheckbox"> Перемещение вдоль пути? </label><input type="checkbox" id="animAlongPathCheckbox" class="anim-related">
+            <select class="anim-related" id="animTypeSelect">
                 <option value="0">linear</option>
                 <option value="1">elastic</option>
                 <option value="2">bounce</option>