From 9280e572d2c48be1c67aa04b3ba82c9b31bbab09 Mon Sep 17 00:00:00 2001
From: Wolfram Diestel <diestel@steloj.de>
Date: Sat, 22 Feb 2020 15:53:48 +0100
Subject: [PATCH] hipotrohxoido: desegnata/movata

---
 bld/k_hipocikloido.svg  |  4 +--
 bld/k_hipotrohxoido.svg | 58 +++++++++++++++++++++++++++++------------
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/bld/k_hipocikloido.svg b/bld/k_hipocikloido.svg
index 67b5117c353..7461d0a853b 100644
--- a/bld/k_hipocikloido.svg
+++ b/bld/k_hipocikloido.svg
@@ -120,14 +120,14 @@
       g_theta=Math.PI/5;
 
       function loop () {
-        if (g_theta < 14*Math.PI/4) {
+        if (g_theta < 14*Math.PI/5) {
           g_k("1",g_theta,g_theta,scale_xy = 60, parm = -3);
           g_k("2",g_theta,g_theta,scale_xy = 45, parm = -4);
           g_theta += 0.005
           sleep(500).then(requestAnimationFrame(loop));
         } else {
           g_k("1",g_theta,g_theta,scale_xy = 60, parm = -3);
-          g_k("2",3*g_theta,3*g_theta,scale_xy = 45, parm = -4);
+          g_k("2",g_theta,g_theta,scale_xy = 45, parm = -4);
         }
       }        
     ]]></script>
diff --git a/bld/k_hipotrohxoido.svg b/bld/k_hipotrohxoido.svg
index fd66c813344..bc8f2f7fcb8 100644
--- a/bld/k_hipotrohxoido.svg
+++ b/bld/k_hipotrohxoido.svg
@@ -22,21 +22,21 @@
     <script type="text/javascript"><![CDATA[
       function start(evt, scale) {
 
-        function xx(t) {
+        function xx(t,parm1,parm2) {
           return (1+parm1)*Math.cos(t)-parm2*Math.cos((1+parm1)*t);
         }
         
-        function yy(t) {
+        function yy(t,parm1,parm2) {
           return (1+parm1)*Math.sin(t)-parm2*Math.sin((1+parm1)*t);
         }
         
-        function path_data(f, g, t0, t1, nb_points, scale_xy) {
+        function path_data(f, g, t0, t1, nb_points, scale_xy,parm1,parm2) {
           var d = "M "; 
           var inc = (t1-t0)/nb_points;
           for (var t=t0; t<=t1; t+=inc) {
             if (!(Math.abs(f(t)) > scale/scale_xy) &&
               !(Math.abs(g(t)) > scale/scale_xy)) {
-              d += " " + scale_xy*f(t) + " " + (-scale_xy)*g(t) 
+              d += " " + scale_xy*f(t,parm1,parm2) + " " + (-scale_xy)*g(t,parm1,parm2) 
             }
           }
           return d;
@@ -62,15 +62,15 @@
         // Desegni la kurbojn
         var objet = svgdoc.getElementById("kurbo1");
         var scale_xy = 35, parm1 = -5, parm2 = 1.5 ;
-        objet.setAttribute ("d", path_data(xx, yy, t0, t1, 1000, scale_xy));
+        objet.setAttribute ("d", path_data(xx, yy, t0, t1, 1000, scale_xy,parm1,parm2));
         var objet = svgdoc.getElementById("kurbo2");
         var scale_xy = 35, parm1 = -4, parm2 = 0.8;
-        objet.setAttribute ("d", path_data(xx, yy, t0, t1, 1000, scale_xy));
+        objet.setAttribute ("d", path_data(xx, yy, t0, t1, 1000, scale_xy,parm1,parm2));
 
         
         // Elementoj de konstruo
 
-        function konstruelementoj(numero, theta1, theta2) {
+        function konstruelementoj(numero, theta1, theta2,scale_xy,parm1,parm2) {
           //  Ĉefa cirklo
           var objet = svgdoc.getElementById("konstrucirklo_"+numero+"a");
           objet.setAttribute ("r", Math.abs(parm1)*scale_xy);
@@ -81,13 +81,18 @@
           objet.setAttribute ("r", scale_xy);
           objet.setAttribute ("cx", scale_xy*xr);
           objet.setAttribute ("cy", scale_xy*yr);
+          objet.setAttribute ("stroke-dashoffset", (33*theta1 % 100) +'%')
+
           var objet = svgdoc.getElementById("konstrucirklo_"+numero+"c");
           objet.setAttribute ("r", scale_xy*parm2);
           objet.setAttribute ("cx", scale_xy*xr);
           objet.setAttribute ("cy", scale_xy*yr);
+          objet.setAttribute ("stroke-dashoffset", (33*theta1 % 100) +'%')
+
           var objet = svgdoc.getElementById("centro_konstrucirklo_"+numero+"b");
           objet.setAttribute ("cx", scale_xy*xr);
           objet.setAttribute ("cy", scale_xy*yr);
+          objet.setAttribute ("stroke-dashoffset", (33*theta1 % 100) +'%')
 
           //  Streko liganta la centrojn
           var objet = svgdoc.getElementById("intercentra_streko_"+numero+"");
@@ -98,22 +103,43 @@
           var objet = svgdoc.getElementById("naskantoradiuso_"+numero+"");
           objet.setAttribute ("x1", scale_xy*xr);
           objet.setAttribute ("y1", scale_xy*yr);
-          objet.setAttribute ("x2", scale_xy*xx(theta2));
-          objet.setAttribute ("y2", scale_xy*yy(theta2));
+          objet.setAttribute ("x2", scale_xy*xx(theta2,parm1,parm2));
+          objet.setAttribute ("y2", scale_xy*yy(theta2,parm1,parm2));
           
           //  Naskanta punkto
           var objet = svgdoc.getElementById("naskanto_"+numero+"");
-          objet.setAttribute ("cx", scale_xy*xx(theta2));
-          objet.setAttribute ("cy", scale_xy*yy(theta2));
+          objet.setAttribute ("cx", scale_xy*xx(theta2,parm1,parm2));
+          objet.setAttribute ("cy", scale_xy*yy(theta2,parm1,parm2));
         }
+        g_k = konstruelementoj;
+
         
-        var scale_xy = 35, parm1 = -5, parm2 = 1.5 ;
-        konstruelementoj("1", -Math.PI/4, -Math.PI/4);
-        
-        var scale_xy = 35, parm1 = -4, parm2 = 0.8;
-        konstruelementoj("2", -5*Math.PI/6, -5*Math.PI/6);
+//        var scale_xy = 35, parm1 = -5, parm2 = 1.5 ;
+//        konstruelementoj("1", -Math.PI/4, -Math.PI/4,scale_xy,parm1,parm2);
+//        
+//        var scale_xy = 35, parm1 = -4, parm2 = 0.8;
+//        konstruelementoj("2", -5*Math.PI/6, -5*Math.PI/6,scale_xy,parm1,parm2);
   
+        loop();
+      }
+
+      
+      function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
       }
+      g_theta=-Math.PI/4;
+
+      function loop () {
+        if (g_theta < 24*Math.PI/4) {
+          g_k("1",3*g_theta,3*g_theta,scale_xy = 35, parm1 = -5, parm2 = 1.5);
+          g_k("2",3*g_theta,3*g_theta,scale_xy = 35, parm1 = -4, parm2 = 0.8);
+          g_theta += 0.001
+          sleep(500).then(requestAnimationFrame(loop));
+        } else {
+          g_k("1",3*g_theta,3*g_theta,scale_xy = 35, parm1 = -5, parm2 = 1.5);
+          g_k("2",3*g_theta,3*g_theta,scale_xy = 35, parm1 = -4, parm2 = 0.8);
+        }
+      }           
     ]]></script>
   </defs>