diff --git a/index.html b/index.html index 197ce0c..ceec926 100644 --- a/index.html +++ b/index.html @@ -65,15 +65,19 @@ */ 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.f_falloff = (value) => value/20; // value at which it reduces per second + this.f_stage = (value) => 5*Math.log10(value); // value to stage calculation + this.value_min = 0; - this.value_max = 10.99999; // gives stage 10 + this.value_max = 100; // gives stage 0-9 + // this.interval = window.setInterval(this.step, 50) this.time = null; window.requestAnimationFrame(this.step.bind(this)); + // TODO: once/twice per second should be enough! + on release (add()) } step(time){ @@ -84,10 +88,15 @@ return; } + if(time-this.time < 500){ + window.requestAnimationFrame(this.step.bind(this)); + return; + } + const dt = time - this.time; this.time = time; - this.value -= this.falloff * dt/1000; // linear falloff + this.value -= this.f_falloff(this.value) * dt/1000; // linear falloff if(this.value < 0){ this.value = 0; @@ -96,7 +105,7 @@ // TODO: check if this should be different - const stage = Math.floor(this.value); + const stage = Math.max(0,Math.floor(this.f_stage(this.value))); if (stage != this.stage){ this.changeStage(stage); } @@ -117,6 +126,8 @@ } } + var flywheel = new Flywheel(); + @@ -124,7 +135,7 @@ let crosshairXEl = document.getElementById('crosshair_x'); let crosshairYEl = document.getElementById('crosshair_y'); - const segmentCount = window.location.search.substr(1) ?? 4; + const segmentCount = window.location.search.substr(1).length ? window.location.search.substr(1) : 4; function getPathShapeBetweenPoints(p1, p2, corners) { let d = `M ${p1.x},${p1.y} L `; @@ -225,6 +236,7 @@ window.removeEventListener('mouseup', mouseUpEv); // remove itself. shapeEl.classList.add('locked'); //TODO: calculate points + flywheel.add(); setTimeout(function(){ shapeEl.classList.add('hide');