drawcall / Proton

Javascript particle animation library
https://drawcall.github.io/Proton/
MIT License
2.42k stars 275 forks source link

minimal hello world example #91

Closed Lakedaemon closed 2 years ago

Lakedaemon commented 2 years ago

Hello. I'm trying to make Proton work on my sveltekit app but I failed miserably.

So I tried writting a minimal html page with proton working but nothing displays, though I have no error in my console. Could you please give a hint (and ship a minimal working example) please ?

Here is what I tried proton

Best regards, Olivier

drawcall commented 2 years ago

please set canvas width and height

Lakedaemon commented 2 years ago

Thanks for the help

I added canvas.width = 800; canvas.height = 600; after getting the canvas through it's id and I also tried <canvas id="can" width="600" height="600"></canvas>

Still nothing happens (no error in the console, I'm using the latest release of Proton)

Lakedaemon commented 2 years ago

I'll try to investigate today (I like to make complex things work and I need Proton)

  1. proton examples work on my ubuntu + chrome --> this is ok
  2. trying to reproduce a simple example in a simple html page, now...
Lakedaemon commented 2 years ago

I managed to reproduce the Linesone example, without the stats stuff... Making some progress... Looks like I was missing some tick stuff Investigating some more

Lakedaemon commented 2 years ago

There. Found the issue. my code was missing function tick() { requestAnimationFrame(tick); proton.update();

}
tick();

I added that and it works now
drawcall commented 2 years ago

Please provide online code, such as codesandbox

Lakedaemon commented 2 years ago

Won't do, it is much too complicated.

Your code snipet describing how Proton only needs 12 lines of code to work is missing those 4 lines at the end :

function tick() { requestAnimationFrame(tick); proton.update(); } tick();

No need to create a complete sandbox to understand why it cannot work without those lines, right ? :)

Lakedaemon commented 2 years ago

But just in case. Here is a working minimal html page for your library https://spartan-entertainment.com/test4.html