Embedded Files
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 code must use comments to label different parts of your drawing
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 left mouse button, it draws one version of the portrait. If they click the right mouse button, it draws a different version of the portrait.
REQUIREMENTS
Part A - Setup Your Program
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
PART ONE - OUTLINING YOUR SHAPE
Watch Shiffman Shapes and Reference (0:17 to 0:39)
Processing Reference - 2D Primitives
1.1 - Set The Window Size
1.1 - Set The Window Size
Write code to draw the head of the thing you're drawing
size(400, 500);
This creates your window that you'll be drawing in.
1.2 - Draw The Head
1.2 - Draw The Head
Write code to draw the head of the thing you're drawing
rect(100, 400, 200, 100);
rect(50, 50, 300, 350);
This code draws the outline of a Robot's head and neck
Try making your own
1.3 - Add Eyes, Nose, and Mouth
1.3 - Add Eyes, Nose, and Mouth
Try adding other shapes to add more detail to your portait
Use the processing reference to explore your options. Use at least two different kinds of shapes.
Tip on Using Shapes
Tip on Using Shapes
Squares and Rectangles have their x and y positions as the top-left corner of the shape
Circles and Ellipses have their x and y positions as the center of the shape
Lines and Triangles don't have any width and height. They just connect two (or three) points.
PART TWO - COMMENTS
Watch Saving, Errors, and Comments (0:39 to 0:44)
Processing Reference - Comment
Processing Reference - Multiline Comment
2.1 - Add Comments
2.1 - Add Comments
Go through your code, and add a comment above each section of the portrait to label
// Robot Neck and Head
rect(100, 400, 200, 100);
rect(50, 50, 300, 350);
PART THREE - COLOR
Watch Colors, RBG, and Transparency (0:44 to 1:04)
Processing Reference - fill()
3.1 - Add Color
3.1 - Add Color
Add color to each shape in your code!
Remember that fill must go *before* each
// Robot Neck and Head
fill(200, 200, 200)
rect(100, 400, 200, 100);
rect(50, 50, 300, 350)
PART FOUR - SETUP AND DRAW
4.1 - Try Autoformat
4.1 - Try Autoformat
Shiffman shows you how to use autoformat.
Make your code messy - add spaces or indentation, then hit Autoformat.
Try doing this using the hotkey. This feature is going to be really important.
4.2 - Add Setup and Draw
4.2 - Add Setup and Draw
Add code to use Setup() and Draw(). Based on Shiffman's lesson, think about which things go in each place.
void setup()
{
size(400, 500);
background(0, 0, 100);
}
void draw()
{
// Robot Neck and Head
fill(200, 200, 200)
rect(100, 400, 200, 100);
rect(50, 50, 300, 350);
}
4.3 - Test Your Program
4.3 - Test Your Program
Right now, it should run and look exactly the same.
PART FIVE - MOUSE PRESSED
Watch Mouse Interaction (1:04 to 1:13)
Processing Reference - Mouse Pressed
Processing Reference - mouseX
Processing Reference - mouseY
5.1 - Play With MouseX and MouseY
5.1 - Play With MouseX and MouseY
We won't actually use mouseX and mouseY in the final version of this project.
But you should be familiar with how to use it
Try using it briefly in your program, then change the code back to the original version
5.2 - Don't Worry About ColorMode
5.2 - Don't Worry About ColorMode
This one is a useful tool, but it isn't required for this course
Don't worry about it too much!
5.3 - The MousePressed Event
5.3 - The MousePressed Event
We can use the mousePressed event to have code that gets called only when the mouse is held down
Copy each part of your drawing into the mousePressed() function
Change each of the values or colors slightly. When the mouse is pressed, you'll now see an alternate version of your portrait... but there's a problem!
PART SIX - YOUR FIRST CONDITIONAL
5.1 - Wait! It's just flashing!
5.1 - Wait! It's just flashing!
Let's think about what's happening in our program:
For one frame when the mouse is pressed, it draws your alternate version
In every other frame, it draws the original version, because the draw() method happens 60 times per second.
5.2 - Adding an if statement
5.2 - Adding an if statement
Let's add a new detail: we'll have two drawings, based on the mouse button pressed and use something called an if statement, which is a type of conditional
void setup()
{
size(400, 500);
}
// Keep draw, but it should be empty
void draw()
{
}
public void mousePressed()
{
// move background here
background(0, 0, 100);
if(mouseButton == LEFT)
{
// all code for original drawing
}
if(mouseButton == RIGHT)
{
// all code for alternate drawing
}
}
EXAMPLE: RUNNING PROGRAM
Page updated
Google Sites
Report abuse