From 1fa91ba906af7097c040152065d1a7a2585d688c Mon Sep 17 00:00:00 2001
From: Ilya Kantor <iliakan@gmail.com>
Date: Wed, 14 Aug 2019 13:40:50 +0300
Subject: [PATCH] minor

---
 7-animation/1-bezier-curve/demo.svg | 278 +++++++++++++++++++++++++++-
 1 file changed, 277 insertions(+), 1 deletion(-)

diff --git a/7-animation/1-bezier-curve/demo.svg b/7-animation/1-bezier-curve/demo.svg
index fbf8e87d..5240697e 100644
--- a/7-animation/1-bezier-curve/demo.svg
+++ b/7-animation/1-bezier-curve/demo.svg
@@ -1 +1,277 @@
-<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="360">
<!--+ no-optimize -->
<!--
@see
http://www.learnsvg.com/books/learnsvg/html/bitmap/chapter04/page04-1.php
http://apike.ca/prog_svg_paths.html
http://www.the-art-of-web.com/css/css-animation/
http://srufaculty.sru.edu/david.dailey/svg/curve.svg
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
-->
<defs>
<pattern id="Pat01" width="10" height="10" patternUnits="userSpaceOnUse">
	<rect width="10" height="10" fill="#FFFFFF" stroke="#000000" stroke-width="0.1"/>
</pattern>
</defs>


<rect x="20" y="50" width="300" height="300" fill="url(#Pat01)"/>


<path d="M20,50 H320 V350 H20 Z" fill="none" stroke="none" stroke-width="0.5" stroke-dasharray="2 2"/>


<path fill="none" id="control-path" stroke="#E8C48E"/>
<path stroke="red" fill="none" id="bezier-path" stroke-width="1.2"/>

<path d="" fill="none" id="t-path-template"/>

<svg x="0" y="0" id="p-template">
<circle r="4" fill="white" stroke="#E8C48E" stroke-width="1" cx="20" cy="20" style="cursor: pointer"/>
<text x="12" y="12" style="font-size:16px;font-weight:bold">1</text>
</svg>

<circle r="4" fill="red" stroke="red" id="marker" stroke-width="1" cx="-10" cy="-10"/>

<svg>
<image xlink:href="play.png" x="5" y="5" style="cursor:pointer" width="30" height="30" id="run-button"/>
<text x="38" y="27" style="font-size:18px;font-family:'DejaVu Sans Mono', 'Lucida Console', 'Menlo', 'Monaco', Lucida Console, sans-serif">t:<tspan id="t-value">1</tspan></text>
</svg>

<script><![CDATA[
	let xmlns = "http://www.w3.org/2000/svg";
	let xlinkns  = "http://www.w3.org/1999/xlink";

	let box = {left:20, top: 50, right: 320, bottom: 350 };

	if (location.search.match('small=1')) {
	  box = {left:20, top: 50, right: 120, bottom: 150 };
	}

	document.documentElement.ondragstart = function() {
	  return false;
	};

	let pointsIn = location.search.match(/p=(.*?)($|&)/)[1];

	// don't show a piece of control path between P2 and P3
	let hideMiddleControlPath = location.search.match('nocpath=1');

	pointsIn = pointsIn.split(',');

	let points = [];

	// read points from ?p=...
	for(let i=0; i<pointsIn.length; i++) {
	  let x = box.left + (box.right - box.left)*pointsIn[i];
	  let y = box.bottom + (box.top - box.bottom)*pointsIn[++i];
	  points.push({x: x, y: y});
	}

	let bezierPath = document.getElementById("bezier-path");
	let controlPath = document.getElementById("control-path");
	//controlPath.style.display = location.search.match('nocpath=1') ? 'none' : 'block';

	let runButton = document.getElementById("run-button");
	runButton.parentNode.style.display = location.search.match('animate=1') ? 'block' : 'none';



	let tPathTemplate = document.getElementById("t-path-template");
	tPathTemplate.parentNode.removeChild(tPathTemplate);

	function drawPath() {
	  let letter;
	  switch (points.length) {
	  case 4:
	    letter = 'C';
	    break;
	  case 3:
	    letter = 'Q';
	    break;
	  default:
	    letter = 'L';
	  }
	  let bezierPathD = "M" + points[0].x + ',' + points[0].y + ' '+letter;
	  let controlPathD = "M" + points[0].x + ',' + points[0].y + ' L';

	  for(let i = 1; i < points.length; i++) {
	    bezierPathD += points[i].x + ',' + points[i].y + ' ';
	    controlPathD += points[i].x + ',' + points[i].y + ' ';
	  }
	  bezierPath.setAttribute('d', bezierPathD);
	  controlPath.setAttribute('d', controlPathD);

	  function dist(a,b) {
	    return Math.round(Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y)));
	  }

	  if (hideMiddleControlPath) {
	    controlPath.setAttribute('stroke-dasharray', dist(points[0],points[1])+' '+dist(points[1],points[2])+' 9999 9999');
	  }

	}

	// draw control points
	function drawPoints(points) {
	  let p = document.getElementById('p-template');
	  p.removeAttribute('id');
	  p.parentNode.removeChild(p);

	  for(let i=0; i<points.length; i++) {
	    let point = p.cloneNode(true);
	    point.getElementsByTagName('text')[0].firstChild.data = i+1;
	    setPointCoords(point, i);
	    setPointHandler(point, i);
	    document.documentElement.appendChild(point);
	  }

	}

	// control points coords are shifted from Left-Upper corner a bit
	// to give them space to render
	function setPointCoords(point, i) {
	  point.setAttribute('x', points[i].x-20);
	  point.setAttribute('y', points[i].y-20);
	}

	function setPointHandler(point, i) {
	  let circle = point.getElementsByTagName('circle')[0];
	  circle.onmousedown = function() {
	    document.onmousemove = function(e) {
	      let x = e.pageX, y = e.pageY;

	      // constrain withing the box
	      if (x < box.left) x = box.left;
	      if (x > box.right) x = box.right;
	      if (y > box.bottom) y = box.bottom;
	      if (y < box.top) y = box.top;

	      points[i].x = x;
	      points[i].y = y;
	      setPointCoords(point, i);
	      drawPath();
	    }
	    document.onmouseup = function() {
	      document.onmousemove = document.onmouseup = null;
	    }
	    return false;
	  }
	}

	// draw point connectors which form the curve
	function drawT(points, t) {
	  let path = document.getElementById('t-'+points.length);

	  if (!path) {
	    path = tPathTemplate.cloneNode(true);
	    path.setAttribute('stroke', ["blue","#0a0","red"][points.length % 3]);
	    path.setAttribute('id', 't-'+points.length);
	    document.documentElement.appendChild(path);
	  }

	  let subPoints = [];
	  let x = points[0].x + (points[1].x - points[0].x)*t;
	  let y = points[0].y + (points[1].y - points[0].y)*t;

	  let tPathD = "M" + x + ',' + y + ' L';
	  subPoints.push({x, y});

	  for(let i=1; i<points.length-1; i++) {
	    let x = points[i].x + (points[i+1].x - points[i].x)*t;
	    let y = points[i].y + (points[i+1].y - points[i].y)*t;
	    subPoints.push({x: x, y: y});

	    tPathD += x + ',' + y + ' ';
	  }

	  if (points.length <= 3) {
	    let m = document.getElementById('marker');
	    let mx, my;
	    if (t == 1) {
	      mx = -10, my = -10;
	    } else {
	      mx = subPoints[0].x + (subPoints[1].x-subPoints[0].x)*t;
	      my = subPoints[0].y + (subPoints[1].y-subPoints[0].y)*t;
	    }
	    m.setAttribute('cx', mx);
	    m.setAttribute('cy', my);
	    path.setAttribute('stroke-width', 2);
	  }
	  if (points.length == 2) {
	    // only 2 points provided, special case
	    tPathD = "M"+points[0].x+","+points[0].y+" L"+x+","+y;
	  }

	  path.setAttribute('d', tPathD);

	  if (subPoints.length > 2){
	    drawT(subPoints, t);
	  }
	}

	let t = 0;
	let timer;


	// animate the curve
	function animate(complete) {

	  timer = setInterval(function() {
	    if (t>1) {
	      t = 1;
	    }
	    //bezierPath.setAttribute('stroke-dasharray', t*bezierPath.getTotalLength()+' '+bezierPath.getTotalLength());
	    drawT(points, t);

	    document.getElementById('t-value').firstChild.nodeValue = t==0 ? 0 : t == 1 ? 1 : t.toFixed(3);
	/*
	    if (t >= 0.5) {
	      clearInterval(timer);
	      runButton.parentNode.style.display = 'none';
	      return;
	    }
	*/
	    if (t == 1) {
	      clearInterval(timer);
	      timer = 0;
	      complete && complete();
	      return;
	    }

	    t += 0.005;
	  }, 30);
	}

	function animationDone() {
	  for(let i=1; i<=points.length; i++) {
	    let path = document.getElementById('t-'+i);
	    path && document.documentElement.removeChild(path);
	  }
	  t = 0;
	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
	}

	runButton.onclick = onAnimate;

	function onAnimate() {
	  if (timer) {
	    // animation in action
	    runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
	    clearInterval(timer);
	    timer = 0;
	    return;
	  }

	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'pause.png');
	  animate(animationDone)
	}

	drawPath();
	drawPoints(points);


//]]></script>

</svg>
+<?xml version="1.0" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="360">
+<!--+ no-optimize -->
+<!--
+@see
+http://www.learnsvg.com/books/learnsvg/html/bitmap/chapter04/page04-1.php
+http://apike.ca/prog_svg_paths.html
+http://www.the-art-of-web.com/css/css-animation/
+http://srufaculty.sru.edu/david.dailey/svg/curve.svg
+http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
+-->
+<defs>
+<pattern id="Pat01" width="10" height="10" patternUnits="userSpaceOnUse">
+	<rect width="10" height="10" fill="#FFFFFF" stroke="#000000" stroke-width="0.1"/>
+</pattern>
+</defs>
+
+
+<rect x="20" y="50" width="300" height="300" fill="url(#Pat01)"/>
+
+
+<path d="M20,50 H320 V350 H20 Z" fill="none" stroke="none" stroke-width="0.5" stroke-dasharray="2 2"/>
+
+
+<path fill="none" id="control-path" stroke="#E8C48E"/>
+<path stroke="red" fill="none" id="bezier-path" stroke-width="1.2"/>
+
+<path d="" fill="none" id="t-path-template"/>
+
+<svg x="0" y="0" id="p-template">
+<circle r="4" fill="white" stroke="#E8C48E" stroke-width="1" cx="20" cy="20" style="cursor: pointer"/>
+<text x="12" y="12" style="font-size:16px;font-weight:bold">1</text>
+</svg>
+
+<circle r="4" fill="red" stroke="red" id="marker" stroke-width="1" cx="-10" cy="-10"/>
+
+<svg>
+<image xlink:href="play.png" x="5" y="5" style="cursor:pointer" width="30" height="30" id="run-button"/>
+<text x="38" y="27" style="font-size:18px;font-family:'DejaVu Sans Mono', 'Lucida Console', 'Menlo', 'Monaco', Lucida Console, sans-serif">t:<tspan id="t-value">1</tspan></text>
+</svg>
+
+<script><![CDATA[
+	let xmlns = "http://www.w3.org/2000/svg";
+	let xlinkns  = "http://www.w3.org/1999/xlink";
+
+	let box = {left:20, top: 50, right: 320, bottom: 350 };
+
+	if (location.search.match('small=1')) {
+	  box = {left:20, top: 50, right: 120, bottom: 150 };
+	}
+
+	document.documentElement.ondragstart = function() {
+	  return false;
+	};
+
+	let pointsIn = location.search.match(/p=(.*?)($|&)/)[1];
+
+	// don't show a piece of control path between P2 and P3
+	let hideMiddleControlPath = location.search.match('nocpath=1');
+
+	pointsIn = pointsIn.split(',');
+
+	let points = [];
+
+	// read points from ?p=...
+	for(let i=0; i<pointsIn.length; i++) {
+	  let x = box.left + (box.right - box.left)*pointsIn[i];
+	  let y = box.bottom + (box.top - box.bottom)*pointsIn[++i];
+	  points.push({x: x, y: y});
+	}
+
+	let bezierPath = document.getElementById("bezier-path");
+	let controlPath = document.getElementById("control-path");
+	//controlPath.style.display = location.search.match('nocpath=1') ? 'none' : 'block';
+
+	let runButton = document.getElementById("run-button");
+	runButton.parentNode.style.display = location.search.match('animate=1') ? 'block' : 'none';
+
+
+
+	let tPathTemplate = document.getElementById("t-path-template");
+	tPathTemplate.parentNode.removeChild(tPathTemplate);
+
+	function drawPath() {
+	  let letter;
+	  switch (points.length) {
+	  case 4:
+	    letter = 'C';
+	    break;
+	  case 3:
+	    letter = 'Q';
+	    break;
+	  default:
+	    letter = 'L';
+	  }
+	  let bezierPathD = "M" + points[0].x + ',' + points[0].y + ' '+letter;
+	  let controlPathD = "M" + points[0].x + ',' + points[0].y + ' L';
+
+	  for(let i = 1; i < points.length; i++) {
+	    bezierPathD += points[i].x + ',' + points[i].y + ' ';
+	    controlPathD += points[i].x + ',' + points[i].y + ' ';
+	  }
+	  bezierPath.setAttribute('d', bezierPathD);
+	  controlPath.setAttribute('d', controlPathD);
+
+	  function dist(a,b) {
+	    return Math.round(Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y)));
+	  }
+
+	  if (hideMiddleControlPath) {
+	    controlPath.setAttribute('stroke-dasharray', dist(points[0],points[1])+' '+dist(points[1],points[2])+' 9999 9999');
+	  }
+
+	}
+
+	// draw control points
+	function drawPoints(points) {
+	  let p = document.getElementById('p-template');
+	  p.removeAttribute('id');
+	  p.parentNode.removeChild(p);
+
+	  for(let i=0; i<points.length; i++) {
+	    let point = p.cloneNode(true);
+	    point.getElementsByTagName('text')[0].firstChild.data = i+1;
+	    setPointCoords(point, i);
+	    setPointHandler(point, i);
+	    document.documentElement.appendChild(point);
+	  }
+
+	}
+
+	// control points coords are shifted from Left-Upper corner a bit
+	// to give them space to render
+	function setPointCoords(point, i) {
+	  point.setAttribute('x', points[i].x-20);
+	  point.setAttribute('y', points[i].y-20);
+	}
+
+	function setPointHandler(point, i) {
+	  let circle = point.getElementsByTagName('circle')[0];
+	  circle.onmousedown = function() {
+	    document.onmousemove = function(e) {
+	      let x = e.pageX, y = e.pageY;
+
+	      // constrain withing the box
+	      if (x < box.left) x = box.left;
+	      if (x > box.right) x = box.right;
+	      if (y > box.bottom) y = box.bottom;
+	      if (y < box.top) y = box.top;
+
+	      points[i].x = x;
+	      points[i].y = y;
+	      setPointCoords(point, i);
+	      drawPath();
+	    }
+	    document.onmouseup = function() {
+	      document.onmousemove = document.onmouseup = null;
+	    }
+	    return false;
+	  }
+	}
+
+	// draw point connectors which form the curve
+	function drawT(points, t) {
+	  let path = document.getElementById('t-'+points.length);
+
+	  if (!path) {
+	    path = tPathTemplate.cloneNode(true);
+	    path.setAttribute('stroke', ["blue","#0a0","red"][points.length % 3]);
+	    path.setAttribute('id', 't-'+points.length);
+	    document.documentElement.appendChild(path);
+	  }
+
+	  let subPoints = [];
+	  let x = points[0].x + (points[1].x - points[0].x)*t;
+	  let y = points[0].y + (points[1].y - points[0].y)*t;
+
+	  let tPathD = "M" + x + ',' + y + ' L';
+	  subPoints.push({x, y});
+
+	  for(let i=1; i<points.length-1; i++) {
+	    let x = points[i].x + (points[i+1].x - points[i].x)*t;
+	    let y = points[i].y + (points[i+1].y - points[i].y)*t;
+	    subPoints.push({x: x, y: y});
+
+	    tPathD += x + ',' + y + ' ';
+	  }
+
+	  if (points.length <= 3) {
+	    let m = document.getElementById('marker');
+	    let mx, my;
+	    if (t == 1) {
+	      mx = -10, my = -10;
+	    } else {
+	      mx = subPoints[0].x + (subPoints[1].x-subPoints[0].x)*t;
+	      my = subPoints[0].y + (subPoints[1].y-subPoints[0].y)*t;
+	    }
+	    m.setAttribute('cx', mx);
+	    m.setAttribute('cy', my);
+	    path.setAttribute('stroke-width', 2);
+	  }
+	  if (points.length == 2) {
+	    // only 2 points provided, special case
+	    tPathD = "M"+points[0].x+","+points[0].y+" L"+x+","+y;
+	  }
+
+	  path.setAttribute('d', tPathD);
+
+	  if (subPoints.length > 2){
+	    drawT(subPoints, t);
+	  }
+	}
+
+	let t = 0;
+	let timer;
+
+
+	// animate the curve
+	function animate(complete) {
+
+	  timer = setInterval(function() {
+	    if (t>1) {
+	      t = 1;
+	    }
+	    //bezierPath.setAttribute('stroke-dasharray', t*bezierPath.getTotalLength()+' '+bezierPath.getTotalLength());
+	    drawT(points, t);
+
+	    document.getElementById('t-value').firstChild.nodeValue = t==0 ? 0 : t == 1 ? 1 : t.toFixed(3);
+	/*
+	    if (t >= 0.5) {
+	      clearInterval(timer);
+	      runButton.parentNode.style.display = 'none';
+	      return;
+	    }
+	*/
+	    if (t == 1) {
+	      clearInterval(timer);
+	      timer = 0;
+	      complete && complete();
+	      return;
+	    }
+
+	    t += 0.005;
+	  }, 30);
+	}
+
+	function animationDone() {
+	  for(let i=1; i<=points.length; i++) {
+	    let path = document.getElementById('t-'+i);
+	    path && document.documentElement.removeChild(path);
+	  }
+	  t = 0;
+	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
+	}
+
+	runButton.onclick = onAnimate;
+
+	function onAnimate() {
+	  if (timer) {
+	    // animation in action
+	    runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
+	    clearInterval(timer);
+	    timer = 0;
+	    return;
+	  }
+
+	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'pause.png');
+	  animate(animationDone)
+	}
+
+	drawPath();
+	drawPoints(points);
+
+
+//]]></script>
+</svg>