moving wiggle_lines

// schien@mail.ncku.edu.tw, DPD 2025

​

// based on the forked original

// I asked ChatGPT "I have a p5.js program that show a side view of tall grasses. I want to make them move like brown by mild wind. What are possible revisions?"

// The following code is produced by ChatGPT, otherwise stated

​

let segments = 3;

let windStrength = 0;

let windSpeed = 0.05; // Controls how quickly the wind changes

let swayFactor = 0.02; // Controls how much sway each grass blade has

​

function setup() {

  createCanvas(500, 500);

  noFill();

  strokeWeight(5);

  frameRate(12); // modified by schien@mail.ncku.edu.tw

}

​

function draw() {

  background(255);

​

  // Adjust the wind strength over time to simulate gusts of wind

  windStrength += random(-windSpeed, windSpeed);

  // Use noise to make the wind gusts feel more natural

  let noiseFactor = noise(frameCount * swayFactor) * 30;

​

  // Draw many wiggle lines (grasses)

  for (let i = 10; i < 490; i += 10) {

    wiggle_line(i, 10, i, 450 + noiseFactor);

  }

}

​

function wiggle_line(sx, sy, ex, ey) {

  let xstep = (ex - sx) / segments;

  let ystep = (ey - sy) / segments;

  let lastx = sx;

  let lasty = sy;

  let y = sy;

  let x = sx;

​

  // Simulate the sway by introducing a directional force based on wind

  let sway = sin(windStrength) * 15;  // Wind effect on the sway

​

  for (let i = 0; i < segments; i++) {

    x = x + xstep;

    x = x + random(20) - 10 + sway; // Random wiggle + wind sway effect

    y = y + ystep;

    y = y + random(50) - 25; // Slight random wiggle for natural effect

    stroke(20, 50, 70);

    line(x, height - y, lastx, height - lasty);

    lastx = x;

    lasty = y;

  }

}

​