AI Weather Symphony - Dynamic Soundscape Control the weather and create unique soundscapes! Drag to

function setup() {
  createCanvas(windowWidth, windowHeight);
  globalWind = createVector(0, 0);

  waterHeights = new Array(GROUND_SEGMENTS).fill(0);
  snowHeights = new Array(GROUND_SEGMENTS).fill(0);

  initClouds();

  textFont("sans-serif");
  setupAudio();
}

function initClouds() {
  clouds = [];
  for (let i = 0; i < NUM_CLOUDS; i++) {
    const layer = map(i, 0, NUM_CLOUDS - 1, 0.1, 1);
    clouds.push(new Cloud(layer));
  }
}

function setupAudio() {
  if (typeof Tone === "undefined") {
    console.warn("Tone.js not loaded; audio will be disabled.");
    return;
  }

  // Ambient noises
  windNoise = new Tone.Noise("pink");
  rainNoise = new Tone.Noise("white");
  thunderNoise = new Tone.Noise("brown");

  windGain = new Tone.Gain(0).toDestination();
  rainGain = new Tone.Gain(0).toDestination();
  thunderGain = new Tone.Gain(0).toDestination();
  sunGain = new Tone.Gain(0).toDestination();
  snowGain = new Tone.Gain(0).toDestination();

  // Wind: gently sweeping filter
  const windFilter = new Tone.AutoFilter({
    frequency: 0.15,
    depth: 0.9,
    baseFrequency: 200,
    octaves: 1.5
  }).start();
  windNoise.connect(windFilter);
  windFilter.connect(windGain);

  // Rain: bright high‑passed noise
  const rainFilter = new Tone.Filter(1500, "highpass");
  rainNoise.connect(rainFilter);
  rainFilter.connect(rainGain);

  // Thunder: deep low‑passed noise
  const thunderFilter = new Tone.Filter(120, "lowpass");
  thunderNoise.connect(thunderFilter);
  thunderFilter.connect(thunderGain);

  // Reverb for melodic layers
  const reverb = new Tone.Reverb({
    decay: 6,
    wet: 0.4
  }).toDestination();

  // Sunny pad / melody
  sunSynth = new Tone.PolySynth(Tone.Synth);
  sunSynth.set({
    oscillator: { type: "sine" },
    envelope: { attack: 0.5, decay: 0.3, sustain: 0.6, release: 2.5 }
  });
  sunSynth.connect(sunGain);
  sunGain.connect(reverb);

  // Snowy chimes / pads
  snowSynth = new Tone.PolySynth(Tone.Synth);
  snowSynth.set({
    oscillator: { type: "triangle" },
    envelope: { attack: 1.0, decay: 0.5, sustain: 0.7, release: 4.0 }
  });
  snowSynth.connect(snowGain);
  snowGain.connect(reverb);

  // Clear-weather melody loop
  melodyLoop = new Tone.Loop(time => {
    const scale = ["C4", "E4", "G4", "B4", "D5"];
    const note = scale[int(random(scale.length))];
    sunSynth.triggerAttackRelease(note, "4n", time, 0.5);
  }, "2n");

  // Snowy sparkle loop
  snowLoop = new Tone.Loop(time => {
    const scale = ["A3", "C4", "D4", "E4", "G4"];
    const note = scale[int(random(scale.length))];
    snowSynth.triggerAttackRelease(note, "8n", time, 0.35);
  }, "4n");
}

async function startAudioIfNeeded() {
  if (audioStarted || typeof Tone === "undefined") return;
  try {
    await Tone.start();
    windNoise.start();
    rainNoise.start();
    Tone.Transport.start();
    melodyLoop.start();
    snowLoop.start();
    audioStarted = true;
    console.log("Audio started");
  } catch (e) {
    console.error("Audio init failed", e);
  }
}

function draw() {
  updateWeatherState();
  drawBackgroundGradient();

  if (shouldDrawAurora()) {
    drawAurora();
  }

  drawClouds();

  updateAndDrawWind();
  updateAndDrawPrecipitation();
  updateAndDrawLightning();
  drawGroundAccumulation();

  applyLightningFlash();

  // Lightning charging indicator (on top of scene)
  if (mouseIsPressed && !mouseHasDraggedFar) {
    drawLightningChargeIndicator();
  }

  drawUI();
}

function updateWeatherState() {
  rainIntensity = constrain(rainDrops.length / 300, 0, 1);
  snowIntensity = constrain(snowflakes.length / 300, 0, 1);
  windIntensity = constrain(globalWind.mag() / 20, 0, 1);

  let energy = 0;
  for (let b of lightningBolts) {
    const lifeFactor = 1 - b.age / b.life;
    energy += b.energy * max(0, lifeFactor);
  }
  lightningIntensity = constrain(energy, 0, 1);

  stormFactor = constrain(
    rainIntensity + snowIntensity + lightningIntensity * 1.2,
    0,
    1
  );

  // Tie audio layers to weather
  if (audioStarted && windGain) {
    windGain.gain.rampTo(windIntensity * 0.7, 0.5);
    rainGain.gain.rampTo(rainIntensity * 0.9, 0.5);
    snowGain.gain.rampTo(snowIntensity * 0.7, 1.0);

    const clearAmount = 1 - stormFactor;
    const sunLevel = isNight ? clearAmount * 0.15 : clearAmount * 0.5;
    sunGain.gain.rampTo(sunLevel, 1.0);
  }

  updateAccumulation();
  updateAISuggestionIfNeeded();
}

function updateAISuggestionIfNeeded() {
  const now = millis();
  if (now - lastSuggestionChange < SUGGESTION_INTERVAL) return;
  lastSuggestionChange = now;

  const totalAccum = averageArray(waterHeights) + averageArray(snowHeights);

  if (stormFactor < 0.1) {
    currentSuggestion =
      "Skies are calm. Drag to paint wind streams or click to start a gentle rain.";
  } else if (rainIntensity > 0.5 && windIntensity < 0.3) {
    currentSuggestion =
      "Heavy rain, but the air is still. Drag across the sky to let the wind steer the storm.";
  } else if (windIntensity > 0.5 && rainIntensity + snowIntensity < 0.3) {
    currentSuggestion =
      "Strong winds over dry ground. Add a rain click or Shift+Click for snow to ride the gusts.";
  } else if (snowIntensity > 0.4 && !isNight) {
    currentSuggestion =
      "Snowy daylight. Press N for night and see how the flakes glow against a darker sky.";
  } else if (snowIntensity > 0.4 && isNight && stormFactor < 0.5) {
    currentSuggestion =
      "Quiet snowy night. Keep things clear to let the aurora shimmer, or add lightning for drama.";
  } else if (lightningIntensity > 0.3 && rainIntensity < 0.3) {
    currentSuggestion =
      "A dry electrical storm. Click to add rain and turn the flashes into a full thunderstorm.";
  } else if (totalAccum > 40 && rainIntensity > snowIntensity) {
    currentSuggestion =
      "The ground is soaked. Try switching to snow (Shift+Click) for softer accumulation.";
  } else if (totalAccum > 40 && snowIntensity > rainIntensity) {
    currentSuggestion =
      "Snow is piling up. Use wind drags to sculpt drifting patterns and carve shapes in the snow.";
  } else {
    currentSuggestion =
      "Keep playing with the balance of wind, rain, snow, and lightning to shape the symphony.";
  }
}

function drawBackgroundGradient() {
  // Day / night base colors
  const clearDayTop = color(120, 190, 255);
  const clearDayBottom = color(255, 220, 150); // golden
  const nightTop = color(10, 15, 40);
  const nightBottom = color(5, 5, 15);

  // Storm purple overlay
  const stormTop = color(40, 20, 70);
  const stormBottom = color(80, 40, 90);

  const baseTop = isNight ? nightTop : clearDayTop;
  const baseBottom = isNight ? nightBottom : clearDayBottom;

  const top = lerpColor(baseTop, stormTop, stormFactor);
  const bottom = lerpColor(baseBottom, stormBottom, stormFactor);

  // Vertical gradient using lines
  for (let y = 0; y < height; y++) {
    const t = y / max(1, height - 1);
    const c = lerpColor(top, bottom, t);
    stroke(c);
    line(0, y, width, y);
  }
}

function shouldDrawAurora() {
  // Clear night with relatively low storminess
  return isNight && stormFactor < 0.35;
}

function drawAurora() {
  noStroke();
  const t = frameCount * 0.01;
  const bands = 3;

  for (let b = 0; b < bands; b++) {
    const alpha = 70 - b * 15;
    const col =
      b % 2 === 0
        ? color(120, 255, 200, alpha)
        : color(180, 190, 255, alpha);
    fill(col);
    beginShape();
    for (let x = 0; x <= width; x += 30) {
      const nx = x / width;
      const n = noise(nx * 3 + b * 10, t + b * 50);
      const y = map(
        n,
        0,
        1,
        height * 0.02 + b * 10,
        height * 0.18 + b * 15
      );
      vertex(x, y);
    }
    vertex(width, 0);
    vertex(0, 0);
    endShape(CLOSE);
  }
}

function drawClouds() {
  for (let c of clouds) {
    c.update();
    c.draw();
  }
}

function updateAndDrawWind() {
  // Wind gradually decays
  globalWind.mult(0.98);

  for (let i = windParticles.length - 1; i >= 0; i--) {
    const p = windParticles[i];
    p.update();
    p.draw();
    if (p.isDead()) {
      windParticles.splice(i, 1);
    }
  }
}

function updateAndDrawPrecipitation() {
  // Rain
  for (let i = rainDrops.length - 1; i >= 0; i--) {
    const d = rainDrops[i];
    d.update();
    d.draw();
    if (d.isDead()) {
      rainDrops.splice(i, 1);
    }
  }

  // Snow
  for (let i = snowflakes.length - 1; i >= 0; i--) {
    const s = snowflakes[i];
    s.update();
    s.draw();
    if (s.isDead()) {
      snowflakes.splice(i, 1);
    }
  }
}

function updateAndDrawLightning() {
  for (let i = lightningBolts.length - 1; i >= 0; i--) {
    const b = lightningBolts[i];
    b.update();
    b.draw();
    if (b.isDead()) {
      lightningBolts.splice(i, 1);
    }
  }
}

function drawGroundAccumulation() {
  const segW = width / GROUND_SEGMENTS;
  noStroke();

  // Base ground strip, darkened slightly by storm
  const dryGround = color(50, 60, 40);
  const wetGround = color(30, 35, 45);
  const groundCol = lerpColor(dryGround, wetGround, stormFactor);
  fill(groundCol);
  rect(0, height - 18, width, 18);

  for (let i = 0; i < GROUND_SEGMENTS; i++) {
    const waterH = waterHeights[i];
    const snowH = snowHeights[i];

    if (waterH > 0.1) {
      fill(80, 140, 210, 190);
      rect(i * segW, height - 18 - waterH, segW + 1, waterH);
    }
    if (snowH > 0.1) {
      fill(245, 250, 255, 230);
      rect(i * segW, height - 18 - waterH - snowH, segW + 1, snowH);
    }
  }
}

function groundIndexForX(x) {
  const clampedX = constrain(x, 0, width - 1);
  const idx = floor(map(clampedX, 0, width, 0, GROUND_SEGMENTS));
  return constrain(idx, 0, GROUND_SEGMENTS - 1);
}

function getGroundSurfaceY(x) {
  const idx = groundIndexForX(x);
  const h = waterHeights[idx] + snowHeights[idx];
  const baseY = height - 18; // top of ground strip
  return baseY - h;
}

function updateAccumulation() {
  // Slight decay (evaporation/melting) + lateral smoothing
  const waterDamping = isNight ? 0.9995 : 0.998;
  const snowDamping = isNight ? 0.9998 : 0.9993;

  for (let i = 0; i < GROUND_SEGMENTS; i++) {
    waterHeights[i] *= waterDamping;
    snowHeights[i] *= snowDamping;
  }

  smoothArray(waterHeights, 0.3);
  smoothArray(snowHeights, 0.2);
}

function smoothArray(arr, amt) {
  const tmp = arr.slice();
  for (let i = 0; i < arr.length; i++) {
    const left = tmp[max(0, i - 1)];
    const center = tmp[i];
    const right = tmp[min(arr.length - 1, i + 1)];
    const avg = (left + center + right) / 3;
    arr[i] = lerp(center, avg, amt);
  }
}

function averageArray(arr) {
  if (arr.length === 0) return 0;
  let sum = 0;
  for (let v of arr) sum += v;
  return sum / arr.length;
}

function spawnLightning(x, chargeRatio) {
  const bolt = new LightningBolt(x, chargeRatio);
  lightningBolts.push(bolt);
  if (lightningBolts.length > MAX_LIGHTNING) {
    lightningBolts.shift();
  }

  // Screen flash intensity
  lightningFlash = max(lightningFlash, chargeRatio * 1.3);

  triggerThunder(x, chargeRatio);
}

function triggerThunder(strikeX, strength) {
  if (!audioStarted || typeof Tone === "undefined" || !thunderNoise) return;

  const listenerX = width / 2;
  const dx = abs(strikeX - listenerX);
  const distanceNorm = constrain(dx / (width / 2), 0, 1);

  const delaySeconds = lerp(0.2, 2.8, distanceNorm); // farther = later
  const duration = lerp(1.8, 3.5, strength);
  const peakGain =
    lerp(0.4, 1.0, strength) * lerp(1.0, 0.5, distanceNorm);

  const now = Tone.now();
  const t = now + delaySeconds;

  thunderGain.gain.setValueAtTime(0, t);
  thunderGain.gain.linearRampToValueAtTime(peakGain, t + 0.3);
  thunderGain.gain.linearRampToValueAtTime(0, t + duration);

  thunderNoise.start(t);
  thunderNoise.stop(t + duration);
}

function applyLightningFlash() {
  if (lightningFlash <= 0.01) return;

  noStroke();
  fill(255, 255, 255, lightningFlash * 120);
  rect(0, 0, width, height);

  lightningFlash *= 0.85;
}

function drawLightningChargeIndicator() {
  const pressDuration = millis() - mousePressStartMillis;
  if (pressDuration < 50) return;

  const ratio = constrain(pressDuration / MAX_LIGHTNING_CHARGE, 0, 1);
  const r = map(ratio, 0, 1, 20, 80);

  noFill();
  stroke(255, 255, 255, 160);
  strokeWeight(2);
  ellipse(mouseX, mouseY, r * 2, r * 2);

  noStroke();
  fill(255, 255, 200, 80);
  ellipse(mouseX, mouseY, r * 1.2, r * 1.2);
}

function drawUI() {
  // Controls box
  noStroke();
  fill(0, 0, 0, 130);
  rect(10, 10, 360, 120, 8);

  fill(255);
  textSize(14);
  textAlign(LEFT, TOP);
  text(
    "AI Weather Symphony\n" +
      "Drag: wind currents\n" +
      "Click: rain burst\n" +
      "Shift+Click: snow burst\n" +
      "Hold click (>0.4s): lightning\n" +
      "N: toggle night / day",
    18,
    16
  );

  // AI suggestion box
  const boxY = height - 90;
  fill(0, 0, 0, 140);
  rect(10, boxY, 470, 80, 8);

  fill(230);
  textSize(13);
  textAlign(LEFT, TOP);
  text("AI suggestion:\n" + currentSuggestion, 18, boxY + 10);
}

function mousePressed() {
  mousePressStartMillis = millis();
  mousePressStartPos = createVector(mouseX, mouseY);
  mouseHasDraggedFar = false;
  startAudioIfNeeded();
}

function mouseDragged() {
  if (mousePressStartPos) {
    const d = dist(
      mouseX,
      mouseY,
      mousePressStartPos.x,
      mousePressStartPos.y
    );
    if (d > DRAG_DISTANCE_THRESHOLD) mouseHasDraggedFar = true;
  }

  const dx = mouseX - pmouseX;
  const dy = mouseY - pmouseY;
  const dragVec = createVector(dx, dy);

  if (dragVec.mag() > 0.5) {
    // Blend global wind toward drag direction
    const adj = dragVec.copy().mult(0.25);
    globalWind = p5.Vector.lerp(globalWind, adj, 0.3);

    // Visual wind particles along drag path
    for (let i = 0; i < 5; i++) {
      const jitter = p5.Vector.random2D().mult(0.5);
      const v = dragVec.copy().add(jitter).mult(random(0.1, 0.3));
      const px = lerp(pmouseX, mouseX, random());
      const py = lerp(pmouseY, mouseY, random());
      windParticles.push(new WindParticle(px, py, v));
    }

    if (windParticles.length > MAX_WIND_PARTICLES) {
      windParticles.splice(
        0,
        windParticles.length - MAX_WIND_PARTICLES
      );
    }
  }
}

function mouseReleased() {
  const pressDuration = millis() - mousePressStartMillis;
  const movedDistance = mousePressStartPos
    ? dist(mouseX, mouseY, mousePressStartPos.x, mousePressStartPos.y)
    : 0;

  // If drag moved far, treat purely as wind gesture
  if (mouseHasDraggedFar || movedDistance > DRAG_DISTANCE_THRESHOLD) {
    return;
  }

  if (pressDuration > LIGHTNING_CHARGE_THRESHOLD) {
    // Lightning
    const chargeRatio = constrain(
      pressDuration / MAX_LIGHTNING_CHARGE,
      0,
      1
    );
    spawnLightning(mouseX, chargeRatio);
  } else {
    // Short click: precipitation
    const type = keyIsDown(SHIFT) ? "snow" : "rain";
    spawnPrecipitationBurst(mouseX, mouseY, type);
  }
}

function spawnPrecipitationBurst(x, y, type) {
  const count = type === "rain" ? 80 : 45;
  for (let i = 0; i < count; i++) {
    const offsetX = random(-30, 30);
    const offsetY = random(-10, 10);
    const px = x + offsetX;
    const py = y + offsetY;
    if (type === "rain") {
      rainDrops.push(new PrecipParticle(px, py, "rain"));
    } else {
      snowflakes.push(new PrecipParticle(px, py, "snow"));
    }
  }

  if (rainDrops.length > MAX_RAIN) {
    rainDrops.splice(0, rainDrops.length - MAX_RAIN);
  }
  if (snowflakes.length > MAX_SNOW) {
    snowflakes.splice(0, snowflakes.length - MAX_SNOW);
  }
}

function keyPressed() {
  if (key === "n" || key === "N") {
    isNight = !isNight;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  initClouds();
}

class PrecipParticle {
  constructor(x, y, type) {
    this.type = type; // 'rain' or 'snow'
    this.pos = createVector(x, y);

    if (type === "rain") {
      const baseVy = random(4, 7);
      this.vel = createVector(globalWind.x * 0.4, baseVy);
      this.size = random(6, 10);
      this.mass = 1.0;
    } else {
      const baseVy = random(1, 3);
      this.vel = createVector(globalWind.x * 0.3, baseVy);
      this.size = random(3, 6);
      this.mass = 0.7;
      this.phase = random(TWO_PI); // side-to-side drift
    }

    this.dead = false;
  }

  update() {
    if (this.dead) return;

    // Gravity + wind influence
    const gravity = this.type === "rain" ? 0.25 : 0.06;
    this.vel.y += gravity;
    this.vel.x += globalWind.x * 0.03;

    if (this.type === "snow") {
      // soft side drift using sin
      this.pos.x += sin(this.phase + this.pos.y * 0.03) * 0.3;
    }

    this.pos.add(this.vel);

    // Ground collision / accumulation
    const groundY = getGroundSurfaceY(this.pos.x);
    if (this.pos.y + this.size * 0.5 >= groundY) {
      this.landAtGround();
    }
  }

  landAtGround() {
    const idx = groundIndexForX(this.pos.x);
    if (idx >= 0 && idx < GROUND_SEGMENTS) {
      if (this.type === "rain") {
        waterHeights[idx] += this.mass * 1.2;
      } else {
        snowHeights[idx] += this.mass * 1.5;
      }
    }
    this.dead = true;
  }

  isDead() {
    return (
      this.dead ||
      this.pos.y > height + 50 ||
      this.pos.x < -50 ||
      this.pos.x > width + 50
    );
  }

  draw() {
    if (this.type === "rain") {
      const len = this.size;
      stroke(200, 230, 255, 230);
      strokeWeight(2);
      line(
        this.pos.x,
        this.pos.y - len * 0.5,
        this.pos.x,
        this.pos.y + len * 0.5
      );
    } else {
      noStroke();
      fill(245, 250, 255, 235);
      ellipse(this.pos.x, this.pos.y, this.size, this.size);
    }
  }
}

class WindParticle {
  constructor(x, y, vel) {
    this.pos = createVector(x, y);
    this.vel = vel.copy();
    this.life = int(random(40, 80));
    this.age = 0;
  }

  update() {
    this.pos.add(this.vel);
    // wind influences stream over time
    this.vel.add(p5.Vector.mult(globalWind, 0.02));
    this.vel.mult(0.98);
    this.age++;
  }

  isDead() {
    return (
      this.age > this.life ||
      this.pos.x < -50 ||
      this.pos.x > width + 50 ||
      this.pos.y < -50 ||
      this.pos.y > height + 50
    );
  }

  draw() {
    const alpha = map(this.age, 0, this.life, 220, 0);
    stroke(200, 240, 255, alpha);
    strokeWeight(1);
    line(
      this.pos.x,
      this.pos.y,
      this.pos.x - this.vel.x * 2,
      this.pos.y - this.vel.y * 2
    );
  }
}

class LightningBolt {
  constructor(x, energy) {
    this.energy = constrain(energy, 0.1, 1); // 0..1
    this.life = 40; // frames
    this.age = 0;
    this.points = [];
    this.buildPath(x);
  }

  buildPath(startX) {
    let x = startX;
    let y = 0;
    this.points.push(createVector(x, y));

    const segments = int(10 + this.energy * 14);
    const maxSpread = 30 + this.energy * 40;

    for (let i = 0; i < segments; i++) {
      y += height / segments + random(-10, 10);
      x += random(-maxSpread, maxSpread);
      this.points.push(createVector(x, y));
    }
  }

  update() {
    this.age++;
  }

  isDead() {
    return this.age > this.life;
  }

  draw() {
    const alpha = map(this.age, 0, this.life, 255, 0);
    const coreWeight = 2 + this.energy * 3;
    const glowWeight = 6 + this.energy * 6;

    // Glow
    stroke(180, 200, 255, alpha * 0.6);
    strokeWeight(glowWeight);
    noFill();
    beginShape();
    for (let p of this.points) vertex(p.x, p.y);
    endShape();

    // Core bolt
    stroke(255, 255, 255, alpha);
    strokeWeight(coreWeight);
    beginShape();
    for (let p of this.points) vertex(p.x, p.y);
    endShape();
  }
}

class Cloud {
  constructor(layer) {
    // layer: 0 (far) to 1 (near)
    this.layer = layer;
    this.reset(random(width), random(height * 0.05, height * 0.45));
  }

  reset(x, y) {
    this.x = x;
    this.baseY = y;
    this.y = y;
    this.scale = lerp(0.6, 1.6, this.layer);
    this.w = random(140, 260) * this.scale;
    this.h = random(50, 100) * this.scale;
    this.speedBase = lerp(0.15, 0.5, this.layer);
    this.noiseOffset = random(1000);
  }

  update() {
    // Drift horizontally, affected by wind
    const windInfluence = globalWind.x * 0.04 * (0.4 + this.layer);
    this.x += (this.speedBase + windInfluence);

    // Soft vertical bobbing
    this.y =
      this.baseY +
      sin(frameCount * 0.01 + this.noiseOffset) * 6 * this.layer;

    // Let storminess pull clouds lower
    const stormDrop = lerp(0, height * 0.12, stormFactor) * this.layer;
    this.y += stormDrop;

    const margin = this.w * 1.3;
    if (this.x > width + margin) {
      this.reset(-margin, random(height * 0.05, height * 0.45));
    } else if (this.x < -margin) {
      this.reset(width + margin, random(height * 0.05, height * 0.45));
    }
  }

  draw() {
    // Cloud color depends on time of day and storminess
    const clearDay = color(255, 255, 255);
    const storm = color(120, 120, 140);
    const clearNight = color(210, 220, 255);
    const darkNight = color(70, 80, 120);

    let base =
      isNight
        ? lerpColor(clearNight, darkNight, stormFactor)
        : lerpColor(clearDay, storm, stormFactor);

    const alpha = lerp(80, 210, 0.3 + 0.5 * this.layer * (0.4 + stormFactor));
    const c = color(
      red(base),
      green(base),
      blue(base),
      alpha
    );

    noStroke();
    fill(c);

    // Multi-lobed cloud made of overlapping ellipses
    const segments = 6;
    for (let i = 0; i < segments; i++) {
      const t = map(i, 0, segments - 1, -1, 1);
      const ex = this.x + t * this.w * 0.4;
      const ey = this.y + sin(t * PI) * this.h * 0.15;
      const ew = this.w * random(0.5, 0.8);
      const eh = this.h * random(0.6, 1.0);
      ellipse(ex, ey, ew, eh);
    }
  }
}