Example 3-1: Draw a Window

The size() function has two parameters: the first sets the width of the window and the second sets the height. To draw a window that is 800 pixels wide and 600 high, write:

 size(800, 600)

Run this line of code to see the result. Put in different values to see what’s possible. Try very small numbers and numbers larger than your screen.

Example 3-2: Draw a Point

To set the color of a single pixel within the Display Window, we use the point() function. It has two parameters that define a position: the x coordinate followed by the y coordinate. To draw a little window and a point at the center of the screen, coordinate (240, 60), type:

 size(480, 120)
 point(240, 60)

Try to write a program that puts a point at each corner of the Display Window and one in the center. Try placing points side by side to make horizontal, vertical, and diagonal lines.

Example 3-3: Draw a Line

To draw a line between coordinate (20, 50) and (420, 110), try:

size(480, 120)
line(20, 50, 420, 110)

Example 3-4: Draw Basic Shapes

Following this pattern, a triangle needs six parameters and a quadrilateral needs eight (one pair for each point):

size(480, 120) 
quad(158, 55, 199, 14, 392, 66, 351, 107) 
triangle(347, 54, 392, 9, 392, 66) 
triangle(158, 55, 290, 91, 290, 112)

Example 3-5: Draw a Rectangle

Rectangles and ellipses are both defined with four parameters: the first and second are for the x and y coordinates of the anchor point, the third for the width, and the fourth for the height. To make a rectangle at coordinate (180, 60) with a width of 220 pixels and height of 40, use the rect() function like this:

size(480, 120) 
rect(180, 60, 220, 40)

Example 3-6: Draw an Ellipse

The x and y coordinates for a rectangle are the upper-left corner, but for an ellipse they are the center of the shape. In this example, notice that the y coordinate for the first ellipse is outside the window. Objects can be drawn partially (or entirely) out of the window without an error:

size(480, 120)
ellipse(278, -100, 400, 400) 
ellipse(120, 100, 110, 110)
ellipse(412, 60, 18, 18)

Processing doesn’t have separate functions to make squares and circles. To make these shapes, use the same value for the width and the height parameters for ellipse() and rect().

Example 3-8: Draw with Degrees

If you prefer to use degree measurements, you can convert to radians with the radians() function. This function takes an angle in degrees and changes it to the corresponding radian value. The following example is the same as Example 3-7, but it uses the radians() function to define the start and stop values in degrees:

size(480, 120) 
arc(90, 60, 80, 80, 0, radians(90)) 
arc(190, 60, 80, 80, 0, radians(270)) 
arc(290, 60, 80, 80, radians(180), radians(450)) 
arc(390, 60, 80, 80, radians(45), radians(225))

Example 3-9: Control Your Drawing Order

size(480, 120)
ellipse(140, 0, 190, 190)
# The rectangle draws on top of the ellipse because it
# comes after in the code
rect(160, 30, 260, 20)

Example 3-10: Put It in Reverse

Modify by reversing the order of rect() and ellipse() to see the circle on top of the rectangle:

size(480, 120)
rect(160, 30, 260, 20)
# The ellipse draws on top of the rectangle because it
# comes after in the code
ellipse(140, 0, 190, 190)

You can think of it like painting with a brush or making a collage. The last element that you add is what’s visible on top.

Example 3-11: Set Stroke Weight

The default stroke weight is a single pixel, but this can be changed with the strokeWeight() function. The single parameter to strokeWeight() sets the width of drawn lines:

size(480, 120)
ellipse(75, 60, 90, 90)
strokeWeight(8)  # Stroke weight to 8 pixels
ellipse(175, 60, 90, 90)
ellipse(279, 60, 90, 90)
strokeWeight(20)  # Stroke weight to 20 pixels
ellipse(389, 60, 90, 90)

Example 3-12: Set Stroke Caps

The strokeCap() function changes how lines are drawn at their endpoints. By default, they have rounded ends:

size(480, 120)
strokeWeight(24)
line(60, 25, 130, 95)
strokeCap(SQUARE)   # Square the line endings
line(160, 25, 230, 95)
strokeCap(PROJECT)  # Project the line endings
line(260, 25, 330, 95)
strokeCap(ROUND)    # Round the line endings
line(360, 25, 430, 95)

Example 3-13: Set Stroke Joins

The strokeJoin() function changes the way lines are joined (how the corners look). By default, they have pointed (mitered) corners:

size(480, 120)
strokeWeight(12)
rect(60, 25, 70, 70)
strokeJoin(ROUND)   # Round the stroke corners
rect(160, 25, 70, 70)
strokeJoin(BEVEL)   # Bevel the stroke corners
rect(260, 25, 70, 70)
strokeJoin(MITER)   # Miter the stroke corners
rect(360, 25, 70, 70)

When any of these attributes are set, all shapes drawn afterward are affected. For instance, in Example 3-11, notice how the second and third circles both have the same stroke weight even though the weight is set only once before both are drawn.

Example 3-14: On the Corner

By default, the ellipse() function uses its first two parameters as the x and y coordinate of the center and the third and fourth parameters as the width and height. After ellipseMode(CORNER) is run in a sketch, the first two parameters to ellipse() then define the position of the upper-left corner of the rectangle the ellipse is inscribed within. This makes the ellipse() function behave more like rect(), as seen in this example:

size(480, 120) 
rect(120, 60, 80, 80)
ellipse(120, 60, 80, 80)
ellipseMode(CORNER) 
rect(280, 20, 80, 80)
ellipse(280, 20, 80, 80)

You’ll find these “mode” functions in examples throughout the book. There are more options for how to use them in the Processing Reference.

Example 3-15: Paint with Grays

This example shows three different gray values on a black background:

size(480, 120)
background(0) # Black
fill(204) # Light gray
ellipse(132, 82, 200, 200) # Light gray circle
fill(153) # Medium gray
ellipse(228, −16, 200, 200) # Medium gray circle
fill(102) # Dark gray
ellipse(268, 118, 200, 200) # Dark gray circle

Example 3-16: Control Fill and Stroke

You can disable the stroke so that there’s no outline by using noStroke(), and you can disable the fill of a shape with noFill():

size(480, 120)
fill(153) # Medium gray
ellipse(132, 82, 200, 200) # Gray circle
noFill() # Turn off fill
ellipse(228, −16, 200, 200) # Outline circle
noStroke() # Turn off stroke
ellipse(268, 118, 200, 200) # Doesn't draw! 

Be careful not to disable the fill and stroke at the same time, as we’ve done in the previous example, because nothing will draw to the screen.

Example 3-17: Draw with Color

To move beyond grayscale values, you use three parameters to specify the red, green, and blue components of a color.

Run the code in Processing to reveal the colors:

size(480, 120)
noStroke()
background(0, 26, 51) # Dark blue color
fill(255, 0, 0) # Red color
ellipse(132, 82, 200, 200) # Red circle
fill(0, 255, 0) # Green color
ellipse(228, -16, 200, 200) # Green circle
fill(0, 0, 255) # Blue color
ellipse(268, 118, 200, 200) # Blue circle 

This is referred to as RGB color, which comes from how computers define colors on the screen. The three numbers stand for the values of red, green, and blue, and they range from 0 to 255, the same way that the gray values do. Using RGB color isn’t very intuitive, so to choose colors, use Tools→Color Selector, which shows a color palette similar to those found in other software (see Figure 3-4). Select a color, and then use the R, G, and B values as the parameters for your background(), fill(), or stroke() function.

Figure 3-4. Processing Color Selector

Example 3-18: Set Transparency

By adding an optional fourth parameter to fill() or stroke(), you can control the transparency. This fourth parameter is known as the alpha value, and also uses the range 0 to 255 to set the amount of transparency. The value 0 defines the color as entirely transparent (it won’t display), the value 255 is entirely opaque, and the values between these extremes cause the colors to mix on screen:

size(480, 120)
noStroke()
background(204, 226, 225) # Light blue color
fill(255, 0, 0, 160) # Red color
ellipse(132, 82, 200, 200) # Red circle
fill(0, 255, 0, 160) # Green color
ellipse(228, −16, 200, 200) # Green circle
fill(0, 0, 255, 160) # Blue color
ellipse(268, 118, 200, 200) # Blue circle 

Example 3-19: Draw an Arrow

The beginShape() function signals the start of a new shape. The vertex() function is used to define each pair of x and y coordinates for the shape. Finally, endShape() is called to signal that the shape is finished:

size(480, 120)
beginShape()
fill(153, 176, 180)
vertex(180, 82)
vertex(207, 36)
vertex(214, 63)
vertex(407, 11)
vertex(412, 30)
vertex(219, 82)
vertex(226, 109)
endShape() 

Example 3-20: Close the Gap

When you run Example 3-19, you’ll see the first and last point are not connected. To do this, add the word CLOSE as a parameter to endShape(), like this:

size(480, 120)
beginShape()
fill(153, 176, 180)
vertex(180, 82)
vertex(207, 36)
vertex(214, 63)
vertex(407, 11)
vertex(412, 30)
vertex(219, 82)
vertex(226, 109)
endShape(CLOSE)

Example 3-21: Create Some Creatures

The power of defining shapes with vertex() is the ability to make shapes with complex outlines. Processing can draw thousands and thousands of lines at a time to fill the screen with fantastic shapes that spring from your imagination. A modest but more complex example follows:

size(480, 120)

# Left creature
fill(153, 176, 180);
beginShape()
vertex(50, 120)
vertex(100, 90)
vertex(110, 60)
vertex(80, 20)
vertex(210, 60)
vertex(160, 80)
vertex(200, 90)
vertex(140, 100)
vertex(130, 120)
endShape()
fill(0)
ellipse(155, 60, 8, 8)

# Right creature
fill(176, 186, 163);
beginShape()
vertex(370, 120)
vertex(360, 90)
vertex(290, 80)
vertex(340, 70)
vertex(280, 50)
vertex(420, 10)
vertex(390, 50)
vertex(410, 90)
vertex(460, 120)
endShape()
fill(0)
ellipse(345, 50, 10, 10)