Draw a picture made of ellipses and rectangles!

For example, you could make a self-portrait, an alien creature, or something more abstract. It'll just be black and white for now, we'll get to color in the next video.

You can work on your own pace, but we recommend approximately ten minutes on this assignment before moving on.

Reminders
To draw a rectangle: rect(a,b,c,d);
To draw an ellipse: ellipse(a,b,c,d);

a — X (horizontal) location of the shape's upper-left corner
b — Y (vertical) location of the shape's uppper-left corner
c — width of the shape
d — height of the shape

For more, check out the rectangle and ellipse pages on processing.org.

Add color to your design!

You can build off the example below or add to your previous design by selecting "My Code from Last Lesson" under the "Code" menu below.

You can work on your own pace, but we recommend approximately ten minutes on this assignment before moving on.

Reminders
Set the background color: background(r,g,b);
Set the outline color: stroke(r,g,b);
Set the interior color: fill(r,g,b);

Don't forget, you need to call stroke() and fill() before you draw the shape!

r — amount of red, from 0 (none) to 255 (maximum)
g — amount of green, from 0 (none) to 255 (maximum)
b — amount of blue, from 0 (none) to 255 (maximum)

For more, check out the background, stroke and fill pages on processing.org.

Animate your program using mouseX and mouseY!

You can build off the example below or add to your previous design by selecting "My Code from Last Lesson" below.

You can work on your own pace, but we recommend approximately ten minutes on this assignment before moving on.

If you forget the syntax for setup() and draw(), here is a reminder!

void setup() {
  size(500,400);
}

void draw() {
  background(0,0,0);
  fill(255,255,255);
  ellipse(mouseX,mouseY,60,60);
}

We recommend a maximum canvas size of 500 by 400 pixels for this tutorial, but feel free to experiment your window skinnier or shorter!

For more, check out the mouseX and mouseY pages on processing.org.

Use a mouse press to change what your program is doing!

You can build off the example below or add to your previous design by selecting "My Code from Last Lesson" below.

You can work on your own pace, but we recommend approximately ten minutes on this assignment before moving on.

Here is an example of drawing a different color depending on whether the mouse is pressed.

void setup() {
  size(500,400);
}

void draw() {
  background(0);
  if (mousePressed) {
    fill(0,255,0);
  } else {
    fill(255,0,0);
  }
  ellipse(mouseX,mouseY,60,60);
}

You could also consider drawing the background only when the mouse is pressed. For example:

void setup() {
  size(500,400);
  background(0);
}

void draw() {
  if (mousePressed) {
    background(0);
  }
  ellipse(mouseX,mouseY,60,60);
}

Thanks for participating!

If you'd like to learn more, we encourage you to visit the Processing web site as well as the other wonderful tutorials at code.org. If you have questions or feedback about the tutorial, we'd love to hear from you!

This tutorial was created for Computer Science Education Week. To register your participation, please visit code.org.