Smilie-O-Mat

Your Hotshot Objectives

To complete this mission, we have to accomplish four tasks. They are:

Mission Checklist

For this mission, we don't need any additional hardware; however, in tasks 3 and 4, we are going to post status updates to Twitter, so you will need a working Internet connection and a Twitter account to finish these two tasks.

Drawing your face

The first task of our current mission is to draw a face using Processing. We will use drawing primitives such as ellipses and curves and learn how to change the fill and stroke styles. We want to make three parameters changeable in the next task, so we define variables for these parameters and use their values for drawing our face.

Engage Thrusters

Let's draw a face:

1. Open a new sketch and add a setup() and a draw() method:

void setup() {

}

void draw() {

}

2.In the setup() method, we set the window size to 300 x 300 pixels and turn on line smoothing. We also change the color mode to HSB (which stands for Hue, Saturation, and Brightness) instead of RGB to make changing the color of the face easier.

void setup() { size(300,300); smooth(); colorMode(HSB);

}

86

Project 4

3.The first thing we are going to draw is a colored circle. To make the color changeable, we will add an integer variable named col to our sketch, just above the setup() method.

int col = 150;

void setup() {

4.Our control variable col will store values ranging from 0 to 1023 to control the hue value of our smiley. The color() command expects a value between 0 and 255, so we need to remap the value using the map command.

void draw() { background(255); strokeWeight(3);

color c = color(map(col, 0, 1024, 0, 255), 255, 255 ); fill(c);

ellipse(150,150,250,250);

}

5.To create our eyes, we will add two white circles and two smaller black ones for the pupils.

void draw() { background(255); strokeWeight(3);

color c = color(map(col, 0, 1024, 0, 255), 255, 255 ); fill(c);

ellipse(150,150,250,250);

fill(255);

ellipse( 120, 140, 60, 60); ellipse( 180, 140, 60, 60); fill(0);

ellipse( 125, 150, 20, 20); ellipse( 175, 150, 20, 20);

}

6.To make the eyes more expressive, we are going to add eyebrows. Add a new variable to control the angle of the eyebrows.

int eye = 512; int col = 150;

void setup() {

87

Smilie-O-Mat

7.Now, for the eyebrows, add two lines to the code for your face by adding the following code to the draw() method:

void draw() { background(255); strokeWeight(3);

color c = color(map(col, 0, 1024, 0, 255), 255, 255 ); fill(c);

ellipse(150,150,250,250);

fill(255);

ellipse( 120, 140, 60, 60); ellipse( 180, 140, 60, 60); fill(0);

ellipse( 125, 150, 20, 20); ellipse( 175, 150, 20, 20);

line( 100, 100 + map( eye, 0, 1024, -10, 10), 140, 100 - map( eye, 0, 1024, -10, 10) ); line( 160, 100 - map( eye, 0, 1024, -10, 10), 200, 100 + map( eye, 0, 1024, -10, 10) );

}

8. We will add a third control variable to change the mouth from smiling to frowning.

int mouth = 1024; int eye = 512; int col = 150;

void setup() {

9.To draw the mouth, we are going to use a curve shape. The curve definition starts with the beginShape() method and ends with the endShape() method. Between these commands, we will define the control points of the curve using the curveVertex() command.

void draw() { background(255); strokeWeight(3);

color c = color(map(col, 0, 1024, 0, 255), 255, 255 ); fill(c);

ellipse(150,150,250,250);

fill(255);

88

Project 4

ellipse( 120, 140, 60, 60); ellipse( 180, 140, 60, 60); fill(0);

ellipse( 125, 150, 20, 20); ellipse( 175, 150, 20, 20);

line( 100, 100 + map( eye, 0, 1024, -10, 10), 140, 100 - map( eye, 0, 1024, -10, 10) );

line( 160, 100 - map( eye, 0, 1024, -10, 10), 200, 100 + map( eye, 0, 1024, -10, 10) );

noFill();

beginShape(); curveVertex(100, 200); curveVertex(100, 200);

curveVertex(150, 180 + map( mouth, 0, 1024, 0, 50)); curveVertex(200, 200);

curveVertex(200, 200); endShape();

}

10.Now run the sketch and change the values of our control variables to see how they affect the resulting face. The parameters we used in the example so far result in the smiley that you see in the following screenshot:

89