Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #36067 > unrolled thread
| Started by | Jonas Thörnvall <jonas.thornvall@gmail.com> |
|---|---|
| First post | 2019-02-27 12:10 -0800 |
| Last post | 2019-03-12 17:58 -0700 |
| Articles | 8 — 1 participant |
Back to article view | Back to comp.lang.javascript
Moving pianoscrollbar get wavy Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-02-27 12:10 -0800
Re: Moving pianoscrollbar get wavy Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-02-27 13:35 -0800
Re: Moving pianoscrollbar get wavy Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-02-27 13:55 -0800
Re: Moving pianoscrollbar get wavy Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-02-27 22:00 -0800
Re: Moving pianoscrollbar get wavy Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-02-27 23:20 -0800
Re: Moving pianoscrollbar get wavy Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-02-28 04:31 -0800
Re: Moving pianoscrollbar get wavy Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-02-28 05:29 -0800
Re: Moving pianoscrollbar get wavy Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-03-12 17:58 -0700
| From | Jonas Thörnvall <jonas.thornvall@gmail.com> |
|---|---|
| Date | 2019-02-27 12:10 -0800 |
| Subject | Moving pianoscrollbar get wavy |
| Message-ID | <7274cd03-fd2c-4c8c-ab26-a0a16155ad00@googlegroups.com> |
I started to try get a moving pianoscrollbar working "push record" but i seem to have the wrong values caculated after keyreleased.
The actual calculating function "scrollbar" is another function but this is one i called from that to draw out scrolling pianokeys. All calculations are done from totalmove "that for some reason i pass global". This just a test for one key "i do not read keypresses into array and check for what key is released". So it is just a single stroke attempt to get the logic for a moving bar working. I probably should written the logic on paper because it is slipping here and there. But once this logic work i will save keystrokes to array. So this is live to canvas, for editing i create another function. All the calculations are dependent on the "totalmove" which is the moving scrollbar.
http://anybase.co.nf
var xKeylength=0;
var xFrontStart=0;
var xBackEnd=0;
function pianoSCROLL(){
var keyreleased=false;
if(mess.data[0]==NOTE_ON){
ctm.fillStyle = "red";
ctm.fillRect(xBackEnd,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), xFrontStart, keyHeight);
if(FRONT==0) {FRONT=totalmove;}
xBackEnd=keylength;
xFrontStart=totalmove-FRONT+keylength;
} else if(mess.data[0]==NOTE_OFF){
console.log("keyreleased!");
keyreleased=true;
xBarLength=xFrontStart-xBackEnd;
ctm.fillStyle = "black";
ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), 600, keyHeight+2);
}
if (keyreleased) {
console.log("timebar moving");
xFrontStart=totalmove-FRONT+keylength;
xBackEnd=xFrontStart-xBarLength;
ctm.fillStyle = "black";
ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), Mwidth, keyHeight+2);
ctm.fillStyle = "red";
ctm.fillRect(xFrontStart,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)),xBackEnd, keyHeight);
}
}
[toc] | [next] | [standalone]
| From | Jonas Thörnvall <jonas.thornvall@gmail.com> |
|---|---|
| Date | 2019-02-27 13:35 -0800 |
| Message-ID | <15669fef-9029-4690-b99a-30ea76f85c54@googlegroups.com> |
| In reply to | #36067 |
Den onsdag 27 februari 2019 kl. 21:11:09 UTC+1 skrev Jonas Thörnvall:
> I started to try get a moving pianoscrollbar working "push record" but i seem to have the wrong values caculated after keyreleased.
>
> The actual calculating function "scrollbar" is another function but this is one i called from that to draw out scrolling pianokeys. All calculations are done from totalmove "that for some reason i pass global". This just a test for one key "i do not read keypresses into array and check for what key is released". So it is just a single stroke attempt to get the logic for a moving bar working. I probably should written the logic on paper because it is slipping here and there. But once this logic work i will save keystrokes to array. So this is live to canvas, for editing i create another function. All the calculations are dependent on the "totalmove" which is the moving scrollbar.
>
> http://anybase.co.nf
>
> var xKeylength=0;
> var xFrontStart=0;
> var xBackEnd=0;
>
> function pianoSCROLL(){
> var keyreleased=false;
> if(mess.data[0]==NOTE_ON){
> ctm.fillStyle = "red";
> ctm.fillRect(xBackEnd,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), xFrontStart, keyHeight);
> if(FRONT==0) {FRONT=totalmove;}
> xBackEnd=keylength;
> xFrontStart=totalmove-FRONT+keylength;
>
> } else if(mess.data[0]==NOTE_OFF){
> console.log("keyreleased!");
> keyreleased=true;
> xBarLength=xFrontStart-xBackEnd;
> ctm.fillStyle = "black";
> ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), 600, keyHeight+2);
> }
> if (keyreleased) {
> console.log("timebar moving");
> xFrontStart=totalmove-FRONT+keylength;
> xBackEnd=xFrontStart-xBarLength;
> ctm.fillStyle = "black";
> ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), Mwidth, keyHeight+2);
> ctm.fillStyle = "red";
> ctm.fillRect(xFrontStart,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)),xBackEnd, keyHeight);
> }
> }
Anyone got any ideas about what values go wrong, and why?
[toc] | [prev] | [next] | [standalone]
| From | Jonas Thörnvall <jonas.thornvall@gmail.com> |
|---|---|
| Date | 2019-02-27 13:55 -0800 |
| Message-ID | <5b56daa7-9a77-48a9-9d96-3bcf4e00a8f4@googlegroups.com> |
| In reply to | #36068 |
Den onsdag 27 februari 2019 kl. 22:36:04 UTC+1 skrev Jonas Thörnvall:
> Den onsdag 27 februari 2019 kl. 21:11:09 UTC+1 skrev Jonas Thörnvall:
> > I started to try get a moving pianoscrollbar working "push record" but i seem to have the wrong values caculated after keyreleased.
> >
> > The actual calculating function "scrollbar" is another function but this is one i called from that to draw out scrolling pianokeys. All calculations are done from totalmove "that for some reason i pass global". This just a test for one key "i do not read keypresses into array and check for what key is released". So it is just a single stroke attempt to get the logic for a moving bar working. I probably should written the logic on paper because it is slipping here and there. But once this logic work i will save keystrokes to array. So this is live to canvas, for editing i create another function. All the calculations are dependent on the "totalmove" which is the moving scrollbar.
> >
> > http://anybase.co.nf
> >
> > var xKeylength=0;
> > var xFrontStart=0;
> > var xBackEnd=0;
> >
> > function pianoSCROLL(){
> > var keyreleased=false;
> > if(mess.data[0]==NOTE_ON){
> > ctm.fillStyle = "red";
> > ctm.fillRect(xBackEnd,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), xFrontStart, keyHeight);
> > if(FRONT==0) {FRONT=totalmove;}
> > xBackEnd=keylength;
> > xFrontStart=totalmove-FRONT+keylength;
> >
> > } else if(mess.data[0]==NOTE_OFF){
> > console.log("keyreleased!");
> > keyreleased=true;
> > xBarLength=xFrontStart-xBackEnd;
> > ctm.fillStyle = "black";
> > ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), 600, keyHeight+2);
> > }
> > if (keyreleased) {
> > console.log("timebar moving");
> > xFrontStart=totalmove-FRONT+keylength;
> > xBackEnd=xFrontStart-xBarLength;
> > ctm.fillStyle = "black";
> > ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), Mwidth, keyHeight+2);
> > ctm.fillStyle = "red";
> > ctm.fillRect(xFrontStart,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)),xBackEnd, keyHeight);
> > }
> > }
>
> Anyone got any ideas about what values go wrong, and why?
I just saw i reversed the Start and End, but that is not the main problem the front cursor still raise "to fast" and speed by the scrollbar. I start to think it doing double laps because the code just copied from the upper adding.
Maybe it goes into NOTE ON to?
[toc] | [prev] | [next] | [standalone]
| From | Jonas Thörnvall <jonas.thornvall@gmail.com> |
|---|---|
| Date | 2019-02-27 22:00 -0800 |
| Message-ID | <a6847856-550e-41d0-92d3-232898382eb6@googlegroups.com> |
| In reply to | #36067 |
Den onsdag 27 februari 2019 kl. 21:11:09 UTC+1 skrev Jonas Thörnvall:
> I started to try get a moving pianoscrollbar working "push record" but i seem to have the wrong values caculated after keyreleased.
>
> The actual calculating function "scrollbar" is another function but this is one i called from that to draw out scrolling pianokeys. All calculations are done from totalmove "that for some reason i pass global". This just a test for one key "i do not read keypresses into array and check for what key is released". So it is just a single stroke attempt to get the logic for a moving bar working. I probably should written the logic on paper because it is slipping here and there. But once this logic work i will save keystrokes to array. So this is live to canvas, for editing i create another function. All the calculations are dependent on the "totalmove" which is the moving scrollbar.
>
> http://anybase.co.nf
>
> var xKeylength=0;
> var xFrontStart=0;
> var xBackEnd=0;
>
> function pianoSCROLL(){
> var keyreleased=false;
> if(mess.data[0]==NOTE_ON){
> ctm.fillStyle = "red";
> ctm.fillRect(xBackEnd,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), xFrontStart, keyHeight);
> if(FRONT==0) {FRONT=totalmove;}
> xBackEnd=keylength;
> xFrontStart=totalmove-FRONT+keylength;
>
> } else if(mess.data[0]==NOTE_OFF){
> console.log("keyreleased!");
> keyreleased=true;
> xBarLength=xFrontStart-xBackEnd;
> ctm.fillStyle = "black";
> ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), 600, keyHeight+2);
> }
> if (keyreleased) {
> console.log("timebar moving");
> xFrontStart=totalmove-FRONT+keylength;
> xBackEnd=xFrontStart-xBarLength;
> ctm.fillStyle = "black";
> ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), Mwidth, keyHeight+2);
> ctm.fillStyle = "red";
> ctm.fillRect(xFrontStart,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)),xBackEnd, keyHeight);
> }
> }
I guess what i do not get is.
How could the **moving barlength** not be "constant" given that xBarLength is FIXED LENGTH?
xFrontStart=totalmove-FRONTOFFSET+keylength;
xBackEnd=xFrontStart-xBarLength;
ctm.fillRect(xFrontStart,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)),xBackEnd, keyHeight);
Given above how can the frontstart vary the backend it seem unlogical?
Totalmove is just the updated progression *xposition* between each render call in "FPS" using timer, dependent upon the scope "number of bars" shown on canvas.
[toc] | [prev] | [next] | [standalone]
| From | Jonas Thörnvall <jonas.thornvall@gmail.com> |
|---|---|
| Date | 2019-02-27 23:20 -0800 |
| Message-ID | <c02bd7ab-b5a4-45fa-977d-edbde6133427@googlegroups.com> |
| In reply to | #36070 |
Den torsdag 28 februari 2019 kl. 07:00:26 UTC+1 skrev Jonas Thörnvall:
> Den onsdag 27 februari 2019 kl. 21:11:09 UTC+1 skrev Jonas Thörnvall:
> > I started to try get a moving pianoscrollbar working "push record" but i seem to have the wrong values caculated after keyreleased.
> >
> > The actual calculating function "scrollbar" is another function but this is one i called from that to draw out scrolling pianokeys. All calculations are done from totalmove "that for some reason i pass global". This just a test for one key "i do not read keypresses into array and check for what key is released". So it is just a single stroke attempt to get the logic for a moving bar working. I probably should written the logic on paper because it is slipping here and there. But once this logic work i will save keystrokes to array. So this is live to canvas, for editing i create another function. All the calculations are dependent on the "totalmove" which is the moving scrollbar.
> >
> > http://anybase.co.nf
> >
> > var xKeylength=0;
> > var xFrontStart=0;
> > var xBackEnd=0;
> >
> > function pianoSCROLL(){
> > var keyreleased=false;
> > if(mess.data[0]==NOTE_ON){
> > ctm.fillStyle = "red";
> > ctm.fillRect(xBackEnd,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), xFrontStart, keyHeight);
> > if(FRONT==0) {FRONT=totalmove;}
> > xBackEnd=keylength;
> > xFrontStart=totalmove-FRONT+keylength;
> >
> > } else if(mess.data[0]==NOTE_OFF){
> > console.log("keyreleased!");
> > keyreleased=true;
> > xBarLength=xFrontStart-xBackEnd;
> > ctm.fillStyle = "black";
> > ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), 600, keyHeight+2);
> > }
> > if (keyreleased) {
> > console.log("timebar moving");
> > xFrontStart=totalmove-FRONT+keylength;
> > xBackEnd=xFrontStart-xBarLength;
> > ctm.fillStyle = "black";
> > ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), Mwidth, keyHeight+2);
> > ctm.fillStyle = "red";
> > ctm.fillRect(xFrontStart,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)),xBackEnd, keyHeight);
> > }
> > }
>
> I guess what i do not get is.
> How could the **moving barlength** not be "constant" given that xBarLength is FIXED LENGTH?
>
> xFrontStart=totalmove-FRONTOFFSET+keylength;
> xBackEnd=xFrontStart-xBarLength;
>
> ctm.fillRect(xFrontStart,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)),xBackEnd, keyHeight);
>
> Given above how can the frontstart vary the backend it seem unlogical?
> Totalmove is just the updated progression *xposition* between each render call in "FPS" using timer, dependent upon the scope "number of bars" shown on canvas.
Renamed totalmove to scrollBarPos seemed more logical
[toc] | [prev] | [next] | [standalone]
| From | Jonas Thörnvall <jonas.thornvall@gmail.com> |
|---|---|
| Date | 2019-02-28 04:31 -0800 |
| Message-ID | <bf10e25d-74c7-4469-b671-0229a65101e5@googlegroups.com> |
| In reply to | #36067 |
Den onsdag 27 februari 2019 kl. 21:11:09 UTC+1 skrev Jonas Thörnvall:
> I started to try get a moving pianoscrollbar working "push record" but i seem to have the wrong values caculated after keyreleased.
>
> The actual calculating function "scrollbar" is another function but this is one i called from that to draw out scrolling pianokeys. All calculations are done from totalmove "that for some reason i pass global". This just a test for one key "i do not read keypresses into array and check for what key is released". So it is just a single stroke attempt to get the logic for a moving bar working. I probably should written the logic on paper because it is slipping here and there. But once this logic work i will save keystrokes to array. So this is live to canvas, for editing i create another function. All the calculations are dependent on the "totalmove" which is the moving scrollbar.
>
> http://anybase.co.nf
>
> var xKeylength=0;
> var xFrontStart=0;
> var xBackEnd=0;
>
> function pianoSCROLL(){
> var keyreleased=false;
> if(mess.data[0]==NOTE_ON){
> ctm.fillStyle = "red";
> ctm.fillRect(xBackEnd,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), xFrontStart, keyHeight);
> if(FRONT==0) {FRONT=totalmove;}
> xBackEnd=keylength;
> xFrontStart=totalmove-FRONT+keylength;
>
> } else if(mess.data[0]==NOTE_OFF){
> console.log("keyreleased!");
> keyreleased=true;
> xBarLength=xFrontStart-xBackEnd;
> ctm.fillStyle = "black";
> ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), 600, keyHeight+2);
> }
> if (keyreleased) {
> console.log("timebar moving");
> xFrontStart=totalmove-FRONT+keylength;
> xBackEnd=xFrontStart-xBarLength;
> ctm.fillStyle = "black";
> ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), Mwidth, keyHeight+2);
> ctm.fillStyle = "red";
> ctm.fillRect(xFrontStart,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)),xBackEnd, keyHeight);
> }
> }
Someone hinted the website may not be working, try this
https://midisequenser.000webhostapp.com
[toc] | [prev] | [next] | [standalone]
| From | Jonas Thörnvall <jonas.thornvall@gmail.com> |
|---|---|
| Date | 2019-02-28 05:29 -0800 |
| Message-ID | <fa6b9c44-630d-4c56-8405-3749724fadd0@googlegroups.com> |
| In reply to | #36074 |
Den torsdag 28 februari 2019 kl. 13:31:18 UTC+1 skrev Jonas Thörnvall:
> Den onsdag 27 februari 2019 kl. 21:11:09 UTC+1 skrev Jonas Thörnvall:
> > I started to try get a moving pianoscrollbar working "push record" but i seem to have the wrong values caculated after keyreleased.
> >
> > The actual calculating function "scrollbar" is another function but this is one i called from that to draw out scrolling pianokeys. All calculations are done from totalmove "that for some reason i pass global". This just a test for one key "i do not read keypresses into array and check for what key is released". So it is just a single stroke attempt to get the logic for a moving bar working. I probably should written the logic on paper because it is slipping here and there. But once this logic work i will save keystrokes to array. So this is live to canvas, for editing i create another function. All the calculations are dependent on the "totalmove" which is the moving scrollbar.
> >
> > http://anybase.co.nf
> >
> > var xKeylength=0;
> > var xFrontStart=0;
> > var xBackEnd=0;
> >
> > function pianoSCROLL(){
> > var keyreleased=false;
> > if(mess.data[0]==NOTE_ON){
> > ctm.fillStyle = "red";
> > ctm.fillRect(xBackEnd,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), xFrontStart, keyHeight);
> > if(FRONT==0) {FRONT=totalmove;}
> > xBackEnd=keylength;
> > xFrontStart=totalmove-FRONT+keylength;
> >
> > } else if(mess.data[0]==NOTE_OFF){
> > console.log("keyreleased!");
> > keyreleased=true;
> > xBarLength=xFrontStart-xBackEnd;
> > ctm.fillStyle = "black";
> > ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), 600, keyHeight+2);
> > }
> > if (keyreleased) {
> > console.log("timebar moving");
> > xFrontStart=totalmove-FRONT+keylength;
> > xBackEnd=xFrontStart-xBarLength;
> > ctm.fillStyle = "black";
> > ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), Mwidth, keyHeight+2);
> > ctm.fillStyle = "red";
> > ctm.fillRect(xFrontStart,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)),xBackEnd, keyHeight);
> > }
> > }
>
> Someone hinted the website may not be working, try this
>
> https://midisequenser.000webhostapp.com
I maybe should said that totalmove/scrollBarPos is just a X value ranging from start of canvas "plus animated keys" to end of canvas.
It is calculated from timer using BPM, number of bars(range)and FPS.
So it just a scroll value ranging from 0 to maxwidth again and again following the timer and settings. So the keypresses in pianoroll is positioned relative the scrollBarPos, Time zero is to the left and past to the right.
[toc] | [prev] | [next] | [standalone]
| From | Jonas Thörnvall <jonas.thornvall@gmail.com> |
|---|---|
| Date | 2019-03-12 17:58 -0700 |
| Message-ID | <32e96739-462d-4eb8-8334-eedb8047a1bb@googlegroups.com> |
| In reply to | #36075 |
Den torsdag 28 februari 2019 kl. 14:29:11 UTC+1 skrev Jonas Thörnvall:
> Den torsdag 28 februari 2019 kl. 13:31:18 UTC+1 skrev Jonas Thörnvall:
> > Den onsdag 27 februari 2019 kl. 21:11:09 UTC+1 skrev Jonas Thörnvall:
> > > I started to try get a moving pianoscrollbar working "push record" but i seem to have the wrong values caculated after keyreleased.
> > >
> > > The actual calculating function "scrollbar" is another function but this is one i called from that to draw out scrolling pianokeys. All calculations are done from totalmove "that for some reason i pass global". This just a test for one key "i do not read keypresses into array and check for what key is released". So it is just a single stroke attempt to get the logic for a moving bar working. I probably should written the logic on paper because it is slipping here and there. But once this logic work i will save keystrokes to array. So this is live to canvas, for editing i create another function. All the calculations are dependent on the "totalmove" which is the moving scrollbar.
> > >
> > > http://anybase.co.nf
> > >
> > > var xKeylength=0;
> > > var xFrontStart=0;
> > > var xBackEnd=0;
> > >
> > > function pianoSCROLL(){
> > > var keyreleased=false;
> > > if(mess.data[0]==NOTE_ON){
> > > ctm.fillStyle = "red";
> > > ctm.fillRect(xBackEnd,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), xFrontStart, keyHeight);
> > > if(FRONT==0) {FRONT=totalmove;}
> > > xBackEnd=keylength;
> > > xFrontStart=totalmove-FRONT+keylength;
> > >
> > > } else if(mess.data[0]==NOTE_OFF){
> > > console.log("keyreleased!");
> > > keyreleased=true;
> > > xBarLength=xFrontStart-xBackEnd;
> > > ctm.fillStyle = "black";
> > > ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), 600, keyHeight+2);
> > > }
> > > if (keyreleased) {
> > > console.log("timebar moving");
> > > xFrontStart=totalmove-FRONT+keylength;
> > > xBackEnd=xFrontStart-xBarLength;
> > > ctm.fillStyle = "black";
> > > ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), Mwidth, keyHeight+2);
> > > ctm.fillStyle = "red";
> > > ctm.fillRect(xFrontStart,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)),xBackEnd, keyHeight);
> > > }
> > > }
> >
> > Someone hinted the website may not be working, try this
> >
> > https://midisequenser.000webhostapp.com
>
> I maybe should said that totalmove/scrollBarPos is just a X value ranging from start of canvas "plus animated keys" to end of canvas.
>
> It is calculated from timer using BPM, number of bars(range)and FPS.
> So it just a scroll value ranging from 0 to maxwidth again and again following the timer and settings. So the keypresses in pianoroll is positioned relative the scrollBarPos, Time zero is to the left and past to the right.
Using the metronome.
https://midisequenser.000webhostapp.com
I've tried to understand how following code can lead to that after the keyreleased the front of the keyed scrollbar raise/extend faster while the backend stay correct "in sync". One could think xFrontStart=scrollBarPos-FRONTOFFSET; done more then once, but how could it, the keyrelease is true only in that part of code???
var FRONTOFFSET=0;
var xKeylength=0;
var xFrontStart=0;
var xBackEnd=0;
var keyreleased=false;
function pianoSCROLL(){
if(mess.data[0]==NOTE_ON && keyreleased==false){
xBackEnd=keylength;
ctm.fillStyle = "magenta";
ctm.fillRect(xBackEnd,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), xFrontStart, keyHeight);
if(FRONTOFFSET==0) {FRONTOFFSET=scrollBarPos;}
xFrontStart=scrollBarPos-FRONTOFFSET;
} else if(mess.data[0]==NOTE_OFF && keyreleased==false){
console.log("keyreleased!");
keyreleased=true;
xBarLength=Math.round(xFrontStart-xBackEnd);
ctm.fillStyle = "black";
ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), Mwidth, keyHeight+2);
}
if (keyreleased) {
//console.log("timebar backend moving");
ctm.fillStyle = "black";
ctm.fillRect(keylength, (PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)), Mwidth, keyHeight+2);
ctm.fillStyle = "orange";
ctm.fillRect(xBackEnd,(PistartX+keyHeight*88)-(keyHeight*(mess.data[1]-8)),xFrontStart, keyHeight);
xFrontStart=scrollBarPos-FRONTOFFSET;
xBackEnd=Math.round(xFrontStart-xBarLength);
console.log("xBackEnd="+xBackEnd+" xBarLength="+xBarLength+" xFrontStart="+xFrontStart);
}
}
[toc] | [prev] | [standalone]
Back to top | Article view | comp.lang.javascript
csiph-web