Day 4 – Color: Processing

Vocabulary of Color

  • Hue – the name of the color
  • Saturation – brilliance or intensity of the color
  • Transparency – how much you can see through a layer
  • Value – lightness or darkness of the color

Painting with code

void setup() {
  background(100, 100, 100);

void draw() {
 if (mousePressed) {
    background(255, 255, 255);

  fill(200, 200, 200);
  ellipse(mouseX, mouseY, 100, 100);


  • Copy code above and paste into Sketch Playground.
  • Change mode from P5js to Processing.js.
  • Update color, run, paint and take a screenshot.
  • Add another shape and give it another color.
  • Adjust transparency level for one shape. For example, fill (200, 100, 200, T) where T can be set from 0 to 100. Run, paint and take a screenshot.
  • Keep experimenting until it’s time to reflect. Be sure to capture your experiments along the way.
  • On your Padlet share your favorite screenshot(s) and reflect: What did you enjoy about activity? What did you find challenging?

Leave a Reply

Your email address will not be published. Required fields are marked *