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);

background(0, 0, 100);

}


void draw()

{

}

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);

background(0, 0, 100);

}


void draw()

{

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()

{

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