Practice 2.1: Portrait
Make a program that draws an interactive portrait
REQUIREMENTS
Setup
You must set a window size of 400 x 500
Your program must set a background color
Features
Your face must have: Head, eyes, nose, mouth
It can be a person, alien, robot, or any humanoid figure you'd like.
Feel free to add other features (ex: ears, glasses, eyebrows, etc.)
Organization
Your program must be divided up into methods to keep it organized
For example, a method called drawEyes() would draw the eyes
Shapes and Color
Your program must use at least two of the following shapes: ellipse, rectangle, triangle
Your program must use at least four different colors
When the user presses the mouse button, all the features should change in some way
Ex: Color shift, change size, move location, etc.
STEP BY STEP
Part A - Setup Your Program
Your program needs to start with two methods
setup() is called once at the start of your program
draw() is called every single frame
void setup()
{
size(400, 500);
}
void draw()
{
background(0, 0, 100);
}
Part B - Draw The Head
Write a method that draws the head itself, called drawHead()
You'll then want to call it in from the draw() method
Hint: You can use stroke() to change the color of outlines, or noStroke() to disable them all-together.
void setup()
{
size(400, 500);
}
void draw()
{
background(0, 0, 100);
drawHead();
}
void drawHead()
{
// Color
fill(200, 200, 200);
// Robot Neck
rect(100, 400, 200, 100);
// Robot Head
rect(50, 50, 300, 350);
}
Part C - Repeat For Other Elements
Write methods for eyes, ears, nose, and mouth
Call them all in the draw() method.
Hint: Order matters! The last thing you draw is always on top.
void draw()
{
background(0, 0, 100);
drawHead();
drawEyes();
drawNose();
drawMouth();
}
Part D - Add Changes
Add if statements to check if the mouse is pressed in each method
If it is pressed, set one color.
Otherwise, set another color
You may also choose to change a different aspect:
Change the size, shape, and/or location of a feature
void drawHead()
{
// Color
if(mousePressed)
{
fill(255, 0, 0);
}
else
{
fill(200, 200, 200);
}
// Robot Neck
rect(100, 400, 200, 100);
// Robot Head
rect(50, 50, 300, 350);
}
EXAMPLE: RUNNING PROGRAM
HOLD MOUSE
