Drawing with Processing Part 2:
Text and Fonts, Ellipses, Rectangles and Arcs
Fonts and the text command:
The default font is rarely desired for text in your program. To use a specific font, you use two commands before writing
the text to the screen:
1. Create the font:
PFont someName = createFont ("Arial", 20);
PFont is the actual data type of the font. You can give the font any valid name. If you have multiple fonts, each will
have a unique name.
2. USE the font:
textFont(someName);
This is often the forgotten command. You can create several different fonts in your program, but without using
them, the program will use the default font.
The text command is used to display text on the screen like some of the previous samples. The text command is:
text (“words you want to appear”, x, y);
Use createFont command and choose one of the fonts from the Microsoft Word font list. Be sure to spell exactly. This is
an example of using text with a font:
PFont gamelFont = createFont ("Century", 40);
textFont (gamelFont);
text (“Processing is fun”, 75, 100);
Daily Grade 1:
Fonts and Text
(Save as fontsText)
Create a window 1000 by 500 with a white background. Write a program that will print 6 lines of text on the screen. The
first line should use the default text and say:
This line uses the default text.
Every other line should use a different font from Windows in sizes 10 to 50, incrementing by 10. The text should say “This
line uses …..”, specifying the font and size.
GRADING: Each line of text if worth 16 2/3 points.
Rectangles:
There are 3 different ways to draw a rectangle: CORNER mode, CORNERS mode and CENTER mode. The default
is CORNER mode. That means if you don’t choose a mode, Processing will use CORNER mode.
Drawing Rectangles in CORNER Mode:
Note in this example, the programmer did not type rectMode (CORNER); If it is not typed, Processing assumes you want
corner mode. If you have drawn rectangles in your program previously, Processing continues to use the mode that was
set until you change to a different mode.
Drawing Rectangles in CENTER Mode:
A second way to draw a rectangle involves specifying the center point, along with width and height. If you prefer this
method, first indicate that you want to use the "CENTER" mode before the instruction for the rectangle itself.
Drawing Rectangles in CORNERS Mode:
Finally, we can also draw a rectangle with two points (the top left corner and the bottom right corner). The mode here is
"CORNERS”.
Write the commands at the left to draw these rectangles in the given modes:
_____________________________________
_____________________________________
_____________________________________
_____________________________________
_____________________________________
_____________________________________
Drawing Ellipses :
Once we have become comfortable with the concept of drawing a rectangle, an ellipse() is easy. In fact, it is identical to
rect() with the difference being that an ellipse is drawn where the bounding box of the rectangle would be. The default
mode for ellipse() is "CENTER", rather than "CORNER." You can use any mode that you have for rectangles with ellipses.
The smooth() command:
The smooth() command smoothes the edges of lines drawn to the screen by blending the edges with the nearby pixel
values. If the smooth() command is turned on, noSmooth() will turn it off. Compare the circles above. One is pixilated and
the other is smooth.
Parts of this notes packet are from the book, Learning Processing, by Daniel Shiffman, published by Morgan Kaufmann
Publishers, Copyright 2008 Elsevier Inc. All rights reserved.
Graphics Programs
Daily Grade 2:
Olympic Rings
(Save as OlympicRings on your H drive.)
In this assignment you will write a program that displays a design similar to the Olympic Rings. Use the following functions
(some more than once):
 ellipse()
 size()
 noFill()
 stroke()
 strokeWeight()

You might also want to try out the smooth() function.
Your ellipses must be equidistant from left to right and equidistant top and bottom.
GRADING:
Olympic rings, uncentered
Olympic rings, centered left /right
Olympic rings, centered as specified
Daily Grade 3: House and Car
Write a program to draw a house with a door, 2 windows, and
roof. You should have green grass, a road and a sun in the sky.
Lastly, use custom shape command to draw a car.
** This project will be edited later on in other projects.
To make a later project easier, draw your car so front and
back are the same. Thus when we add another car, you can
use the same code, so the direction will not matter.
(Save as HouseAndCar on your H drive.)
GRADING:
House:
Windows / door / chimney:
Background / sun / grass:
Car:
25 points
15 points
10 points
50 points
50
75
100
Daily Grade 4:
Dice
(Save as Dice on your H drive.)
Write a program to create 6 die. You must draw the die (6 squares) and
insert dots. Dots must be arranged appropriately. You will not get credit if
the dice are not symmetrical. Do your math! You may use point or
ellipses.
GRADING:
1.
2.
3.
4.
5.
6.
17
33
50
67
83
100
Each die is worth 16 2/3 points.
Drawing Arcs :
The arc command is the most-difficult of the shapes. The command basically draws a portion of an ellipse. It is exactly the
same as the ellipse command with added parameters for the start and stop angles of the ellipse. You can use degrees or
a few reserved PI values for your measurements.
The start and stop locations are specified in
radians. If you prefer to use degrees, you may
convert as in several samples on the left.
Basically, 0 is on the right, 90 straight down,
180 to the left and 270 is straight up.
Reserved words for PI values:
PI
HALF_PI
TWO_PI
QUARTER_PI
Arc Worksheet
The arcs on the left are done with fill(0) and the arcs on the right are done with noFill(). Write the commands to
draw the given arcs.
1. ____________________________________________________________________________
2. ____________________________________________________________________________
3. ____________________________________________________________________________
4. ____________________________________________________________________________
5. ____________________________________________________________________________
6. ____________________________________________________________________________
7. ____________________________________________________________________________
8. ____________________________________________________________________________
Daily Grade 5:
SAD / HAPPY
Use the ellipse, text, createFont, textFont and arc
commands to produce the image on the left. Your images
and text must be symmetrical.
(Save as HappySad on your H drive.)
GRADING:
Each face is worth 40 points. Each line of text is worth
10 points.
Quiz Grade 6:
Jack-o-lantern
(Save as jackolantern on your H drive.)
Now you need to add code to your spider web program by drawing a jacko-lantern and “Happy Halloween” using Jokerman font. The teeth are
rectangles on top of the arc for the mouth. (If you have problems with the
placement of the teeth, try changing the color of the teeth to a different
color to determine location, and then change back to orange to match the
pumpkin once placed properly.)
This program will be used on future projects.
GRADING:
Eyes / Nose:
Mouth (arc):
Teeth (at least 3):
Stem:
Font:
Text:
Eyes / Mouth / Nose Centered appropriately:
10 points
15 points
30 points
10 points
10 points
10 points
15 points
Cartoon Project: Test Grade 2
In this assignment you will write a program that displays a cartoon image of your choice. You can use any drawing
functions that you would like. Find an image on the internet and get approval. It must be worthy of an A! You can use
one of these if you like, but no two students may choose the same image.