diff --git a/current_site/src/pages/svg_playground.pug b/current_site/src/pages/svg_playground.pug index e0646dc..fd93636 100644 --- a/current_site/src/pages/svg_playground.pug +++ b/current_site/src/pages/svg_playground.pug @@ -22,9 +22,9 @@ html(lang="ru") input#cx_finish.anim-related(type="number", value="300", max="600", min="0") br label(for="cy") y: - input#cy.anim-related(type="number", value="300", max="600", min="0") + input#cy(type="number", value="300", max="600", min="0") label.anim-related(for="cy_finish") до: - input#cy_finish(type="number", value="300", max="600", min="0") + input.anim-related#cy_finish(type="number", value="300", max="600", min="0") p.path-anim-related | Пути перемещения diff --git a/current_site/src/pages/svg_playground/path.js b/current_site/src/pages/svg_playground/path.js index 3fd99c1..1f2d934 100644 --- a/current_site/src/pages/svg_playground/path.js +++ b/current_site/src/pages/svg_playground/path.js @@ -41,14 +41,29 @@ function createPathCircle() { 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)} + 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 = (typePath == 0)? createPathG() : createPathCircle(); + const dataPoints = [ createPathG, createPathCircle,createPathSpiral][Number(typePath)]() const line = d3.line() .x((d) => d.x)