CCSC
  • Home
    • About Us >
      • Contact Us
    • In the news
  • Research
    • Presentations
    • Podcast
    • Resources
  • CS Institute
    • 2022 CSI >
      • module1
      • module2
      • module3
      • module4
    • FAQs
    • 2021 CSI >
      • week1
      • week2
      • week3
      • 2021 CSI Resources
    • 2020 CSI Highlights
    • 2019 CSI Highlights
    • 2017 CSI Highlights
  • Design Lab
    • Updates
    • Playdates
    • Lesson Repositories
    • Reserve hardware
    • Request material
    • Reserve design lab

the art of code

Processing Project Examples
Intro to Processing

The Face
Code

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
Notes:
  • ellipse(x, y, width, height)
  • fill(R, G, B)
  • colorpicker​

Draw It
Code

function setup() {
  createCanvas(500,400);
  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);
}
Instructions:
  • change colors
  • change sizes
  • change shapes
  • add shapes
  • take a screenshot
Resources:
  • p5js editor
  • colorpicker
  • reference
  • examples
Picture
Picture
Picture
Picture
Picture
Picture

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
  • Home
    • About Us >
      • Contact Us
    • In the news
  • Research
    • Presentations
    • Podcast
    • Resources
  • CS Institute
    • 2022 CSI >
      • module1
      • module2
      • module3
      • module4
    • FAQs
    • 2021 CSI >
      • week1
      • week2
      • week3
      • 2021 CSI Resources
    • 2020 CSI Highlights
    • 2019 CSI Highlights
    • 2017 CSI Highlights
  • Design Lab
    • Updates
    • Playdates
    • Lesson Repositories
    • Reserve hardware
    • Request material
    • Reserve design lab