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

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

Canvas render to memory?

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

Contents

  Canvas render to memory? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-09-16 13:27 -0700
    Re: Canvas render to memory? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-09-16 13:30 -0700
      Re: Canvas render to memory? Julio Di Egidio <julio@diegidio.name> - 2019-09-16 14:35 -0700
        Re: Canvas render to memory? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-09-16 23:32 -0700
          Re: Canvas render to memory? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-09-16 23:35 -0700
          Re: Canvas render to memory? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-09-17 00:35 -0700
        Re: Canvas render to memory? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-09-17 01:50 -0700
          Re: Canvas render to memory? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-09-17 05:45 -0700
            Re: Canvas render to memory? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-09-17 05:59 -0700
              Re: Canvas render to memory? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-09-17 06:12 -0700
    Re: Canvas render to memory? Arno Welzel <usenet@arnowelzel.de> - 2019-09-16 23:23 +0200

#37276 — Canvas render to memory?

If you want a fast update of the whole canvas can you somehow prerender it to memory, or must you save it as some picture format.

Lets say you have for example sheetnotes, could you somehow prerender all sheet pages and load them, as the piece is played?

Well sheet notes is just an example, i really intend to use it for recorded note rods on<-->off layed out over x number of bars on canvas.

But i think calculate "the sheets" "note rods" while playing the midi, may just be a little to much. But maybe even redraw a full sheet on canvas while playing present a lag.

[toc] | [next] | [standalone]

#37277

Den måndag 16 september 2019 kl. 22:27:52 UTC+2 skrev Jonas Thörnvall:
> If you want a fast update of the whole canvas can you somehow prerender it to memory, or must you save it as some picture format.
> 
> Lets say you have for example sheetnotes, could you somehow prerender all sheet pages and load them, as the piece is played?
> 
> Well sheet notes is just an example, i really intend to use it for recorded note rods on<-->off layed out over x number of bars on canvas.
> 
> But i think calculate "the sheets" "note rods" while playing the midi, may just be a little to much. But maybe even redraw a full sheet on canvas while playing present a lag.

Well one could think of it like a slideshow, swapping every x bars.

[toc] | [prev] | [next] | [standalone]

#37279

On Monday, 16 September 2019 22:30:36 UTC+2, Jonas Thörnvall  wrote:

> Well one could think of it like a slideshow, swapping every x bars.

Indeed, for a simple image slideshow you can use one img and just change
the src attribute from JS.

BTW, canvas is another thing that is certainly not needed in your project...

HTH,

Julio

[toc] | [prev] | [next] | [standalone]

#37282

Den måndag 16 september 2019 kl. 23:35:33 UTC+2 skrev Julio Di Egidio:
> On Monday, 16 September 2019 22:30:36 UTC+2, Jonas Thörnvall  wrote:
> 
> > Well one could think of it like a slideshow, swapping every x bars.
> 
> Indeed, for a simple image slideshow you can use one img and just change
> the src attribute from JS.
> 
> BTW, canvas is another thing that is certainly not needed in your project...
> 
> HTH,
> 
> Julio

Well i am about to implement the visual editor, that would be hard without canvas? 

Well i do not know enough "anything" about CSS and SVG to implement the visual editor using them i do know howto implement clickable square dnd rectangle like objects using canvas and how to check if they are clicked. But you probably right, there is maybe better/simpler? ways to implement some sort of graphical interface. But i just do not know about them.

And one reason for the canvas was originally that it should scroll "beautiful lol" and show keystrokes while recording/playing. Actually i have it implemented but a few quirks make me hesitant. And probably you do not want concurrent threads running when you record drawing probably introduce latency during either recording or play up of recording.

But as a feature showing some "nice graphics" while playing and listening i think it will be great. And maybe later some more showoff graphics. 

But as i said i have a problem with the realtime note rendering that i just do not manage to wrap my head around. The backend and frontend of notes "length" does not keep sync "i am pretty sure i programmed the bars to keep length after key released "Note off" but...... Yeah that looks weird, i will have a look at it after the visual editor is done.

https://midisequenser.000webhostapp.com/

[toc] | [prev] | [next] | [standalone]

#37283

Den tisdag 17 september 2019 kl. 08:32:38 UTC+2 skrev Jonas Thörnvall:
> Den måndag 16 september 2019 kl. 23:35:33 UTC+2 skrev Julio Di Egidio:
> > On Monday, 16 September 2019 22:30:36 UTC+2, Jonas Thörnvall  wrote:
> > 
> > > Well one could think of it like a slideshow, swapping every x bars.
> > 
> > Indeed, for a simple image slideshow you can use one img and just change
> > the src attribute from JS.
> > 
> > BTW, canvas is another thing that is certainly not needed in your project...
> > 
> > HTH,
> > 
> > Julio
> 
> Well i am about to implement the visual editor, that would be hard without canvas? 
> 
> Well i do not know enough "anything" about CSS and SVG to implement the visual editor using them i do know howto implement clickable square dnd rectangle like objects using canvas and how to check if they are clicked. But you probably right, there is maybe better/simpler? ways to implement some sort of graphical interface. But i just do not know about them.
> 
> And one reason for the canvas was originally that it should scroll "beautiful lol" and show keystrokes while recording/playing. Actually i have it implemented but a few quirks make me hesitant. And probably you do not want concurrent threads running when you record drawing probably introduce latency during either recording or play up of recording.
> 
> But as a feature showing some "nice graphics" while playing and listening i think it will be great. And maybe later some more showoff graphics. 
> 
> But as i said i have a problem with the realtime note rendering that i just do not manage to wrap my head around. The backend and frontend of notes "length" does not keep sync "i am pretty sure i programmed the bars to keep length after key released "Note off" but...... Yeah that looks weird, i will have a look at it after the visual editor is done.
> 
> https://midisequenser.000webhostapp.com/

The actual layout of the editor is already there, it is just to fix the bugs and implement the graphical interface.

[toc] | [prev] | [next] | [standalone]

#37284

Den tisdag 17 september 2019 kl. 08:32:38 UTC+2 skrev Jonas Thörnvall:
> Den måndag 16 september 2019 kl. 23:35:33 UTC+2 skrev Julio Di Egidio:
> > On Monday, 16 September 2019 22:30:36 UTC+2, Jonas Thörnvall  wrote:
> > 
> > > Well one could think of it like a slideshow, swapping every x bars.
> > 
> > Indeed, for a simple image slideshow you can use one img and just change
> > the src attribute from JS.
> > 
> > BTW, canvas is another thing that is certainly not needed in your project...
> > 
> > HTH,
> > 
> > Julio
> 
> Well i am about to implement the visual editor, that would be hard without canvas? 
> 
> Well i do not know enough "anything" about CSS and SVG to implement the visual editor using them i do know howto implement clickable square dnd rectangle like objects using canvas and how to check if they are clicked. But you probably right, there is maybe better/simpler? ways to implement some sort of graphical interface. But i just do not know about them.
> 
> And one reason for the canvas was originally that it should scroll "beautiful lol" and show keystrokes while recording/playing. Actually i have it implemented but a few quirks make me hesitant. And probably you do not want concurrent threads running when you record drawing probably introduce latency during either recording or play up of recording.
> 
> But as a feature showing some "nice graphics" while playing and listening i think it will be great. And maybe later some more showoff graphics. 
> 
> But as i said i have a problem with the realtime note rendering that i just do not manage to wrap my head around. The backend and frontend of notes "length" does not keep sync "i am pretty sure i programmed the bars to keep length after key released "Note off" but...... Yeah that looks weird, i will have a look at it after the visual editor is done.
> 
> https://midisequenser.000webhostapp.com/

Here is the code was some months "a year" since i wrote it so i am not sure i buffer the notes, if same stroked repeatedly...

As you see the last else clause i have checked out because well it do not behave correct, i have to look at it again.

If some genious here can find out what goes wrong, feel free to inform me.

var midiEv=0;
var xFrontStart=[];
var FRONTOFFSET=[];
var barLength=[];
var keyreleased=[]; 
backStuck=50;
for (var p=0;p<3000;p++) {xFrontStart[p]=0;FRONTOFFSET[p]=0;keyreleased[p]=false;}

function pianoSCROLL(){
nbrOfEv = track[rectrack].midiMess.length;
 while (nbrOfEv>0){
	 midiEv=nbrOfEv-1;
    //When keypressed
    if(track[rectrack].midiMess[midiEv].data0==NOTE_ON && keyreleased[midiEv]==false){
      console.log("Pressed Key");
        ctm.fillStyle = "magenta";
        ctm.fillRect(backStuck,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), xFrontStart[midiEv],keyHeight-2);
        //When ***A NEW*** key pressed a startpoint relative the scrollbar created ***FRONTOFFSET***
        if(FRONTOFFSET[midiEv]==0) {FRONTOFFSET[midiEv]=scrollBarPos;}
        xFrontStart[midiEv]=scrollBarPos-FRONTOFFSET[midiEv];
		
		
	
    //When keyreleased
   } else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==false){
      console.log("keyreleased!");
      for(var q=0;q<midiEv;q++){ 
           if(track[rectrack].midiMess[q].data1==track[rectrack].midiMess[midiEv].data1) { keyreleased[q]=true; barLength[midiEv]=xFrontStart[midiEv]-backStuck; }
      }
    keyreleased[midiEv]=true;
	/*	
    } 
	
     //After keyreleased
    else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==true) {
        console.log("parallell move"); 
	
      ctm.fillStyle = "magenta";
       ctm.fillRect(xFrontStart[midiEv]-barLength[midiEv],(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), xFrontStart[midiEv],keyHeight);
        //When ***A NEW*** key pressed a startpoint relative the scrollbar created ***FRONTOFFSET***
       if(FRONTOFFSET[midiEv]==0) {FRONTOFFSET[midiEv]=scrollBarPos;}
       xFrontStart[midiEv]=scrollBarPos-FRONTOFFSET[midiEv];
	*/	
    } 
	
 nbrOfEv--; 
}
}

[toc] | [prev] | [next] | [standalone]

#37286

Den måndag 16 september 2019 kl. 23:35:33 UTC+2 skrev Julio Di Egidio:
> On Monday, 16 September 2019 22:30:36 UTC+2, Jonas Thörnvall  wrote:
> 
> > Well one could think of it like a slideshow, swapping every x bars.
> 
> Indeed, for a simple image slideshow you can use one img and just change
> the src attribute from JS.
> 
> BTW, canvas is another thing that is certainly not needed in your project...
> 
> HTH,
> 
> Julio

Proof yourself smarter then me and fix, this Julio and i gladly admit you are much much smarter then me ;)

var midiEv=0;
var rightSide=[];
var FRONTOFFSET=[];
var barLength=[];
var keyreleased=[]; 
leftSide=50;
for (var p=0;p<3000;p++) {rightSide[p]=0;FRONTOFFSET[p]=0;keyreleased[p]=false;}

function pianoSCROLL(){
nbrOfEv = track[rectrack].midiMess.length;
 while (nbrOfEv>0){
    midiEv=nbrOfEv-1;
   //When keypressed
   if(track[rectrack].midiMess[midiEv].data0==NOTE_ON && keyreleased[midiEv]==false){
      console.log("Pressed Key");
      ctm.fillStyle = "magenta";
      ctm.fillRect(leftSide,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), rightSide[midiEv],keyHeight-2);
      //When ***A NEW*** key pressed a startpoint relative the scrollbar created ***FRONTOFFSET***
      if(FRONTOFFSET[midiEv]==0) {FRONTOFFSET[midiEv]=scrollBarPos;}
      rightSide[midiEv]=scrollBarPos-FRONTOFFSET[midiEv];
   //When keyreleased
   } else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==false){
      console.log("keyreleased!");
      for(var q=0;q<midiEv;q++){ 
           if(track[rectrack].midiMess[q].data1==track[rectrack].midiMess[midiEv].data1) { 
		    keyreleased[q]=true;
			barLength[midiEv]=rightSide[midiEv]-leftSide; 
		   
		   }
      }
   keyreleased[midiEv]=true;
   } 
	//After keyreleased
    else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==true) {
     console.log("parallell move"); 
	 // if(FRONTOFFSET[midiEv]==0) {FRONTOFFSET[midiEv]=scrollBarPos;}
	 rightSide[midiEv]=scrollBarPos-FRONTOFFSET[midiEv];
	 leftSide=rightSide[midiEv]-barLength[midiEv];
	 ctm.fillStyle = "#000a4d";
	 ctm.fillRect(keylength+1,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), Mwidth,keyHeight);
	 ctm.fillStyle = "white";
	 ctm.fillRect(leftSide,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), rightSide[midiEv],keyHeight-2);
    } 
 nbrOfEv--; 
 }
}

[toc] | [prev] | [next] | [standalone]

#37287

Den tisdag 17 september 2019 kl. 10:50:36 UTC+2 skrev Jonas Thörnvall:
> Den måndag 16 september 2019 kl. 23:35:33 UTC+2 skrev Julio Di Egidio:
> > On Monday, 16 September 2019 22:30:36 UTC+2, Jonas Thörnvall  wrote:
> > 
> > > Well one could think of it like a slideshow, swapping every x bars.
> > 
> > Indeed, for a simple image slideshow you can use one img and just change
> > the src attribute from JS.
> > 
> > BTW, canvas is another thing that is certainly not needed in your project...
> > 
> > HTH,
> > 
> > Julio
> 
> Proof yourself smarter then me and fix, this Julio and i gladly admit you are much much smarter then me ;)
> 
> var midiEv=0;
> var rightSide=[];
> var FRONTOFFSET=[];
> var barLength=[];
> var keyreleased=[]; 
> leftSide=50;
> for (var p=0;p<3000;p++) {rightSide[p]=0;FRONTOFFSET[p]=0;keyreleased[p]=false;}
> 
> function pianoSCROLL(){
> nbrOfEv = track[rectrack].midiMess.length;
>  while (nbrOfEv>0){
>     midiEv=nbrOfEv-1;
>    //When keypressed
>    if(track[rectrack].midiMess[midiEv].data0==NOTE_ON && keyreleased[midiEv]==false){
>       console.log("Pressed Key");
>       ctm.fillStyle = "magenta";
>       ctm.fillRect(leftSide,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), rightSide[midiEv],keyHeight-2);
>       //When ***A NEW*** key pressed a startpoint relative the scrollbar created ***FRONTOFFSET***
>       if(FRONTOFFSET[midiEv]==0) {FRONTOFFSET[midiEv]=scrollBarPos;}
>       rightSide[midiEv]=scrollBarPos-FRONTOFFSET[midiEv];
>    //When keyreleased
>    } else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==false){
>       console.log("keyreleased!");
>       for(var q=0;q<midiEv;q++){ 
>            if(track[rectrack].midiMess[q].data1==track[rectrack].midiMess[midiEv].data1) { 
> 		    keyreleased[q]=true;
> 			barLength[midiEv]=rightSide[midiEv]-leftSide; 
> 		   
> 		   }
>       }
>    keyreleased[midiEv]=true;
>    } 
> 	//After keyreleased
>     else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==true) {
>      console.log("parallell move"); 
> 	 // if(FRONTOFFSET[midiEv]==0) {FRONTOFFSET[midiEv]=scrollBarPos;}
> 	 rightSide[midiEv]=scrollBarPos-FRONTOFFSET[midiEv];
> 	 leftSide=rightSide[midiEv]-barLength[midiEv];
> 	 ctm.fillStyle = "#000a4d";
> 	 ctm.fillRect(keylength+1,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), Mwidth,keyHeight);
> 	 ctm.fillStyle = "white";
> 	 ctm.fillRect(leftSide,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), rightSide[midiEv],keyHeight-2);
>     } 
>  nbrOfEv--; 
>  }
> }

Logical conundrum, can someone give a hint.
How can the length of rectangle vary when the barlelngth is fixed?
It is beyond my understanding.
  else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==true) {
      ctm.fillStyle = "black";
	  ctm.fillRect(keylength+1,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), Mwidth,keyHeight);
	  for(var q=0;q<midiEv;q++){ 
        if(track[rectrack].midiMess[q].data1==track[rectrack].midiMess[midiEv].data1) { 
		  rightSide[q]=scrollBarPos-FRONTOFFSET[q];	
          leftSide=rightSide[q]-barLength[q];
	      ctm.fillStyle = "white";
	      ctm.fillRect(leftSide,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), rightSide[q],keyHeight-2);
    	  console.log("INSIDE FULL BAR MOVING Barlength "+barLength[midiEv]+" =right  "+rightSide[q]+" - left "+leftSide);
	    }
      } 
   } 

[toc] | [prev] | [next] | [standalone]

#37288

Den tisdag 17 september 2019 kl. 14:45:39 UTC+2 skrev Jonas Thörnvall:
> Den tisdag 17 september 2019 kl. 10:50:36 UTC+2 skrev Jonas Thörnvall:
> > Den måndag 16 september 2019 kl. 23:35:33 UTC+2 skrev Julio Di Egidio:
> > > On Monday, 16 September 2019 22:30:36 UTC+2, Jonas Thörnvall  wrote:
> > > 
> > > > Well one could think of it like a slideshow, swapping every x bars.
> > > 
> > > Indeed, for a simple image slideshow you can use one img and just change
> > > the src attribute from JS.
> > > 
> > > BTW, canvas is another thing that is certainly not needed in your project...
> > > 
> > > HTH,
> > > 
> > > Julio
> > 
> > Proof yourself smarter then me and fix, this Julio and i gladly admit you are much much smarter then me ;)
> > 
> > var midiEv=0;
> > var rightSide=[];
> > var FRONTOFFSET=[];
> > var barLength=[];
> > var keyreleased=[]; 
> > leftSide=50;
> > for (var p=0;p<3000;p++) {rightSide[p]=0;FRONTOFFSET[p]=0;keyreleased[p]=false;}
> > 
> > function pianoSCROLL(){
> > nbrOfEv = track[rectrack].midiMess.length;
> >  while (nbrOfEv>0){
> >     midiEv=nbrOfEv-1;
> >    //When keypressed
> >    if(track[rectrack].midiMess[midiEv].data0==NOTE_ON && keyreleased[midiEv]==false){
> >       console.log("Pressed Key");
> >       ctm.fillStyle = "magenta";
> >       ctm.fillRect(leftSide,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), rightSide[midiEv],keyHeight-2);
> >       //When ***A NEW*** key pressed a startpoint relative the scrollbar created ***FRONTOFFSET***
> >       if(FRONTOFFSET[midiEv]==0) {FRONTOFFSET[midiEv]=scrollBarPos;}
> >       rightSide[midiEv]=scrollBarPos-FRONTOFFSET[midiEv];
> >    //When keyreleased
> >    } else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==false){
> >       console.log("keyreleased!");
> >       for(var q=0;q<midiEv;q++){ 
> >            if(track[rectrack].midiMess[q].data1==track[rectrack].midiMess[midiEv].data1) { 
> > 		    keyreleased[q]=true;
> > 			barLength[midiEv]=rightSide[midiEv]-leftSide; 
> > 		   
> > 		   }
> >       }
> >    keyreleased[midiEv]=true;
> >    } 
> > 	//After keyreleased
> >     else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==true) {
> >      console.log("parallell move"); 
> > 	 // if(FRONTOFFSET[midiEv]==0) {FRONTOFFSET[midiEv]=scrollBarPos;}
> > 	 rightSide[midiEv]=scrollBarPos-FRONTOFFSET[midiEv];
> > 	 leftSide=rightSide[midiEv]-barLength[midiEv];
> > 	 ctm.fillStyle = "#000a4d";
> > 	 ctm.fillRect(keylength+1,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), Mwidth,keyHeight);
> > 	 ctm.fillStyle = "white";
> > 	 ctm.fillRect(leftSide,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), rightSide[midiEv],keyHeight-2);
> >     } 
> >  nbrOfEv--; 
> >  }
> > }
> 
> Logical conundrum, can someone give a hint.
> How can the length of rectangle vary when the barlelngth is fixed?
> It is beyond my understanding.
>   else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==true) {
>       ctm.fillStyle = "black";
> 	  ctm.fillRect(keylength+1,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), Mwidth,keyHeight);
> 	  for(var q=0;q<midiEv;q++){ 
>         if(track[rectrack].midiMess[q].data1==track[rectrack].midiMess[midiEv].data1) { 
> 		  rightSide[q]=scrollBarPos-FRONTOFFSET[q];	
>           leftSide=rightSide[q]-barLength[q];
> 	      ctm.fillStyle = "white";
> 	      ctm.fillRect(leftSide,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), rightSide[q],keyHeight-2);
>     	  console.log("INSIDE FULL BAR MOVING Barlength "+barLength[midiEv]+" =right  "+rightSide[q]+" - left "+leftSide);
> 	    }
>       } 
>    }

Barlength is constant i calculate Leftside by take Rightside - Barlength still the fucking bar get longer and longer, how can that be.

NSIDE FULL BAR MOVING  Leftside 696.9841974431785 =Rightside  1047.4982244318135 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 702.1189926609815 =Rightside  1052.6330196496165 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 707.2537878787845 =Rightside  1057.7678148674195 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 712.3885830965875 =Rightside  1062.9026100852225 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 717.5233783143905 =Rightside  1068.0374053030255 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 722.6581735321935 =Rightside  1073.1722005208285 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 727.7929687499965 =Rightside  1078.3069957386315 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 732.9277639677995 =Rightside  1083.4417909564345 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 738.0625591856025 =Rightside  1088.5765861742375 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 743.1973544034055 =Rightside  1093.7113813920405 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 748.3321496212085 =Rightside  1098.8461766098435 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 753.4669448390115 =Rightside  1103.9809718276465 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 758.6017400568145 =Rightside  1109.1157670454495 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 763.7365352746175 =Rightside  1114.2505622632525 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 768.8713304924205 =Rightside  1119.3853574810555 - Barlength 350.514026988635
scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 774.0061257102235 =Rightside

[toc] | [prev] | [next] | [standalone]

#37289

Den tisdag 17 september 2019 kl. 14:59:09 UTC+2 skrev Jonas Thörnvall:
> Den tisdag 17 september 2019 kl. 14:45:39 UTC+2 skrev Jonas Thörnvall:
> > Den tisdag 17 september 2019 kl. 10:50:36 UTC+2 skrev Jonas Thörnvall:
> > > Den måndag 16 september 2019 kl. 23:35:33 UTC+2 skrev Julio Di Egidio:
> > > > On Monday, 16 September 2019 22:30:36 UTC+2, Jonas Thörnvall  wrote:
> > > > 
> > > > > Well one could think of it like a slideshow, swapping every x bars.
> > > > 
> > > > Indeed, for a simple image slideshow you can use one img and just change
> > > > the src attribute from JS.
> > > > 
> > > > BTW, canvas is another thing that is certainly not needed in your project...
> > > > 
> > > > HTH,
> > > > 
> > > > Julio
> > > 
> > > Proof yourself smarter then me and fix, this Julio and i gladly admit you are much much smarter then me ;)
> > > 
> > > var midiEv=0;
> > > var rightSide=[];
> > > var FRONTOFFSET=[];
> > > var barLength=[];
> > > var keyreleased=[]; 
> > > leftSide=50;
> > > for (var p=0;p<3000;p++) {rightSide[p]=0;FRONTOFFSET[p]=0;keyreleased[p]=false;}
> > > 
> > > function pianoSCROLL(){
> > > nbrOfEv = track[rectrack].midiMess.length;
> > >  while (nbrOfEv>0){
> > >     midiEv=nbrOfEv-1;
> > >    //When keypressed
> > >    if(track[rectrack].midiMess[midiEv].data0==NOTE_ON && keyreleased[midiEv]==false){
> > >       console.log("Pressed Key");
> > >       ctm.fillStyle = "magenta";
> > >       ctm.fillRect(leftSide,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), rightSide[midiEv],keyHeight-2);
> > >       //When ***A NEW*** key pressed a startpoint relative the scrollbar created ***FRONTOFFSET***
> > >       if(FRONTOFFSET[midiEv]==0) {FRONTOFFSET[midiEv]=scrollBarPos;}
> > >       rightSide[midiEv]=scrollBarPos-FRONTOFFSET[midiEv];
> > >    //When keyreleased
> > >    } else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==false){
> > >       console.log("keyreleased!");
> > >       for(var q=0;q<midiEv;q++){ 
> > >            if(track[rectrack].midiMess[q].data1==track[rectrack].midiMess[midiEv].data1) { 
> > > 		    keyreleased[q]=true;
> > > 			barLength[midiEv]=rightSide[midiEv]-leftSide; 
> > > 		   
> > > 		   }
> > >       }
> > >    keyreleased[midiEv]=true;
> > >    } 
> > > 	//After keyreleased
> > >     else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==true) {
> > >      console.log("parallell move"); 
> > > 	 // if(FRONTOFFSET[midiEv]==0) {FRONTOFFSET[midiEv]=scrollBarPos;}
> > > 	 rightSide[midiEv]=scrollBarPos-FRONTOFFSET[midiEv];
> > > 	 leftSide=rightSide[midiEv]-barLength[midiEv];
> > > 	 ctm.fillStyle = "#000a4d";
> > > 	 ctm.fillRect(keylength+1,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), Mwidth,keyHeight);
> > > 	 ctm.fillStyle = "white";
> > > 	 ctm.fillRect(leftSide,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), rightSide[midiEv],keyHeight-2);
> > >     } 
> > >  nbrOfEv--; 
> > >  }
> > > }
> > 
> > Logical conundrum, can someone give a hint.
> > How can the length of rectangle vary when the barlelngth is fixed?
> > It is beyond my understanding.
> >   else if(track[rectrack].midiMess[midiEv].data0==NOTE_OFF && keyreleased[midiEv]==true) {
> >       ctm.fillStyle = "black";
> > 	  ctm.fillRect(keylength+1,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), Mwidth,keyHeight);
> > 	  for(var q=0;q<midiEv;q++){ 
> >         if(track[rectrack].midiMess[q].data1==track[rectrack].midiMess[midiEv].data1) { 
> > 		  rightSide[q]=scrollBarPos-FRONTOFFSET[q];	
> >           leftSide=rightSide[q]-barLength[q];
> > 	      ctm.fillStyle = "white";
> > 	      ctm.fillRect(leftSide,(PistartX+keyHeight*88)-(keyHeight*(track[rectrack].midiMess[midiEv].data1-8)), rightSide[q],keyHeight-2);
> >     	  console.log("INSIDE FULL BAR MOVING Barlength "+barLength[midiEv]+" =right  "+rightSide[q]+" - left "+leftSide);
> > 	    }
> >       } 
> >    }
> 
> Barlength is constant i calculate Leftside by take Rightside - Barlength still the fucking bar get longer and longer, how can that be.
> 
> NSIDE FULL BAR MOVING  Leftside 696.9841974431785 =Rightside  1047.4982244318135 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 702.1189926609815 =Rightside  1052.6330196496165 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 707.2537878787845 =Rightside  1057.7678148674195 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 712.3885830965875 =Rightside  1062.9026100852225 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 717.5233783143905 =Rightside  1068.0374053030255 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 722.6581735321935 =Rightside  1073.1722005208285 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 727.7929687499965 =Rightside  1078.3069957386315 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 732.9277639677995 =Rightside  1083.4417909564345 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 738.0625591856025 =Rightside  1088.5765861742375 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 743.1973544034055 =Rightside  1093.7113813920405 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 748.3321496212085 =Rightside  1098.8461766098435 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 753.4669448390115 =Rightside  1103.9809718276465 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 758.6017400568145 =Rightside  1109.1157670454495 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 763.7365352746175 =Rightside  1114.2505622632525 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 768.8713304924205 =Rightside  1119.3853574810555 - Barlength 350.514026988635
> scrollPiano.js:50 INSIDE FULL BAR MOVING  Leftside 774.0061257102235 =Rightside

Weirdest of all if i lock the Leftside at zero the rightside seems to walk in correct pace, but it does not explain how math of lengths can fuck up.
 
A is a leading moving target "right positions of rectangle"
B is a constant "length"
C is a result of calculation "left position of rectangle" C=A-B

How the f**k can the length of bar vary on canvas after each iteration?
I can't wrap my head around it.

[toc] | [prev] | [next] | [standalone]

#37278

Jonas Thörnvall:

> If you want a fast update of the whole canvas can you somehow
> prerender it to memory, or must you save it as some picture format.

Read the documentation:

<https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API>
<https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas>
<https://developer.mozilla.org/en-US/docs/Web/API/OffScreenCanvas/transferToImageBitmap>

And so on...


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web