processing-graphics-1-smiley-face

Assignment Standard Operating Procedures

In this assignment you will start learning how to create graphical output using Processing.

Your final program should produce an image like this. The colours do not have to be the same as long as you have followed all the instructions and changed the default values for colors.

Step 1

• [ ] Begin with the following code:

// Set up canvas
void setup() {
  size(700, 500); // Size of canvas
  background(100, 10, 100); // Background color as rgb values
}

void draw() {
  // Your program will be here...

  // Do not forget comments!
}

Step 2

• [ ] Draw three equally sized rectangles across the screen
• [ ] Line them up evenly (same Y coordinates)
• [ ] Spread them out so they are equally spaced
• References:
  • https://processing.org/tutorials/drawing/
  • https://processing.org/reference/rect_.html

Step 3

• [ ] Label the rectangles with text to match the example
• [ ] Line up the text evenly with the rectangles
• Do not worry about changing the font at this time
• References: https://processing.org/reference/text_.html

Step 4

• [ ] Change the stroke, strokeWeight and fill colours for each rectangle
• References:
  • RGB color generator
  • https://processing.org/reference/stroke_.html
  • https://processing.org/reference/strokeWeight_.html
  • https://processing.org/reference/fill_.html

Step 5

• [ ] Draw a large circle, centred on the screen.
• [ ] Change the stroke, strokeWeight and fill colours as you wish.
• References: https://processing.org/reference/ellipse_.html

Step 6

• [ ] Draw two eyes.
• [ ] Change the stroke, strokeWeight and fill colours as you wish.

Step 7

• [ ] Draw the mouth.
• [ ] Change the stroke, strokeWeight and fill colours as you wish.
• References: https://processing.org/reference/line_.html

Step 8

• [ ] Comment your code