1. Simple Abstract Composition

Teaches: rectangles, circles, fill + noStroke

https://editor.p5js.org/citizeninvention/sketches/4fJQYMIag

Screenshot 2025-11-21 at 2.57.37 PM.png

function setup() {
  createCanvas(400, 400);
  background(240);
  }
  function draw (){

  fill(255, 100, 100);
  rect(50, 50, 120, 120);

  fill(100, 150, 255);
  circle(260, 120, 120);

  fill(200, 200, 80);
  rect(150, 220, 200, 120);
}


2. Mondrian-Style Grid

Teaches: lines, strokeWeight, primary color fills

https://editor.p5js.org/citizeninvention/sketches/dD4Sw0HB9

Screenshot 2025-11-21 at 2.59.32 PM.png

function setup() {
  createCanvas(400, 400);
  background(255);
  
 }
 
 function draw(){

  strokeWeight(8);

  // Big rectangles
  fill(255, 0, 0); rect(0, 0, 200, 200);
  fill(255);       rect(200, 0, 200, 200);
  fill(0, 0, 255); rect(0, 200, 200, 200);
  fill(255, 255, 0); rect(200, 200, 200, 200);

  // Grid lines
  stroke(0);
  line(200, 0, 200, 400);
  line(0, 200, 400, 200);
}


3. Minimal Landscape

Teaches: layering shapes, color harmony

https://editor.p5js.org/citizeninvention/sketches/xjeXB79eY

Screenshot 2025-11-21 at 3.02.39 PM.png

function setup() {
  createCanvas(500, 300);
  background(135, 206, 235); // sky blue
}

function draw(){
  // sun
  fill(255, 204, 0);
  circle(80, 80, 80);

  // mountains
  fill(120);
  triangle(50, 250, 200, 80, 350, 250);

  fill(150);
  triangle(150, 250, 300, 100, 450, 250);

  // grass
  fill(34, 139, 34);
  rect(0, 250, width, 50);
}