{"id":74,"date":"2011-01-19T09:33:04","date_gmt":"2011-01-19T15:33:04","guid":{"rendered":"http:\/\/timothypoon.com\/blog\/?p=74"},"modified":"2016-02-19T09:04:43","modified_gmt":"2016-02-19T15:04:43","slug":"html5-canvas-particle-animation","status":"publish","type":"post","link":"https:\/\/timothypoon.com\/blog\/2011\/01\/19\/html5-canvas-particle-animation\/","title":{"rendered":"HTML5 Canvas Particle Animation"},"content":{"rendered":"

UPDATE:<\/strong> yes, I know some people out there will see some flickering when viewing the demo<\/a>. This is because a) I didn’t implement a double buffer, and b) there is no built-in canvas support for double buffering. There is a very simple solution<\/a>, but I’ll save that for another time.<\/p>\n

Having never really been a user of Apple products, I guess it’s not all that surprising that I’ve never been to the MobileMe website<\/a>. However, after Googling something like the lines of “most popular e-mail providers<\/a>,” I came across its login page and was blown away.<\/p>\n

\"\"<\/a><\/p>\n

Holy moly, that looks amazing. Not only is the design great and the colors are just about perfect, but those little sparkles are crazy! They move in what appears to be 3D space, pulsing from behind the cloud to further into the background amongst and into (while highlighting) the iPads and iPhones, and follow your mouse movements for extra fun.<\/p>\n

After poking around the source<\/a> and giving up on 100% comprehension<\/a>, I decided it might be fun to take a whack at my own thoroughly underwhelming homage to the MobileMe page.<\/p>\n

The Setup<\/h2>\n

For some reason or another, I decided to make a night scene of some mountains and grass for some stars to streak across (I also threw in some parallax<\/a>, but that’s for another post). Here’s what I’m starting out with prior to any canvas magic<\/a>:<\/p>\n

\"\"<\/a><\/p>\n

And here’s the accompanying code to make that happen (it’s pretty simple, but I’m including it anyways so as little is left out as possible):<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<\/div><\/td>
#container<\/span> {<\/span>
\n    overflow<\/span>:<\/span>hidden<\/span>;<\/span>
\n    position<\/span>:<\/span>relative<\/span>;<\/span>
\n}<\/span>
\n#pixie<\/span> {<\/span>
\n    z-index<\/span>:<\/span>0<\/span>;<\/span>
\n    background<\/span>:<\/span>-moz-linear-gradient(<\/span>top<\/span>,<\/span> #040429<\/span>,<\/span> #257eb7<\/span>)<\/span>;<\/span>
\n    background<\/span>:<\/span>-webkit-gradient(<\/span>linear,<\/span> left<\/span> top<\/span>,<\/span> left<\/span> bottom<\/span>,<\/span> color-stop(<\/span>0%<\/span>,<\/span>#040429<\/span>)<\/span>,<\/span> color-stop(<\/span>100%<\/span>,<\/span>#257eb7<\/span>)<\/span>)<\/span>;<\/span>
\n}<\/span>
\n#mountains<\/span>,<\/span> #grass<\/span> {<\/span>
\n    width<\/span>:<\/span>100%<\/span>;<\/span>
\n    position<\/span>:<\/span>absolute<\/span>;<\/span>
\n    bottom<\/span>:<\/span>0<\/span>;<\/span>
\n}<\/span>
\n#mountains<\/span> {<\/span>
\n    height<\/span>:<\/span>156px<\/span>;<\/span>
\n    z-index<\/span>:<\/span>1<\/span>;<\/span>
\n    background<\/span>:<\/span>url<\/span>(<\/span>mountains.png<\/span>)<\/span> repeat-x<\/span> 0<\/span> 0<\/span>;<\/span>
\n}<\/span>
\n#grass<\/span> {<\/span>
\n    height<\/span>:<\/span>62px<\/span>;<\/span>
\n    z-index<\/span>:<\/span>2<\/span>;<\/span>
\n    background<\/span>:<\/span>url<\/span>(<\/span>grass.png<\/span>)<\/span> repeat-x<\/span> left<\/span> 10px<\/span>;<\/span>
\n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n
1
2
3
4
5
<\/div><\/td>
<div<\/span><\/a> id<\/span>=<\/span>"container"<\/span>><\/span>
\n    <canvas id<\/span>=<\/span>"pixie"<\/span>><\/<\/span>canvas><\/span>
\n    <div<\/span><\/a> id<\/span>=<\/span>"mountains"<\/span>><\/<\/span>div<\/span><\/a>><\/span>
\n    <div<\/span><\/a> id<\/span>=<\/span>"grass"<\/span>><\/<\/span>div<\/span><\/a>><\/span>
\n<\/<\/span>div<\/span><\/a>><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

But that’s child’s play compared to what you really came here for: HTML5 canvas<\/a>! (You should note, though, that the actual height and width attributes of the canvas element must be set in the HTML or dynamically through JavaScript and not just the CSS, otherwise you’ll get something…weird)<\/p>\n

The JavaScript<\/h2>\n

What first needs to happen is setting up the drawing environment. This includes grabbing the appropriate elements and getting the drawing dimensions.<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<\/div><\/td>
var<\/span> WIDTH =<\/span> window.innerWidth<\/span>,<\/span>
\n    HEIGHT =<\/span> window.innerHeight<\/span>,<\/span>
\n    MAX_PARTICLES =<\/span> 100<\/span>,<\/span>
\n    DRAW_INTERVAL =<\/span> 60<\/span>,<\/span>
\n    container =<\/span> document.querySelector<\/span>(<\/span>'#container'<\/span>)<\/span>,<\/span>
\n    canvas =<\/span> document.querySelector<\/span>(<\/span>'#pixie'<\/span>)<\/span>,<\/span>
\n    context =<\/span> canvas.getContext<\/span>(<\/span>'2d'<\/span>)<\/span>,<\/span>
\n    gradient =<\/span> null<\/span>,<\/span>
\n    pixies =<\/span> new<\/span> Array<\/span>(<\/span>)<\/span>;<\/span>
\n
\nfunction<\/span> setDimensions(<\/span>e)<\/span> {<\/span>
\n    WIDTH =<\/span> window.innerWidth<\/span>;<\/span>
\n    HEIGHT =<\/span> window.innerHeight<\/span>;<\/span>
\n    container.style<\/span>.width<\/span> =<\/span> WIDTH+<\/span>'px'<\/span>;<\/span>
\n    container.style<\/span>.height<\/span> =<\/span> HEIGHT+<\/span>'px'<\/span>;<\/span>
\n    canvas.width<\/span> =<\/span> WIDTH;<\/span>
\n    canvas.height<\/span> =<\/span> HEIGHT;<\/span>
\n}<\/span>
\nsetDimensions(<\/span>)<\/span>;<\/span>
\nwindow.addEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> setDimensions)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

This ensures that on window resizes, everything gets set again and updated to the new dimensions. You can also tinker with MAX_PARTICLES<\/span><\/code> and DRAW_INTERVAL<\/span><\/code> to your liking.<\/p>\n

Next up is the Circle<\/span><\/code> object. It contains the bulk of the logic of how the particles will behave.<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<\/div><\/td>
function<\/span> Circle(<\/span>)<\/span> {<\/span>
\n    this<\/span>.settings<\/span> =<\/span> {<\/span>ttl:<\/span>8000<\/span>,<\/span> xmax:<\/span>5<\/span>,<\/span> ymax:<\/span>2<\/span>,<\/span> rmax:<\/span>10<\/span>,<\/span> rt:<\/span>1<\/span>,<\/span> xdef:<\/span>960<\/span>,<\/span> ydef:<\/span>540<\/span>,<\/span> xdrift:<\/span>4<\/span>,<\/span> ydrift:<\/span> 4<\/span>,<\/span> random:<\/span>true<\/span>,<\/span> blink:<\/span>true<\/span>}<\/span>;<\/span>
\n
\n    this<\/span>.reset<\/span> =<\/span> function<\/span>(<\/span>)<\/span> {<\/span>
\n        this<\/span>.x<\/span> =<\/span> (<\/span>this<\/span>.settings<\/span>.random<\/span> ?<\/span> WIDTH*<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span> :<\/span> this<\/span>.settings<\/span>.xdef<\/span>)<\/span>;<\/span>
\n        this<\/span>.y<\/span> =<\/span> (<\/span>this<\/span>.settings<\/span>.random<\/span> ?<\/span> HEIGHT*<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span> :<\/span> this<\/span>.settings<\/span>.ydef<\/span>)<\/span>;<\/span>
\n        this<\/span>.r<\/span> =<\/span> (<\/span>(<\/span>this<\/span>.settings<\/span>.rmax<\/span>-<\/span>1<\/span>)<\/span>*<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>)<\/span> +<\/span> 1<\/span>;<\/span>
\n        this<\/span>.dx<\/span> =<\/span> (<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>this<\/span>.settings<\/span>.xmax<\/span>)<\/span> *<\/span> (<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span> <<\/span> .5 ?<\/span> -<\/span>1<\/span> :<\/span> 1<\/span>)<\/span>;<\/span>
\n        this<\/span>.dy<\/span> =<\/span> (<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>this<\/span>.settings<\/span>.ymax<\/span>)<\/span> *<\/span> (<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span> <<\/span> .5 ?<\/span> -<\/span>1<\/span> :<\/span> 1<\/span>)<\/span>;<\/span>
\n        this<\/span>.hl<\/span> =<\/span> (<\/span>this<\/span>.settings<\/span>.ttl<\/span>\/<\/span>DRAW_INTERVAL)<\/span>*<\/span>(<\/span>this<\/span>.r<\/span>\/<\/span>this<\/span>.settings<\/span>.rmax<\/span>)<\/span>;<\/span>
\n        this<\/span>.rt<\/span> =<\/span> Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>this<\/span>.hl<\/span>;<\/span>
\n        this<\/span>.settings<\/span>.rt<\/span> =<\/span> Math<\/span>.random<\/span>(<\/span>)<\/span>+<\/span>1<\/span>;<\/span>
\n        this<\/span>.stop<\/span> =<\/span> Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>.2+<\/span>.4;<\/span>
\n        this<\/span>.settings<\/span>.xdrift<\/span> *=<\/span> Math<\/span>.random<\/span>(<\/span>)<\/span> *<\/span> (<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span> <<\/span> .5 ?<\/span> -<\/span>1<\/span> :<\/span> 1<\/span>)<\/span>;<\/span>
\n        this<\/span>.settings<\/span>.ydrift<\/span> *=<\/span> Math<\/span>.random<\/span>(<\/span>)<\/span> *<\/span> (<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span> <<\/span> .5 ?<\/span> -<\/span>1<\/span> :<\/span> 1<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n
\n    this<\/span>.fade<\/span> =<\/span> function<\/span>(<\/span>)<\/span> {<\/span>
\n        this<\/span>.rt<\/span> +=<\/span> this<\/span>.settings<\/span>.rt<\/span>;<\/span>
\n    }<\/span>
\n
\n    this<\/span>.draw<\/span> =<\/span> function<\/span>(<\/span>)<\/span> {<\/span>
\n        if<\/span>(<\/span>this<\/span>.settings<\/span>.blink<\/span> &&<\/span> (<\/span>this<\/span>.rt<\/span> <=<\/span> 0<\/span> ||<\/span> this<\/span>.rt<\/span> >=<\/span> this<\/span>.hl<\/span>)<\/span>)<\/span> {<\/span>
\n            this<\/span>.settings<\/span>.rt<\/span> =<\/span> this<\/span>.settings<\/span>.rt<\/span>*-<\/span>1<\/span>;<\/span>
\n        }<\/span> else<\/span> if<\/span>(<\/span>this<\/span>.rt<\/span> >=<\/span> this<\/span>.hl<\/span>)<\/span> {<\/span>
\n            this<\/span>.reset<\/span>(<\/span>)<\/span>;<\/span>
\n        }<\/span>
\n
\n        var<\/span> newo =<\/span> 1<\/span>-<\/span>(<\/span>this<\/span>.rt<\/span>\/<\/span>this<\/span>.hl<\/span>)<\/span>;<\/span>
\n        context.beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n        context.arc<\/span>(<\/span>this<\/span>.x<\/span>,<\/span> this<\/span>.y<\/span>,<\/span> this<\/span>.r<\/span>,<\/span> 0<\/span>,<\/span> Math<\/span>.PI<\/span>*<\/span>2<\/span>,<\/span> true<\/span>)<\/span>;<\/span>
\n        context.closePath<\/span>(<\/span>)<\/span>;<\/span>
\n
\n        var<\/span> cr =<\/span> this<\/span>.r<\/span>*<\/span>newo;<\/span>
\n        gradient =<\/span> context.createRadialGradient<\/span>(<\/span>this<\/span>.x<\/span>,<\/span> this<\/span>.y<\/span>,<\/span> 0<\/span>,<\/span> this<\/span>.x<\/span>,<\/span> this<\/span>.y<\/span>,<\/span> (<\/span>cr <=<\/span> 0<\/span> ?<\/span> 1<\/span> :<\/span> cr)<\/span>)<\/span>;<\/span>
\n        gradient.addColorStop<\/span>(<\/span>0.0<\/span>,<\/span> 'rgba(255,255,255,'<\/span>+<\/span>newo+<\/span>')'<\/span>)<\/span>;<\/span>
\n        gradient.addColorStop<\/span>(<\/span>this<\/span>.stop<\/span>,<\/span> 'rgba(77,101,181,'<\/span>+<\/span>(<\/span>newo*<\/span>.6)<\/span>+<\/span>')'<\/span>)<\/span>;<\/span>
\n        gradient.addColorStop<\/span>(<\/span>1.0<\/span>,<\/span> 'rgba(77,101,181,0)'<\/span>)<\/span>;<\/span>
\n        context.fillStyle<\/span> =<\/span> gradient;<\/span>
\n        context.fill<\/span>(<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n
\n    this<\/span>.move<\/span> =<\/span> function<\/span>(<\/span>)<\/span> {<\/span>
\n        this<\/span>.x<\/span> +=<\/span> (<\/span>this<\/span>.rt<\/span>\/<\/span>this<\/span>.hl<\/span>)<\/span>*<\/span>this<\/span>.dx<\/span>;<\/span>
\n        this<\/span>.y<\/span> +=<\/span> (<\/span>this<\/span>.rt<\/span>\/<\/span>this<\/span>.hl<\/span>)<\/span>*<\/span>this<\/span>.dy<\/span>;<\/span>
\n        if<\/span>(<\/span>this<\/span>.x<\/span> ><\/span> WIDTH ||<\/span> this<\/span>.x<\/span> <<\/span> 0<\/span>)<\/span> this<\/span>.dx<\/span> *=<\/span> -<\/span>1<\/span>;<\/span>
\n        if<\/span>(<\/span>this<\/span>.y<\/span> ><\/span> HEIGHT ||<\/span> this<\/span>.y<\/span> <<\/span> 0<\/span>)<\/span> this<\/span>.dy<\/span> *=<\/span> -<\/span>1<\/span>;<\/span>
\n    }<\/span>
\n
\n    this<\/span>.getX<\/span> =<\/span> function<\/span>(<\/span>)<\/span> {<\/span> return<\/span> this<\/span>.x<\/span>;<\/span> }<\/span>
\n    this<\/span>.getY<\/span> =<\/span> function<\/span>(<\/span>)<\/span> {<\/span> return<\/span> this<\/span>.y<\/span>;<\/span> }<\/span>
\n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

The first line is some settings for each particle, each of which is named in a pretty self-explanatory manner.<\/p>\n