Summer SPARK!
  • Home
  • Web Design
  • Art of Code
  • Game Design
  • Bio-Med Tech-Girls
  • Educators
    • week1
    • week2
    • week3
    • week4
  • About SPARK!
    • Code of Conduct
    • Volunteer Spotlights

the art of code

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
  • select play button
  • rearrange objects to make a face
  • update colors of objects
  • take a screenshot
Resources:
  • p5js editor
  • ellipse(x, y, width, height)
  • fill(R, G, B)
  • Colorpicker​

Draw It

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

void draw() {
 if (mousePressed) {
    background(10, 100, 100);
  }
  stroke(50, 50, 50);
  fill(200, 200, 200);
  ellipse(mouseX, mouseY, 100, 100);
}
Notes: 
  • change colors
  • change sizes
  • change shapes
  • add shapes
  • take a screenshot
Resources:
  • Sketch Playground
  • Colorpicker
  • sample code
  • sketch creations

powered  by

Picture

sponsored  by

  • Home
  • Web Design
  • Art of Code
  • Game Design
  • Bio-Med Tech-Girls
  • Educators
    • week1
    • week2
    • week3
    • week4
  • About SPARK!
    • Code of Conduct
    • Volunteer Spotlights