const patchSpace = 10;

​

const grassWidth = 6;

const grassHeight = 40;

​

let grassShader;

​

function preload() {

  grassShader = loadShader("grass.vert", "grass.frag");

  p5.Shader.prototype.setMatrixUniforms = p5.Shader.prototype._setMatrixUniforms;

  p5.Shader.prototype.updateModelMatrix = function() {

    const viewMatrix = this._renderer._curCamera.cameraMatrix;

    const modelViewMatrix = this._renderer.uMVMatrix;

​

    const modelMatrix = new p5.Matrix();

    modelMatrix.invert(viewMatrix);

​

    modelMatrix.mult(modelViewMatrix);

    this.setUniform("uModelMatrix", modelMatrix.mat4);

  }

  p5.Shader.prototype._setMatrixUniforms = function() {

    this.setMatrixUniforms();

    this.updateModelMatrix();

  }

}

​

function setup() {

  createCanvas(400, 400, WEBGL);

  shader(grassShader);

}

​

function draw() {

  background(220);

  rotateX(-PI/6);

  rotateY(mouseX/width * TAU);

  grassShader.setUniform("millis", millis())

  drawGrass();

}

​

function drawGrass() {

  noStroke();

  fill(0, 200, 0);

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

    for(let j = 0; j < patchSize; j ++) {

      push();

      const x = (i - patchSize) * patchSpace;

      const z = (j - patchSize) * patchSpace;

      translate(x, 0, z);

      quad(-grassWidth/2, 0, grassWidth/2, 0, grassWidth/2, -grassHeight, -grassWidth/2, -grassHeight);

      pop();

    }

  }  

}