Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]


Groups > comp.lang.javascript > #36067 > unrolled thread

Moving pianoscrollbar get wavy

Started byJonas Thörnvall <jonas.thornvall@gmail.com>
First post2019-02-27 12:10 -0800
Last post2019-03-12 17:58 -0700
Articles 8 — 1 participant

Back to article view | Back to comp.lang.javascript


Contents

  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

#36067 — Moving pianoscrollbar get wavy

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-02-27 12:10 -0800
SubjectMoving 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]


#36068

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-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]


#36069

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-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]


#36070

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-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]


#36071

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-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]


#36074

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-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]


#36075

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-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]


#36107

FromJonas Thörnvall <jonas.thornvall@gmail.com>
Date2019-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