From d920b037fce8c55df689846df102e5b6df186c39 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Tue, 15 Dec 2020 17:59:05 +0100
Subject: [PATCH] draw polygons and WIP flywheel

---
 index.html | 147 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 129 insertions(+), 18 deletions(-)
diff --git a/index.html b/index.html
index fbb561d..197ce0c 100644
--- a/index.html
+++ b/index.html
@@ -14,20 +14,20 @@
             width:100vw;
             height:100vh;
         }
-        svg rect{
+        svg .rect{
             stroke: red;
             stroke-width: .2cm;
             fill: none;
             transition: stroke .5s;
         }
 
-        svg rect.locked{
+        svg .rect.locked{
             stroke:blue;
             opacity: 1;
             transition: opacity .5s;
         }
 
-        svg rect.hide{
+        svg .rect.hide{
             opacity:0;
         }
 
@@ -43,7 +43,10 @@
             bottom:0;
             right:0;
             z-index: -1;
+            opacity:0;
+            transition:opacity 10s;
         }
+
     </style>
 </head>
 <body>
@@ -57,10 +60,124 @@
         <source src="Blue_Sky_and_Clouds_Timelapse_0892__Videvo.mov">
     </video>
     <script>
+        /*
+        The interface is like a flywheel.
+        */
+        class Flywheel{
+            constructor() {
+                this.falloff = .1; // value at which it reduces per second
+                this.value = 0.; // start at 0 - gradual meter
+                this.stage = 0.; // start at 0 - the various stages
+
+                this.value_min = 0;
+                this.value_max = 10.99999; // gives stage 10
+                // this.interval = window.setInterval(this.step, 50)
+                this.time = null;
+                window.requestAnimationFrame(this.step.bind(this));
+            }
+
+            step(time){
+                if(this.time === null){
+                    // first run
+                    this.time = time;
+                    window.requestAnimationFrame(this.step.bind(this));
+                    return;
+                }
+
+                const dt = time - this.time;
+                this.time = time;
+
+                this.value -= this.falloff * dt/1000; // linear falloff
+
+                if(this.value < 0){
+                    this.value = 0;
+                }
+                // console.log(this.value,this.falloff, dt,this.time);
+
+                // TODO: check if this should be different
+
+                const stage = Math.floor(this.value);
+                if (stage != this.stage){
+                    this.changeStage(stage);
+                }
+
+                window.requestAnimationFrame(this.step.bind(this));
+            }
+
+            add(increment){
+                this.value += typeof increment == 'undefined' ? 1 : increment;
+                // cap:
+                if(this.value > this.value_max) this.value = this.value_max;
+            }
+
+            changeStage(stage){
+                this.stage = stage;
+                console.log('stage now at', this.stage);
+                // TODO: handle stage change
+            }
+        }
+
+        
+
+
         let svgEl = document.getElementById('canvas');
         let crosshairXEl = document.getElementById('crosshair_x');
         let crosshairYEl = document.getElementById('crosshair_y');
 
+        const segmentCount = window.location.search.substr(1) ?? 4;
+
+        function getPathShapeBetweenPoints(p1, p2, corners) {
+            let d = `M ${p1.x},${p1.y} L `;
+            if(corners == 4){
+
+                // draw inbetween p1 & p2.
+                let minx = Math.min(p1.x, p2.x);
+                let miny = Math.min(p1.y, p2.y);
+                let maxx = Math.max(p1.x, p2.x);
+                let maxy = Math.max(p1.y, p2.y);
+                
+                d += ` ${p1.x},${p2.y} ${p2.x},${p2.y}  ${p2.x},${p1.y}  ${p1.x},${p1.y} `;
+            }
+            else{
+                // find center of circle that describes the polygon of which p1 and p2 are part
+                // it's _not_ the center between the two points, as p1 and p2 are corners on the shape
+                
+                // distance between p1 and p2
+                const length = Math.sqrt(Math.pow(p1.x-p2.x,2)+ Math.pow(p1.y - p2.y, 2));
+                
+                const segmentAngle = Math.PI * 2 / corners;
+                // we don't want
+                // const segmentsAngle = Math.floor(180/segmentAngle) * segmentAngle;
+
+                const radius = (length*.5)/Math.sin(segmentAngle);
+
+                const rotation = Math.atan2((p2.y -p1.y),(p2.x - p1.x)) + (Math.PI/2-segmentAngle);
+
+                const dx = Math.cos(rotation) * radius;// * Math.sign(p2.x - p1.x);
+                const dy = Math.sin(rotation) * radius;// * Math.sign(p2.y - p1.y);
+                // we now have the center:
+                const cx = p2.x - dx;
+                const cy = p2.y - dy;
+
+                // startpoint in relation to circle
+                const sx = cx - p1.x;
+                const sy = cy - p1.y;
+
+                let startRot = Math.asin(sx / radius);
+                if(sy>0){startRot = -1 * startRot + Math.PI;}
+                // console.log(sx, radius, startRot);
+                // animI+= .1;
+                // console.log(sx, sy, startRot);
+                for (let a = 0; a < Math.PI*2; a += segmentAngle) {
+                    let x = radius * Math.sin(a-startRot) + cx;
+                    let y = radius * Math.cos(a-startRot) + cy;
+                    d += ` ${x},${y}`;
+                }
+
+            }
+            return d + ' Z';
+        }
+
 
         // canvas position relative to mouse/screen
         // TODO: update on resize:
@@ -84,29 +201,23 @@
         svgEl.addEventListener('mousedown', function(mousedownEv){
             
 
-            let shapeEl = document.createElementNS('http://www.w3.org/2000/svg','rect');
+            let shapeEl = document.createElementNS('http://www.w3.org/2000/svg','path');
             shapeEl.classList.add('rect');
             let p1 = {'x': mousedownEv.clientX - rect.left, 'y': mousedownEv.clientY - rect.top}
-            shapeEl.setAttribute('x', p1.x);
-            shapeEl.setAttribute('y', p1.y);
+            // shapeEl.setAttribute('x', p1.x);
+            // shapeEl.setAttribute('y', p1.y);
 
-            shapeEl.setAttribute('width', 0);
-            shapeEl.setAttribute('height', 0);
+            // shapeEl.setAttribute('width', 0);
+            // shapeEl.setAttribute('height', 0);
 
+            let d = getPathShapeBetweenPoints(p1, p1, segmentCount);
             svgEl.appendChild(shapeEl);
+            shapeEl.setAttribute('d', d);
 
             let mouseMoveEv = function(mousemoveEv) {
                 let p2 = {'x': mousemoveEv.clientX - rect.left, 'y': mousemoveEv.clientY - rect.top}
-                // draw inbetween p1 & p2.
-                let minx = Math.min(p1.x, p2.x);
-                let miny = Math.min(p1.y, p2.y);
-                let maxx = Math.max(p1.x, p2.x);
-                let maxy = Math.max(p1.y, p2.y);
-                
-                shapeEl.setAttribute('x', minx);
-                shapeEl.setAttribute('y', miny);
-                shapeEl.setAttribute('width', maxx - minx);
-                shapeEl.setAttribute('height', maxy - miny);
+                let d = getPathShapeBetweenPoints(p1, p2, segmentCount);
+                shapeEl.setAttribute('d', d);
             };
             let mouseUpEv = function() {
                 console.log('up');
