PSEUDOCODE & VARIABLES
THIS CHALLENGE COMES FROM A BOOK PROCESSING CREATIVE CODING AND GENERATIVE ART IN PROCESSING 2 BY IRA GREENBERG, DIANNA XU, AND DEEPAK KUMAR.
The diagram to the left shows a face divided into its basic proportions. Not everyone's face is exactly like this but this picture is useful for learning about the relationships between images we draw on the screen.
Pseudocode is used to describe the steps a program will take to complete a task, unrelated to the actual code used to write the program. In programming, there are symbols for math manipulations
|
Let's start with some pseudocode (in yellow, below) for the eyes on a face, like the one at the left.
1. set the height of the face to 600 //This 600 could be any number. It is just an initial size for the face. All the other numbers will relate to this one.
2. set the width of the face equal to the height of the head * 5 / 7
//The width of the head now DEPENDS on the height of the face. If the height changes, so will the width, automatically. It is now easy to SCALE the size of this face.
Variables store values that are used later in a program.
A program for these two steps of pseudocode:
// simple head
// size of window: 600 = width (x), 800 = height (y)
createCanvas (600, 800);
// draw all ellipses from the top left corner instead of the center
ellipseMode (CORNER);
// DECLARE AND INITIALIZE VARIABLES HERE
float headHeight = 600;
float headWidth = headHeight * 5 / 7;
// top x,y corner for head
var head_x = (width-headWidth)/2;
var head_y = (height-headHeight)/2;
//BEGIN DRAWING HERE
//head
ellipse (head_x, head_y, headWidth, headHeight);
We have a HEAD! (It looks like an egg head, but it is a head.)
1. set the height of the face to 600 //This 600 could be any number. It is just an initial size for the face. All the other numbers will relate to this one.
2. set the width of the face equal to the height of the head * 5 / 7
//The width of the head now DEPENDS on the height of the face. If the height changes, so will the width, automatically. It is now easy to SCALE the size of this face.
Variables store values that are used later in a program.
- A var stores a number.
- The programmer (you) makes up the name of the variable for the computer to use (this is called declaring).
- The programmer tells the computer what value to store there (this is called initializing).
A program for these two steps of pseudocode:
// simple head
// size of window: 600 = width (x), 800 = height (y)
createCanvas (600, 800);
// draw all ellipses from the top left corner instead of the center
ellipseMode (CORNER);
// DECLARE AND INITIALIZE VARIABLES HERE
float headHeight = 600;
float headWidth = headHeight * 5 / 7;
// top x,y corner for head
var head_x = (width-headWidth)/2;
var head_y = (height-headHeight)/2;
//BEGIN DRAWING HERE
//head
ellipse (head_x, head_y, headWidth, headHeight);
We have a HEAD! (It looks like an egg head, but it is a head.)
CHALLENGES
(Be careful to "Save As" with a new name, for each challenge so that you don't overwrite the original program.)
1. Can you make the head half as big? How many things need to change in your program? (call this one Tiny Head)
2. Can you double its size? How many things need to change in your program? (call this one Big Head)
(Be careful to "Save As" with a new name, for each challenge so that you don't overwrite the original program.)
1. Can you make the head half as big? How many things need to change in your program? (call this one Tiny Head)
2. Can you double its size? How many things need to change in your program? (call this one Big Head)
Adding Eyes - Pesudocode
3. set the width of each eye equal to the width of the head / 5 // Divide the width of the face by 5 and that is the width of each eye 4. set the height of each eye equal to the width of an eye / 2 //eyes are 1/2 as tall as they are wide. 5. set the position of the eyes along the y-axis equal to the height of the head / 2 //This puts the eyes in the center of the face on the y axis (height) 6. set the x position of the eyes 1 eye width apart and center them on the face //This is how to center them on the face, along the x axis (width) |
//ADD THIS TO THE DECLARE AND INITIALIZE PART OF YOUR PROGRAM
var eyeWidth = headWidth / 5; var eyeHeight = eyeWidth / 2; var leftEye_x = head_x + eyeWidth; var rightEye_x = head_x + eyeWidth*3; var eye_y = head_y+headHeight/2-eyeHeight/2; // ADD TO DRAWING //left eye ellipse (leftEye_x, eye_y, eyeWidth, eyeHeight); //right eye ellipse(rightEye_x, eye_y, eyeWidth, eyeHeight); CHALLENGES 3. Can you make the eyes round instead? (width = height) (Save As...Round Eyes) 4. Can you make the eyes squint more (not as tall) (Save As...Squinty Eyes) UBER CHALLENGE 5. Can you add variables for a left pupil and right pupil, make them round, and center them in the eye? Adding Nose & Mouth - Pseudocode set the y position of the nose equal to 1/2 the distance between the eyes and the bottom of the head set the y position of the mouth equal to 1/3 the distance between the nose and the bottom of the head set the height of the mouth equal to 1/3 the distance between the nose and the bottom of the head set the height of each lip equal to the mouth height / 2 |