How to make waterfall using pixijs?

[newJS]

Hi everyone,

I would like to make an audio waterfall like the following using WebGL with PixiJS. But I couldn't find a way.

Can those who know help?

[jonforum]

https://codepen.io/jackrugile/pen/Knawg?editors=0010

[mattstyles]

That's nice using particles. Looks great.

Using a shader would also be an option for water simulation.

[newJS]

On 9/12/2019 at 3:33 AM, jonforum said:

https://codepen.io/jackrugile/pen/Knawg?editors=0010

Thanks for answer but I make would like the following 

https://drive.google.com/file/d/1jG44SZXtJgPortNT0b3DfaQf00kLOoHg/view

There will be about 32768 dots. 

When I do this deliver better performance WebGL or 2d?

[newJS]

19 hours ago, mattstyles said:

That's nice using particles. Looks great.

Using a shader would also be an option for water simulation.

Actually I don't water simulation. I do an audio waterfall and I couldn't find a way still.

I make would like the following using WebGL with PixiJS. There will be about 32768 dots.

https://drive.google.com/file/d/1jG44SZXtJgPortNT0b3DfaQf00kLOoHg/view

[Exca]

Will the dots be moving or is it just static? If it's static content then you could do that really easily with a 2d canvas using putImageData and use that canvas as a texture.

Or if those need to be moving then you could do them each be a 1x1 pixel sprite. 30k sprites should be ok.

Or you could render them as dots with a custom shader which would allow you to have millions of them.

[newJS]

1 hour ago, Exca said:

Will the dots be moving or is it just static? If it's static content then you could do that really easily with a 2d canvas using putImageData and use that canvas as a texture.

Or if those need to be moving then you could do them each be a 1x1 pixel sprite. 30k sprites should be ok.

Or you could render them as dots with a custom shader which would allow you to have millions of them.

What I want to do is actually something like this.

https://drive.google.com/open?id=1j0uKGNVsFAd8Oq4ZgJrpSCnVufYiiRpD

Will keep coming 30k point continuously.  Last points will be added to the top of the canvas. At other points it will go down.

 

I was able to do it using PutImageData. 

But I don't know if it makes sense to use WebGL for a 30k dot. If it makes sense, I would consider switching to WebGL with PixiJS. But I have no idea how to do it using Pixi JS.

[Exca]

I'd say that is a perfect use case for 2d canvas as with that you can scroll the whole content and draw only one line. Would make the thing pretty efficient. Something like this:

//Code might contain errors. Writing without checking.

//Setup
ctx.imageSmoothingEnable=false; //Dont use image smoothing to allow copy to go pixel perfect.

//Draw
function drawPoints( lineImageData ) 
{
  //Copy old canvas with offset.
  ctx.globalCompositeOperation = "copy";
  ctx.drawImage( ctx.canvas, -1, 0);
  //Reset composite
  ctx.globalCompositeOperation = "source-over";

  ctx.putImageData(lineImageData, ctx.canvas.width-1, 0);
}

As you dont have need for continous animation I'd say use 2d canvas for creating the audio waterfall image and if you need something more dynamic around the image or you need to move that, then you can wrap everything around pixi and use the waterfall as just a texture.

[jonforum]

it remember me the demo tarVK
https://tarvk.github.io/pixi-shadows/build/demos/system/
I dont think the good english word was waterFall.
maybe search with those key first in googe image
`noise sound grafic fall`
when you will found how this call, you will easily found demo