Minnesota Buffalo Grass

Link to working code

let grass = [];

let grassCount = 100;

let windSlider, lengthSlider;

function setup() {

  createCanvas(600, 400);

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

    grass.push(new Grass(random(width), height, random(10, 40)));

  }

  createP("Wind Strength:");

  windSlider = createSlider(-5, 5, 0, 0.1);

  createP("Grass Length:");

  lengthSlider = createSlider(10, 1000, 25);

}

function draw() {

  background(220);

  let windStrength = windSlider.value();

  let grassLength = lengthSlider.value();

  for (let g of grass) {

    g.display();

    g.sway(windStrength);

    g.setLength(grassLength);

  }

}

class Grass {

  constructor(x, y, len) {

    this.base = createVector(x, y);

    this.len = len;

    this.top = createVector(x, y - this.len);

    this.angle = 0;

  }

  display() {

    noFill();

    stroke(34, 139, 34); // Green color

    strokeWeight(2);

    let controlPt1 = createVector((this.base.x + this.top.x) / 2 + sin(this.angle) * 30, (this.base.y + this.top.y) / 2);

    let controlPt2 = createVector((this.base.x + this.top.x) / 2 + sin(this.angle - PI / 4) * 30, (this.base.y + this.top.y) / 2 - this.len / 2);

    bezier(this.base.x, this.base.y, controlPt1.x, controlPt1.y, controlPt2.x, controlPt2.y, this.top.x, this.top.y);

  }

  sway(strength) {

    this.angle += strength * 0.01;

    this.top.x = this.base.x + sin(this.angle) * strength;

  }

  setLength(len) {

    this.len = len;

    this.top.y = this.base.y - this.len;

  }

}