/rain

HTML5 canvas rain simulator

Primary LanguageJavaScript

Rain

Rain on window simulator in HTML5 canvas. Completed in a day.

Inspired by: http://maroslaw.github.io/rainyday.js/demo1.html

Online demo: http://sunmock.com/canvas/rain/rain.html

Nuts and bolts

The particles are semi transparent shapes that change colour depending on the background image's colour at its position. This is done by using the following canvas javascript function to get the RGB value of a pixel at x/y.

context.getImageData(x, y, 1, 1).data

This function is rather slow however is the only way to get RGB data of an image. So to optimize, the image is redrawn in an offscreen canvas in a much reduced size and the data is pulled from this image.

Also for optimization, the entire image is not redrawn after each frame, but rather only the areas in which the shapes used to be are redrawn from the previous image (didn't really make a difference though).

Open up console and enter in the following to see the smaller image and the location of each particle.

debugMode = true

The slow dripping/falling behaviour of the rain drops was modelled using perlin noise for a more natural falling rather than using a random function. The library used is here: https://gist.github.com/banksean/304522

Image sources