HTML5 Canvas - Making an animated background with falling gold flakes

Question

I'm working on a website which calls for an animated background. I am trying to imitate falling gold flakes. Initially we tried using an animated gif, but it's way too heavy and sluggish.

This is my first time working with Canvas, I would definitely like someone with more experience to give me some input on this.

I found some code as a starting point and repurposed it for my needs. Here's where I am currently at: http://codepen.io/slickdev/pen/LqKai

To-do : I'd like to slow down the speed of the falling particles, and alter their shape from being a perfect circle to look more like falling gold flakes. If I can get it to appear more realistic it would be ideal. I also need to focus on performance. Are there any ways to optimize this to run more efficiently?

Are there any drawbacks to this approach, in terms of accessibility / cross-browser compatibility? I've done some research and it seems that it's widely supported.

Your help would be greatly appreciated!

Answer 1

I don't know if you've already had a chance to finish this before now, but here goes....

To change the speed of the falling particles you'll want to edit the @vx and @vy on lines 57 and 58 of that forked Pen of yours, something similar to:

@vx = range(0,1)+8*xpos-5
@vy = 0.2*@r

I found that altering the DOP (and Y value to compensate) gave something a little more 'believable' too:

@dop = 0.001*range(1,5)
@y = range(-100,h-@r2)

With regards to drawing more 'realistic' snowflakes, I personally prefer seeing shapes closer to "circles", since the actual flakes themselves are harder to see in real life. But if you're keen to work on your original idea I can point you to HTML5 canvas fractals .

A good example of what to look into if you're looking for something simple are Pentaflake fractals . If you really want to blow people's minds then I would suggest looking into the source code of this HTML canvas fractal application, here .

I hope this helps :)