If you haven’t done so already, you should go through stage 2 of this tutorial. The work that we do in stage 3 builds off the drawing in stage 2, and you’ll need the index.html and scripts.js files from stage 2 to get started. Copies of the finished text files for stage 3 are here: stage03.zip.
To update our drawing, we don’t have to touch the index.html file. All of the actual drawing happens in the scripts.js file—index.html just creates a webpage with a blank <canvas> on it. We are going to update our drawing just by making changes to the existing drawing functions in scripts.js.
In stage 2, we didn’t have to update drawPizza() at all. We improved our drawing just by updating drawCrust(), drawMushroom(), drawPepperoni(), and drawGreenPepper(). This time, we need to make some major changes to drawPizza() for stage 3.
First, we’re adding a clipping path. What’s a clipping path? We’ll go over that shortly. Second, we’re using drawToppings() to draw herbs and cheese on our pizza. Third, drawToppings() now has two more parameters in its definition. These parameters will make drawToppings() more flexible, but we’ll have to comment out drawToppings() until after we’ve updated it. Fourth, there’s a new function named drawCrustCaramelization().
In stage 2, we drew the crust using a radial gradient. We’re still using a radial gradient in stage 3, but the crust now has a more complex shape and it caramelizes unevenly in spots.
Since we’ll be adding in the caramelization later, we change the crustGradient in drawCrust() so that the outside of the crust is less red. Then we draw the sauce before puffing and caramelizing the crust. If we drew the puffs before adding the sauce, the sauce would cover the puffs.
Use the number field below the drawing to go to step 3. To create the puffy crust, we draw 16 circles around the edge of the pizza. The circles are outlined in red so that they’re easier to see.
We draw the 16 circles in drawCrustCaramelization() using a for loop. Each time through the for loop, the ctx is turned 22.5° (0.125 * Math.PI) and a circle is drawn with a random radius of 40-100 pixels. Each circle is drawn a distance of 170 + r pixels from the center of the pizza, where r is the circle’s radius. This means that the edge of the circle will always be 170 pixels from the center of the pizza—and since the sauce has a radius of 180 pixels, the circle will always overlap the edge of the sauce by 10 pixels.
The circles are filled with the same gradient used to draw the crust in the first place, giving the inner edge of the crust a nice puffy shape. Use the number field to go to step 4. However, the outer edge of the crust is kind of ruined. To fix this, we’re going to draw the pizza with a clipping path. A clipping path creates a mask, and anything drawn outside of the path is “clipped” or hidden from view. To use a clipping path on <canvas>, we have to create the clipping path first. Clipping paths don’t mask any drawings that already exist on the <canvas>, only drawings made afterward.
This is why the clipping path is created in drawPizza() before drawCrustCaramelization() is called. Use the number field to go to step 5 to see the effect of the clipping path. The clipping path is a circle centered at the center of the pizza with a radius of 200 pixels.
Once the crust has its puffy shape, drawCrustCaramelization() draws dozens of tiny spots of caramelization on top of it. Use the number field to go to step 6. Because we don’t know exactly how many spots we’re drawing on the crust (the number varies every time), we’re using a while loop to draw the spots instead of a for loop.
Before the while loop begins, we set our angle i = 0. Then we add a random angle of 0-0.05 radians (≈0-3°) to the angle each time through the loop, and continue drawing spots as long as the angle is less than 360° (2 * Math.PI). Each spot is drawn a random distance of 182-198 pixels from the center of the pizza, and with a random scale of 0.2-1.
To draw the spots, we call drawCaramelization(), which draws a circle with a radius of 6 pixels and fills it with a caramelizationGradient. Use the number field to go to step 6.
Step:
Back in stage 2, we used drawToppings() to place and draw pockets of fat on our pepperoni, but we had to use a scale factor because drawToppings() is hard-coded to place toppings 10-150 pixels from the center of a circle—and the pepperoni only have a radius of 20 pixels. Using the scale factor worked for the pepperoni, but since we’re going to use drawToppings() to place herbs in our sauce and mozzarella slices on top of our pizza in stage 3, it would be nice if drawToppings() was not hard-coded with distances.
To make drawToppings() more flexible, it will now have two additional parameters as input: rMin and rMax.
When drawToppings() was hard-coded, rMin was always 10 and rMax was always 150—but now those values can be whatever we need them to be.
With drawToppings() updated, we’re finally ready to add herbs to our sauce. In drawPizza(), we call drawToppings(256, 4, 196, drawHerb) to draw 256 herbs between rMin = 4 and rMax = 196. To draw the actual herb, we pass it drawHerb().
The drawHerb() function is fairly simple. A herb is a solid green rectangle that’s randomly rotated.
Instead of drawing a single layer of cheese, we’re going to draw 12 slices of melted mozzarella that overlap. Each slice has a random radius 40-50 pixels, and we change the color of the cheese slightly and give it an alpha value of 0.95 so that we can see the slices overlapping.
Then, in drawPizza(), we draw four slices 50 pixels from the center of the pizza and eight more slices 120 pixels from the center.
Since green peppers typically have dark green skins, we’re going to draw dark green skins on our peppers, too. To do this, we’ll draw a dark green pepper shifted up one pixel, and then draw the exact same green pepper with the light green color shifted down one pixel. This will give our green peppers a 2-pixel thick dark green skin.
Since we’re drawing the same shape twice, we should really create a function to draw the shape and then call the function twice instead of writing the same script twice—but this was fairly simple.
Step:
The last function that we’ll update in stage 3 is drawMushroom(). The mushrooms in stage 2 were all identical; we’d like the mushrooms in stage 3 to be randomized at least a little bit. We can do this by scaling each mushroom randomly and varying the length of their stems.
We start by generating a random stem length of 8-20 pixels and a random scale factor of 0.8-1. The mushrooms in stage 2 all had stem lengths of 20 pixels and a scale factor of 1.
We apply the scale factor to the ctx before drawing the mushroom.
The random stem length, y, is used to calculate the shape of the mushroom. Some mushrooms will have shorter stems and others will have longer stems.
While varying the stem length and scaling the mushroom is not a very large change, having a little variation is better than none. And, of course, this is simply the beginning. What can we do in stage 4? How about stage 10 or stage 20? Little changes add up to large changes… and the sky’s the limit.