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)