experchange > javascript

Jonas Thörnvall (11-16-18, 02:45 AM)
I will try to render notes played in realtime using a moving scroll on canvas.
The parameters of canvas is the "shown bars", and that is basicly the widthof canvas divided by the bars you like it to show. There is of course measures of the metronome that decide how fast "many pixels" the bar move.
Keylength is just another graphical element before scrollbar start render.

So i have a metronome coupled with the clock, and now i have to reder usinga setting in FPS, from that i calculate pause between drawings the pause correspond to the note moved some pixels. So the idea is that scrollbar and the metronome clock should sync ***over time***.

So the bars will be the relative measure for where the notes have moved since last draw update. Well that is my theory.
Below the rendertime is time for the scroll to move thru full canvas.
BAR_REND_MULT how many times the scroll moved over canvas. Rstarttime is the realtime clock.

***For some reason it just draw the first cycle?//

I was thinking when the multiple goes up Rstarttime again will be less then1?

This is the pseudo code.
if realtimeclock/time to render 1 canvas*canvas rendered>1 then reset the renderposition "totalmove" and add 1 to render multiple else keep movin scrollbar.

function drawscrollbar(){
ctm.strokeStyle = "red";
ctm.lineWidth=1;
ctm.beginPath();
ctm.moveTo(totalmove,0);
ctm.lineTo(totalmove,Mheight);
ctm.stroke();
drawnlines++;
if (totalmove!=keylength){
ctm.strokeStyle = "black";
ctm.lineWidth=2;
ctm.beginPath();
ctm.moveTo(totalmove-(pixelmove),0);
ctm.lineTo(totalmove-(pixelmove),Mheight);
ctm.stroke();
}
if (Rstarttime/RENDERtime*BAR_REND_MULT>1) { ctm.fillStyle = "black";totalmove=keylength;
BAR_REND_MULT++;} else {totalmove=pixelmove+totalmove;}
}
Jonas Thörnvall (11-16-18, 08:27 AM)
Den fredag 16 november 2018 kl. 01:45:48 UTC+1 skrev Jonas Thörnvall:
[..]
> if (Rstarttime/RENDERtime*BAR_REND_MULT>1) { ctm.fillStyle = "black";totalmove=keylength;
> BAR_REND_MULT++;} else {totalmove=pixelmove+totalmove;}
> }


Well i have to console.log the expression and figure out what goes wrong.
Jonas Thörnvall (11-16-18, 08:30 AM)
Den fredag 16 november 2018 kl. 01:45:48 UTC+1 skrev Jonas Thörnvall:
[..]
> if (Rstarttime/RENDERtime*BAR_REND_MULT>1) { ctm.fillStyle = "black";totalmove=keylength;
> BAR_REND_MULT++;} else {totalmove=pixelmove+totalmove;}
> }


By the way do anyone know how the metronome usually rendered, right now i run it in a separate thread with setInterval

But i start to think i probably should prerender it on a track to save cpu.
Jonas Thörnvall (11-16-18, 11:18 AM)
Den fredag 16 november 2018 kl. 01:45:48 UTC+1 skrev Jonas Thörnvall:
[..]
> if (Rstarttime/RENDERtime*BAR_REND_MULT>1) { ctm.fillStyle = "black";totalmove=keylength;
> BAR_REND_MULT++;} else {totalmove=pixelmove+totalmove;}
> }


Solved but it never drift apart, but it isn't perfect.

function drawscrollbar(){
ctm.strokeStyle = "red";
ctm.lineWidth=1;
ctm.beginPath();
ctm.moveTo(totalmove,0);
ctm.lineTo(totalmove,Mheight);
ctm.stroke();
drawnlines++;
if (totalmove!=keylength){
ctm.strokeStyle = "black";
ctm.lineWidth=2;
ctm.beginPath();
ctm.moveTo(totalmove-(pixelmove),0);
ctm.lineTo(totalmove-(pixelmove),Mheight);
ctm.stroke();
tottime=currentTime+(drawpause*drawnlines);
}
if (currentTime>RENDERtime*BAR_REND_MULT) { drawnlines=0;totalmove=keylength;
BAR_REND_MULT++;} else {console.log(currentTime); totalmove=pixelmove+totalmove;
ctT.fillStyle = "white";ctT.fillRect(7,134,170,16);
ctT.fillStyle = "BLACK";ctT.fillText("Time ms "+ tottime , 15, Theight-10);
}
}
Similar Threads