DEV Community

Ryan Tao Spencer
Ryan Tao Spencer

Posted on

Pure Javascript particle repeller from base64 encoded png

I have some js code that i copied from a youtube tutorial and adapted for my own project to fill the header, the code works as intended and it works when the viewport is smaller than around 1200px, however when i put firefox into full screen the animation does not…

</p>
Enter fullscreen mode Exit fullscreen mode



Can anyone help....

Top comments (1)

Collapse
 
anuraghazra profile image
Anurag Hazra •

Calculating that amount of pixels will be slow because HTML5Canvas 2D is not very performant, you could use WEBGL to speed things up. or just use a smaller canvas then resize it with CSS. that would be a good choice.

You can watch Daniel Shiffman's tutorials about repelling, steering behaviors & vectors to understand the physics behind it. here's a video youtube.com/watch?v=4hA7G3gup-4

Also try my demo here (source-code)

another one here (source-code)