Mozilla Skin*/?>

Making Rain Tutorial

From ConduitWiki

This tutorial demonstrates how Conduit’s scriptable “supernode” can be used to combine JavaScript canvas graphics and GPU-accelerated rendering to make a generative effect. (It’s recommended to read the supernode and canvas tutorials before this one.)

The effect that’s created here is an animated rain filter. It uses a very simple particle system to keep track of “raindrops”, and the rain is rendered with GPU acceleration through Conduit’s unique JavaScript interface. There is also a color tint and a glow applied, for that melancholic blue rain look…

This effect is fully procedural: everything is rendered on demand, no graphics or video files are needed. The actual rendering function is only a few dozen lines of JavaScript code. (There is some more code to render the raindrop graphics, but this code is quite easy to understand because it consists purely of Canvas API graphics calls). In addition to the rendering script, a conduit effect is used to produce the final look.

This is an example of Conduit as a hybrid graphics programming system: it allows you to easily combine node-based visual techniques with textual scripts. Some concepts (such as the loop required to draw and animate the raindrop particles in this example) are difficult to represent in a visual form, but easily described with just a few lines in a traditional programming language. With Conduit, you get to pick the best of both worlds.

Fileicon-pdf-30px.png Download this tutorial as PDF Info_circle.png