JavaScript Day 17: Color

Today we add some color. And some blur. Not much, but a nice effect.

Relatively few changes here. Here’s the file to follow along: http://www.bit-101.com/jscanvas/mar17.js

First of all, we add a line to initPoint that gives it a color property.

[php lang=”JavaScript”] function initPoint(p) {
p.x = emitter.x;
p.y = emitter.y;
p.vx = Math.random() * 4 – 2;
p.vy = Math.random() * -5 – 4;
p.radius = Math.random() * 5 + 1;
p.color = randomColor();
}[/php]

The randomColor function is here:

[php lang=”JavaScript”] function randomColor() {
var r, g, b;
r = Math.floor(Math.random() * 255);
g = Math.floor(Math.random() * 255);
b = Math.floor(Math.random() * 255);
return “rgb(” + r + “,” + g + “,” + b + “)”;
}[/php]

If you recall, colors are set with strings, which can be straight up hex values, “#ffcc99”, or with neat constructs like “rgb(255,128,0)”. Here we use the latter, getting three random integer values and composing them into a string. Now, in addition to a random velocity and size, each particle has a random color as well. We can use context.fillStyle before filling each circle to use that color.

Next up, I wanted to create a blur or trail effect, based on a common trick that’s often used in Processing. Up to now, we have been using context.clearRect to clear all previous drawings from the canvas. This wipes out every pixel and fills the entire rectangle with a fully transparent color. Instead, now we’ll use fillRect, passing a color that is the same as the background, but with a very slight transparency. In the html file, I’ve set the background color of the body tag to black. Now I’ll use a black rectangle with a very slight amount of alpha – almost completely transparent, but not quite. The result is like putting a layer of smoked glass over the canvas. And we’ll do this on every frame, so the longer things are there, the more layers they have over them. Thus, shapes begin to fade out. All this is accomplished in the draw function, which you can see here:

[php lang=”JavaScript”] function draw() {
var i, point, len = points.length;
context.fillStyle = “rgba(0,0,0,0.05)”;
context.fillRect(0, 0, width, height);
for(i = 0; i < len; i += 1) { point = points[i]; context.fillStyle = point.color; context.beginPath(); context.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false); context.fill(); } }[/php] And here's the final product: http://www.bit-101.com/jscanvas/mar17.html

Pretty neat effect, if you ask me. I’m not totally sure this will work in every browser. My original understanding led me to believe it wouldn’t work at all. So I was a bit surprised when it did exactly what I wanted it to. I’ve tested it on Chrome and Firefox in Ubuntu. I’d like to hear if it works or not in other browser on other systems.