hw 2 done

current_site/src/pages/svg_playground.pug

@@ -34,7 +34,7 @@ html(lang="ru")
                     option(value="1") По кругу
                     option(value="2") Спиралью
 
-            p.path-anim-related-inverse
+            p
                 | Масштаб
                 br
                 label(for="sx") по x:
@@ -47,7 +47,7 @@ html(lang="ru")
                 label.anim-related(for="sy_finish") до:
                 input#sy_finish.anim-related(type="number", value="1.5", max="100", min="-100")
 
-            p.path-anim-related-inverse
+            p
                 | Поворот
                 br
                 label(for="r") x:
@@ -55,10 +55,16 @@ html(lang="ru")
                 label.anim-related(for="r_finish") до:
                 input#r_finish.anim-related(type="number", value="360", max="360", min="-360")
 
+            p.anim-related
+                | Время анамации (мс)
+                br
+                label(for="duration") x:
+                input#duration(type="number", value="2000", max="10000", min="1")
+                
             p
                 input#applyButton.anim-related-inverse(type="button", value="Нарисовать")
                 input#clearButton(type="button", value="Отчистить")
-
+            
             p
                 | Включить Анимацию?
                 input#enableAnimCheckbox(type="checkbox")

current_site/src/pages/svg_playground/image.js

@@ -3,31 +3,31 @@
 function drawSmile(svg) {
     let smile = svg.append("g")
         .style("stroke", "brown")
-        .style("stroke-width", 2)
+        .style("stroke-width", 0)
         .style("fill", "brown");
-    //лицо
-    smile.append("circle") 
-        .attr("cx", 0)
-        .attr("cy", 0)
-        .attr("r", 50)
-        .style("fill", "yellow");
-    //левый глаз   
-    smile.append("circle") 
-        .attr("cx", -20)
-        .attr("cy", -10)
-        .attr("r", 5);
-    //правый глаз
-    smile.append("circle") 
-        .attr("cx", 20)
-        .attr("cy", -10)
-        .attr("r", 5);
-    // улыбка
-    let arc = d3.arc()
-       .innerRadius(35)
-       .outerRadius(35);    
-    smile.append("path")
-       .attr("d", arc({startAngle: Math.PI /3 * 2, endAngle: Math.PI/3 * 4}))
-       .style("stroke", "brown")
 
-     return smile  
+    for (let t = 0; t <= Math.PI * 6; t += .8) {
+        let cords = {
+            x:  50 / 3 * (1 - (t / (Math.PI * 6))) * -Math.sin(t),
+            y: 50 / 3 * (1 - (t / (Math.PI * 6))) * Math.cos(t)
+        }
+        smile.append("circle")
+            .attr("cx", cords["x"])
+            .attr("cy", cords["y"])
+            .attr("r", (1 - (t / (Math.PI * 6))))
+            .style("fill", "red");
+    }
+
+    for (let t = .4; t <= Math.PI * 6; t += .8) {
+        let cords = {
+            x:  50 / 3 * (1 - (t / (Math.PI * 6))) * -Math.sin(t),
+            y:  50 / 3 * (1 - (t / (Math.PI * 6))) *Math.cos(t)
+        }
+        smile.append("circle")
+            .attr("cx", cords["x"])
+            .attr("cy", cords["y"])
+            .attr("r", (1 - (t / (Math.PI * 6))))
+            .style("fill", "green");
+    }
+    return smile
 }   

current_site/src/pages/svg_playground/main.js

@@ -57,10 +57,15 @@ const animRouter = (dataForm) => {
         let path = drawPath(Number(dataForm.pathSelect.value));
         const svg = d3.select("svg")
         let pict = drawSmile(svg);
+        const parameters = {
+            sx:[Number(dataForm.sx.value),Number(dataForm.sx_finish.value)],
+            sy:[Number(dataForm.sy.value),Number(dataForm.sy_finish.value)],
+            r:[Number(dataForm.r.value),Number(dataForm.r_finish.value)],
+        };
         pict.transition()
             .ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
-            .duration(6000)
-            .attrTween('transform', translateAlong(path.node()));
+            .duration(Number(duration.value))
+            .attrTween('transform', translateAlong(path.node(),parameters));
     }
     else {
         runAnimation(dataForm)
@@ -77,7 +82,7 @@ const runAnimation = (dataForm) => {
         ${dataForm.sy.value})
         rotate(${dataForm.r.value})`)
         .transition()
-        .duration(6000)
+        .duration(Number(duration.value))
         .ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
         .attr("transform", `
         translate(${dataForm.cx_finish.value},

current_site/src/pages/svg_playground/path.js

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