p5Coherence

Does your p5.js sketch reflect your design intent? Describe your concept, paste your sketch. See which parts of your thinking have a home in your code — and which do not.

for p5.js sketches · AI handles language · Code handles judgment

Sign in to use p5Coherence

A structural mirror for p5.js sketches. Free for students. Enter your name and email to get started.

Your Concept Note

What makes a good concept note?

Needed Name the distinct parts of your project — what does each part do?

Needed Describe how the parts relate — what responds to what?

Ideal Mention inputs and outputs — what does the user do, what happens?

Ideal Note visual or generative systems — colour, noise, animation

Your p5.js Sketch

// A generative landscape that responds to sound
let mountains = [];
let soundLevel = 0;
let palette;

function setup() {
  createCanvas(800, 600);
  palette = new ColorPalette();
  initMountains();
}

function draw() {
  background(palette.skyColor());
  updateSoundInput();
  drawLandscape();
  drawParticles();
  handleUserInteraction();
}

function initMountains() {
  for (let i = 0; i < 5; i++) {
    mountains.push({
      height: random(100, 300),
      offset: random(1000),
      speed: random(0.001, 0.005)
    });
  }
}

function drawLandscape() {
  for (let layer = 0; layer < mountains.length; layer++) {
    let mountainColor = palette.mountainColor(layer);
    fill(mountainColor);
    noStroke();
    beginShape();
    vertex(0, height);
    for (let x = 0; x <= width; x += 5) {
      let noiseVal = noise(x * 0.005 + mountains[layer].offset);
      let peakHeight = map(noiseVal, 0, 1, height - mountains[layer].height, height - 50);
      vertex(x, peakHeight);
    }
    vertex(width, height);
    endShape(CLOSE);
  }
}

function updateSoundInput() {
  soundLevel = map(sin(frameCount * 0.05), -1, 1, 0, 1);
}

function applySoundToLandscape() {
  for (let m of mountains) {
    m.height = lerp(m.height, m.height * (1 + soundLevel * 0.3), 0.1);
  }
}

let particles = [];

function drawParticles() {
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].display();
    if (particles[i].isDead()) {
      particles.splice(i, 1);
    }
  }
}

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D().mult(random(1, 3));
    this.life = 255;
    this.size = random(3, 8);
  }
  update() { this.pos.add(this.vel); this.life -= 3; this.vel.mult(0.98); }
  display() { noStroke(); fill(255, this.life); ellipse(this.pos.x, this.pos.y, this.size); }
  isDead() { return this.life <= 0; }
}

function handleUserInteraction() {
  if (mouseIsPressed) {
    for (let i = 0; i < 5; i++) {
      particles.push(new Particle(mouseX, mouseY));
    }
  }
}

function mouseClicked() {
  palette.shift();
}

class ColorPalette {
  constructor() { this.hueBase = random(360); }
  skyColor() { colorMode(HSB); let c = color(this.hueBase, 30, 90); colorMode(RGB); return c; }
  mountainColor(layer) { colorMode(HSB); let c = color((this.hueBase + layer * 15) % 360, 40 + layer * 10, 70 - layer * 10); colorMode(RGB); return c; }
  shift() { this.hueBase = (this.hueBase + 30) % 360; }
}

0 lines p5.js / JavaScript

Concept units identified from your note

Alignment Map

How your concept structure maps to your code structure