Minnesota Buffalo Grass
Click the link or highlight the code and copy it.
Then, go to p5js.org and paste the code in the editor.
Hit the "run" button, watch what happens.
Make adjustments to the code, the hit the "run" button again.
Repeat. :)
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;
}
}