HTML and CSS Reference
In-Depth Information
Figure 19-2.
Brownian motion with trails
Brownian motion is useful any time you want something to move around as if it were floating with no
particular direction in mind, with no forces really acting on it. You can also add it to an object that has
some other motion applied to it, to give it a sense of randomness. An example is a fly or bee that's buzzing
around. You might have it move along in some path, but adding in some random motion can make it look
much more lifelike.
Random distribution
From time to time, you might want to create several objects and place them at random positions. You
already did this many times throughout the topic, but here we focus on a few different methods of doing
this, and the different results that they give you.
Square distribution
If you want the objects to randomly cover the entire canvas element, that's simple. Choose a random
number up to the canvas's width for x, and a random number up to the canvas's height for y. In fact, you
did just that in the previous exercises:
dot.x = Math.random() * canvas.width;
dot.y = Math.random() * canvas.height;
But if you want to clump the dots in near the center of the canvas—say 100 pixels to either side, top, or
bottom of the center—you can do something like the following, which is example
03-random-1.html
:
