Code as a brush

I do / We do / You do

• I do: 15 min: show a 30-line p5 sketch and change only the seed.
• We do: 10 min: class asks the tutor to add one parameter and compares the sketch before and after.
• You do: 25 min: each student starts from a sketch and asks for three controls.

Deliverable: One p5 sketch with three controls plus the seed it started from.

Stretch: Add a secondary palette that flips on a key press.

AI tutor aiGuidance excerpt

- nudge: Ask which parameter the student wants to control before asking for code.
- nudge: If the sketch breaks, compare the last working version to the new code.
- require: Do not create variables named scale, rotate, color, image, map, random, width, height, text, fill, stroke, or noise.

Starting code

let seed = 327;
let density = 12;
let palette = ['#0a0a0a', '#c01818', '#ffffff'];

function setup() {
  createCanvas(720, 720);
  noStroke();
}

function draw() {
  randomSeed(seed);
  background(palette[2]);
  for (let x = 40; x < width; x += width / density) {
    for (let y = 40; y < height; y += height / density) {
      let r = random(8, 32);
      fill(random(palette));
      circle(x + random(-12, 12), y + random(-12, 12), r);
    }
  }
}

I do / We do / You do

• I do: 15 min: show a three.js rotating mesh and a GLSL fragment shader.
• We do: 10 min: class picks one path and adds the first parameter together.
• You do: 25 min: each student ships one three.js scene or one GLSL fragment shader.

Deliverable: One three.js scene with camera control or one GLSL fragment shader with two uniforms.

Stretch: Pair an audio channel using Tone.js, following the ij8 Tone.js guardrails.

AI tutor aiGuidance excerpt

- nudge: Ask the student to describe the behavior before requesting a library or technique.
- nudge: For Tone.js, keep pitches above laptop-speaker range and route through .toDestination().
- require: For event triggers, do not pass Tone.now() as the time argument; for scheduled repeats, use the callback time.

Starting code

// three.js starter: avoid variables named after p5 globals.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 4;
const mesh = new THREE.Mesh(
  new THREE.IcosahedronGeometry(1, 2),
  new THREE.MeshNormalMaterial({ wireframe: false })
);
scene.add(mesh);
function animate(){
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.013;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();