the art of code

Processing, creative coding for the curious mind
The Face

function setup() {
  createCanvas(500,400);
}

function draw() {
  stroke(255, 255, 255);
  fill(255, 110, 90);
  ellipse(250, 200, 300, 300);
  rect(245, 40, 10, 240);
  ellipse(190, 200, 70, 70);
  ellipse(190, 100, 70, 70);
}
Instructions
  • copy code on left
  • paste into p5js editor
  • press play button
  • rearrange objects to make a face
  • update colors of objects
  • add a hat, ears, nose, etc.
  • take a screenshot

Hints
Draw It

function setup() {
  createCanvas(800,600);
  background(100, 100, 100);
}

function draw() {
 if (mouseIsPressed) {
    background(10, 100, 100);
  }
  stroke(50, 50, 50);
  fill(200, 200, 200);
  ellipse(mouseX, mouseY, 100, 100);
}
Suggestions:
  • experiment with color
  • experiment with size
  • experiment with another shape (rect)
  • create a splatter brush
  • take a screenshot
Resources: