Grass simulation

let strings = [];

const jointLength = 30;

const jointCount = 20;

const friction = 0.95;

const beanRadius = 10;

const F = 0.03;

let player;

const playerColor = [255,255,0,128];

const playerRadius =100;

const grassColor = [98, 120, 66];

const grassDistance = 20;

​

class String {

  constructor(x) {

    this.root = createVector(x, height);

    this.joints = Array(jointCount)

      .fill()

      .map((e) => {

        let alpha = random(256);

        let colour = color([...grassColor, alpha]);

        return { angle: 0, angularVel: 0, color: colour };

      });

  }

​

  collide() {

    let pos = this.root.copy();

    let totalAngle = -PI / 2;

    for (let i of this.joints) {

      if (pos.dist(player) < playerRadius) {

        let sampleL = pos.copy().add(createVector(jointLength, 0).rotate(totalAngle - F));

        let sampleR = pos.copy().add(createVector(jointLength, 0).rotate(totalAngle + F));

        let d = map(pos.dist(player), 0, 100, 5, 1);

        i.angle += F * d * (sampleL.dist(player) > sampleR.dist(player)?-1:1);

        i.angularVel *= 0.9;

      }

      totalAngle += i.angle;

      pos.add(createVector(jointLength, 0).rotate(totalAngle));

    }

  }

  update() {

    let pos = this.root.copy();

    let totalAngle = -PI / 2;

    for (let i of this.joints) {

      i.angle += i.angularVel;

      totalAngle += i.angle;

      i.angularVel -= sin(i.angle) / 200;

      i.angle *= friction;

      let old = pos.copy();

      pos.add(createVector(jointLength, 0).rotate(totalAngle));

      line(old.x, old.y, pos.x, pos.y);

      fill(i.color);

      ellipse(pos.x, pos.y, beanRadius);

    }

  }

}

​

function setup() {

  createCanvas(640, 640);

  stroke("black");

  for (let x = 20; x < width; x += grassDistance) {

    strings.push(new String(x));

  }

}

​

function draw() {

  background("white");

  player = createVector(mouseX, mouseY);

  fill(playerColor);

  ellipse(player.x, player.y, playerRadius);

  strings.forEach((c) => {

    c.collide();

    c.update();

  });

}

​