accept-and-work/auto-accept
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

basic flywheel WIP

Browse source
This commit is contained in:
Ruben van de Ven 2020-12-17 11:57:31 +01:00
parent d920b037fc
commit a75dc35596
1 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
index.html
View file

@ -65,15 +65,19 @@
*/ */
class Flywheel{ class Flywheel{
constructor() { constructor() {
this.falloff = .1; // value at which it reduces per second
this.value = 0.; // start at 0 - gradual meter this.value = 0.; // start at 0 - gradual meter
this.stage = 0.; // start at 0 - the various stages 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_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.interval = window.setInterval(this.step, 50)
this.time = null; this.time = null;
window.requestAnimationFrame(this.step.bind(this)); window.requestAnimationFrame(this.step.bind(this));
// TODO: once/twice per second should be enough! + on release (add())
} }
step(time){ step(time){
@ -84,10 +88,15 @@
return; return;
} }
if(time-this.time < 500){
window.requestAnimationFrame(this.step.bind(this));
return;
}
const dt = time - this.time; const dt = time - this.time;
this.time = 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){ if(this.value < 0){
this.value = 0; this.value = 0;
@ -96,7 +105,7 @@
// TODO: check if this should be different // 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){ if (stage != this.stage){
this.changeStage(stage); this.changeStage(stage);
} }
@ -117,6 +126,8 @@
} }
} }
var flywheel = new Flywheel();
@ -124,7 +135,7 @@
let crosshairXEl = document.getElementById('crosshair_x'); let crosshairXEl = document.getElementById('crosshair_x');
let crosshairYEl = document.getElementById('crosshair_y'); 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) { function getPathShapeBetweenPoints(p1, p2, corners) {
let d = `M ${p1.x},${p1.y} L `; let d = `M ${p1.x},${p1.y} L `;
@ -225,6 +236,7 @@
window.removeEventListener('mouseup', mouseUpEv); // remove itself. window.removeEventListener('mouseup', mouseUpEv); // remove itself.
shapeEl.classList.add('locked'); shapeEl.classList.add('locked');
//TODO: calculate points //TODO: calculate points
flywheel.add();
setTimeout(function(){ setTimeout(function(){
shapeEl.classList.add('hide'); shapeEl.classList.add('hide');