Once I can tell the browser how to draw a flower, my next step is drawing rows of flowers. Since I’m trying to create the illusion of distance, I want my rows of flowers to get smaller as they get closer to the horizon. Typically, this would require a fair amount of math, but it’s easy when I can manipulate the context.

The first thing I do is change the origin of the context to (0, 210). This is my horizon. When I position a flower, I’m positioning it relative to this new origin. Change the scale and see what happens.

Context scale:

Flower position: x-coordinate: , y-coordinate:

When I change the scale of the context, I’m not changing the scale of the flower; I’m changing the scale of the universe. This is why the position of the flower appears to change as the scale changes. In my rows, all of the flowers are 160 pixels apart and 240 pixels below the horizon. I don’t have to calculate new coordinates to draw small rows and large rows—I just have to set the scale and draw.

Context scale:

Flower position: ∆x: , ∆y:

Right now, I can draw rows of orange flowers, but those rows are a little too neat. To introduce a bit randomness into my drawing, I use a random number generator to choose between orange, red, and purple flowers; turn the flowers so they have different rotations; and nudge the flowers so they aren’t lined up perfectly. This randomness is easier to see if I put each flower in a box.

Learn more about the cloud.