HTML and CSS Reference
In-Depth Information
Figure 19-1.
Brownian motion without the motion
In the next example,
02-brownian-2.html
, we make some adjustments to the previous exercise so we
can see the path each dot takes. At the top of the script, reduce the number of dots to 20, and add two
variables,
decay
and
decayColor
, that we use as the new canvas clearing color:
var numDots = 20,
decay = 0.01,
decayColor = utils.colorToRGB("#ffffff", decay);
Because the clearing color contains transparency, we use our utility function
utils.colorToRGB
to return
the CSS-style RGBA string:
'rgba(255,255,255,0.01)'
.
Then remove our normal canvas clearing call to
context.clearRect
and replace it with a fill rectangle
using our color. Now the animation loop no longer erases the dot's trail on each frame, it just gradually
makes the image lighter and lighter.
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.fillStyle = decayColor;
context.fillRect(0, 0, canvas.width, canvas.height);
dots.forEach(draw);
}());
Run this example in your browser and you can see the path that each dot takes, as shown in Figure 19-2.
The active part of the trail is in black, whereas the remaining path decays to gray.
