hw 2 done

current_site/src/components/data.pug

@@ -6,7 +6,8 @@ block variables
 		OpenCV: './opencv_details.html',
 		Photography: './photography-details.html',
 		Table: './table.html',
-		Institute: './images/institute.png'
+		Institute: './images/institute.png',
+		"SVG Playground": './svg_playground.html'
 	};
 
 	var smallCards = [

current_site/src/pages/svg_playground.pug

@@ -0,0 +1,81 @@
+include ../components/mixins.pug
+
+doctype html
+html(lang="ru")
+    head
+        meta(charset="utf-8")
+        title Трансформация и анимация
+        script(src="svg_playground/d3.v7.min.js")
+        script(src="svg_playground/main.js")
+        script(src="svg_playground/image.js")
+        script(src="svg_playground/path.js")
+    body
+        +navbarMixin("SVG Playground")
+
+        form#setting
+            p.path-anim-related-inverse
+                | Координаты рисунка
+                br
+                label(for="cx") x:
+                input#cx(type="number", value="300", max="600", min="0")
+                label.anim-related(for="cx_finish") до:
+                input#cx_finish.anim-related(type="number", value="300", max="600", min="0")
+                br
+                label(for="cy") y:
+                input#cy(type="number", value="300", max="600", min="0")
+                label.anim-related(for="cy_finish") до:
+                input.anim-related#cy_finish(type="number", value="300", max="600", min="0")
+
+            p.path-anim-related
+                | Пути перемещения
+                br
+                select#pathSelect
+                    option(value="0") Буквой "Г"
+                    option(value="1") По кругу
+                    option(value="2") Спиралью
+
+            p
+                | Масштаб
+                br
+                label(for="sx") по x:
+                input#sx(type="number", value="1", max="100", min="-100")
+                label.anim-related(for="sx_finish") до:
+                input#sx_finish.anim-related(type="number", value="1.5", max="100", min="-100")
+                br
+                label(for="sy") по y:
+                input#sy(type="number", value="1", max="100", min="-100")
+                label.anim-related(for="sy_finish") до:
+                input#sy_finish.anim-related(type="number", value="1.5", max="100", min="-100")
+
+            p
+                | Поворот
+                br
+                label(for="r") x:
+                input#r(type="number", value="0", max="360", min="-360")
+                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")
+                br
+                label.anim-related(for="animAlongPathCheckbox")  Перемещение вдоль пути?
+                input#animAlongPathCheckbox.anim-related(type="checkbox")
+                select#animTypeSelect.anim-related
+                    option(value="0") linear
+                    option(value="1") elastic
+                    option(value="2") bounce
+                br
+                input#startAnimButton.anim-related(type="button", value="Анимировать")
+
+        svg

current_site/src/pages/svg_playground/image.js

@@ -0,0 +1,33 @@
+// создаем изображение смайлик
+// рисуем его относительно точки (0, 0)
+function drawSmile(svg) {
+    let smile = svg.append("g")
+        .style("stroke", "brown")
+        .style("stroke-width", 0)
+        .style("fill", "brown");
+
+    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

@@ -0,0 +1,93 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const width = 600;
+    const height = 600;
+    const svg = d3.select("svg")
+        .attr("width", width)
+        .attr("height", height);
+
+    // let pict1 = drawSmile(svg);
+    // pict1.attr("transform", `translate(400, 400) scale(1.5, 1.5) rotate(180)`);
+
+    // let pict = drawSmile(svg);
+    // pict.attr("transform", "translate(200, 200)");
+
+    setting.applyButton.addEventListener("click", () => {
+        draw(setting);
+    })
+    setting.clearButton.addEventListener("click", () => {
+        svg.selectAll('*').remove()
+    })
+
+    updateAnimationControllsDisplay();
+    enableAnimCheckbox.addEventListener("change", updateAnimationControllsDisplay);
+    animAlongPathCheckbox.addEventListener("change", updateAnimationControllsDisplay);
+
+
+    startAnimButton.addEventListener("click", () => {
+        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) });
+}
+
+
+const draw = (dataForm) => {
+    const svg = d3.select("svg")
+    let pict = drawSmile(svg);
+    pict.attr("transform", `
+        translate(${dataForm.cx.value},
+        ${dataForm.cy.value})
+        scale(${dataForm.sx.value},
+        ${dataForm.sy.value})
+        rotate(${dataForm.r.value})`);
+
+}
+
+const animRouter = (dataForm) => {
+    if (dataForm.animAlongPathCheckbox.checked) {
+        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(Number(duration.value))
+            .attrTween('transform', translateAlong(path.node(),parameters));
+    }
+    else {
+        runAnimation(dataForm)
+    }
+}
+
+const runAnimation = (dataForm) => {
+    const svg = d3.select("svg")
+    let pict = drawSmile(svg);
+    pict.attr("transform", `
+        translate(${dataForm.cx.value},
+        ${dataForm.cy.value})
+        scale(${dataForm.sx.value},
+        ${dataForm.sy.value})
+        rotate(${dataForm.r.value})`)
+        .transition()
+        .duration(Number(duration.value))
+        .ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
+        .attr("transform", `
+        translate(${dataForm.cx_finish.value},
+        ${dataForm.cy_finish.value})
+        scale(${dataForm.sx_finish.value},
+        ${dataForm.sy_finish.value})
+        rotate(${dataForm.r_finish.value})`);
+}

current_site/src/pages/svg_playground/path.js

@@ -0,0 +1,99 @@
+/* массив точек пути будет иметь следующий вид:
+  [
+    {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
+}
+function createPathSpiral() {
+    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 * 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)
+            }
+        );
+    }
+    return data
+}
+const drawPath = (typePath) => {
+    // создаем массив точек
+    const dataPoints = [createPathG, createPathCircle, createPathSpiral][Number(typePath)]()
+
+    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, params) {
+    const length = path.getTotalLength();
+
+    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})
+            `;
+        }
+    }
+}

labs/lab2/JavaScript/image.js

@@ -0,0 +1,33 @@
+// создаем изображение смайлик
+// рисуем его относительно точки (0, 0)
+function drawSmile(svg) {
+    let smile = svg.append("g")
+        .style("stroke", "brown")
+        .style("stroke-width", 2)
+        .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  
+}   

labs/lab2/JavaScript/main.js

@@ -0,0 +1,88 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const width = 600;
+    const height = 600;
+    const svg = d3.select("svg")
+        .attr("width", width)
+        .attr("height", height);
+
+    // let pict1 = drawSmile(svg);
+    // pict1.attr("transform", `translate(400, 400) scale(1.5, 1.5) rotate(180)`);
+
+    // let pict = drawSmile(svg);
+    // pict.attr("transform", "translate(200, 200)");
+
+    setting.applyButton.addEventListener("click", () => {
+        draw(setting);
+    })
+    setting.clearButton.addEventListener("click", () => {
+        svg.selectAll('*').remove()
+    })
+
+    updateAnimationControllsDisplay();
+    enableAnimCheckbox.addEventListener("change", updateAnimationControllsDisplay);
+    animAlongPathCheckbox.addEventListener("change", updateAnimationControllsDisplay);
+
+
+    startAnimButton.addEventListener("click", () => {
+        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) });
+}
+
+
+const draw = (dataForm) => {
+    const svg = d3.select("svg")
+    let pict = drawSmile(svg);
+    pict.attr("transform", `
+        translate(${dataForm.cx.value},
+        ${dataForm.cy.value})
+        scale(${dataForm.sx.value},
+        ${dataForm.sy.value})
+        rotate(${dataForm.r.value})`);
+
+}
+
+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")
+    let pict = drawSmile(svg);
+    pict.attr("transform", `
+        translate(${dataForm.cx.value},
+        ${dataForm.cy.value})
+        scale(${dataForm.sx.value},
+        ${dataForm.sy.value})
+        rotate(${dataForm.r.value})`)
+        .transition()
+        .duration(6000)
+        .ease([d3.easeLinear, d3.easeElastic, d3.easeBounce][Number(animTypeSelect.value)])
+        .attr("transform", `
+        translate(${dataForm.cx_finish.value},
+        ${dataForm.cy_finish.value})
+        scale(${dataForm.sx_finish.value},
+        ${dataForm.sy_finish.value})
+        rotate(${dataForm.r_finish.value})`);
+}

labs/lab2/JavaScript/path.js

@@ -0,0 +1,90 @@
+/* массив точек пути будет иметь следующий вид:
+  [
+    {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
+}
+
+function createPathSpiral() {
+    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 * 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)}
+        );
+    }
+    return data
+}
+const drawPath =(typePath) => {
+	// создаем массив точек
+	const dataPoints = [createPathG,createPathCircle,createPathSpiral][Number(typePath)]()
+
+	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

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="ru<head>
+    <meta charset=" utf-8">
+<title> Трансформация и анимация</title>
+<link rel="stylesheet" href="CSS/style.css">
+<script src="JavaScript/d3.v7.min.js"> </script>
+<script src="JavaScript/main.js"></script>
+<script src="JavaScript/image.js"></script>
+<script src="JavaScript/path.js"></script>
+</head>
+
+<body>
+    <form id="setting">
+        <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>
+            <input class="anim-related" type="number" id="cx_finish" value="300" max="600" min="0">
+            <br>
+            <label for="cy">y: </label>
+            <input type="number" id="cy" value="300" max="600" min="0">
+            <label class="anim-related" for="cy_finish">до: </label>
+            <input class="anim-related" type="number" id="cy_finish" value="300" max="600" min="0">
+        </p>
+        <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>
+            <input class="anim-related" type="number" id="sx_finish" value="1.5" max="100" min="-100">
+            <br>
+            <label for="sy">по y: </label>
+            <input type="number" id="sy" value="1" max="100" min="-100">
+            <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 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" id="clearButton" value="Отчистить">
+        </p>
+        <p>
+            Включить Анимацию? <input type="checkbox" id="enableAnimCheckbox"><br>
+            <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>
+            </select>
+            <br>
+            <input class="anim-related" type="button" id="startAnimButton" value="Анимировать">
+        </p>
+
+    </form>
+
+
+    <svg></svg>
+
+</body>
+
+</html>

labs/lab2/task/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ru<head>
+    <meta charset=" utf-8">
+<title> Практика 2</title>
+<script src="d3.v7.min.js"> </script>
+<script src="main.js"></script>
+</head>
+
+<body>
+   
+</body>
+</html>

labs/lab2/task/main.js

@@ -0,0 +1,40 @@
+const books = [
+    {
+        title: 'Мастер и Маргарита',
+        author: 'Булгаков М.А.'
+    },
+    {
+        title: 'Белая гвардия',
+        author: 'Булгаков М.А.'
+    },
+    {
+        title: 'Война и мир',
+        author: 'Толстой Л.Н.'
+    },
+    {
+        title: 'Анна Каренина',
+        author: 'Толстой Л.Н.'
+    },
+    {
+        title: 'Игрок',
+        author: 'Достоевский Ф.М.'
+    }
+];
+
+const booksByAuthor = d3.group(books, d => d["author"])
+
+document.addEventListener("DOMContentLoaded", function () {
+    temp = d3.selectAll("p")
+        .data(booksByAuthor)
+        .enter()
+        .append("p")
+        .text(d => d[0])
+        .append("select")
+        .selectAll("option")
+        .data(d => [{ title: "выбрать все" }, ...d[1]])
+        .enter()
+        .append("option")
+        .text(d => d["title"])
+})
+
+