const BGCOLOR = [23, 195, 50];
const TGSTRING = "touch gra$s ";
let allGrassProfile = [];
gCOLOR = color(41, 157, 0);
createCanvas(windowWidth, windowHeight);
let field = select('field');
describe('Background of pattern created by repeating the phrase "touch grass". Hovering over the letters makes them morph into flowers.');
if (!touchMode && touches.length > 0) {
for (let grassProfile of allGrassProfile) {
grassProfile.showGrowth();
while (!grass || grass.elt.getBoundingClientRect().top < window.innerHeight) {
for (let curGrassType of TGSTRING) {
grass = createSpan(curGrassType+'​');
allGrassProfile.push(new GrassProfile(grass, curGrassType));
constructor(grass, grassType) {
this.grassType = grassType;
this.position = this.getPosition();
if(this.grassType == ' ') return;
if(touchMode) this.checkGrowthTM();
this.grass.style('font-weight', this.growth);
this.grass.style('color', this.getColor());
this.growth = Math.max(this.growth*0.9, 1);
this.distToMouse = dist(mouseX, mouseY, this.position.x, this.position.y);
if (this.distToMouse < 300) {
this.growth = Math.min(this.growth+2500/(this.distToMouse+2), 1000);
if (mouseIsPressed && this.distToMouse < 350) {
this.growth = Math.min(this.growth+(350-this.distToMouse), 1000);
this.growth = Math.round(this.growth);
this.growth = Math.max(this.growth*0.95, 1);
for (let touch of touches) {
distToTouch = dist(touch.x, touch.y, this.position.x, this.position.y);
this.growth = Math.min(this.growth+(175-distToTouch), 1000);
this.growth = Math.round(this.growth);
x: (this.grass.elt.getBoundingClientRect().left + this.grass.elt.getBoundingClientRect().right)/2,
y: (this.grass.elt.getBoundingClientRect().top + this.grass.elt.getBoundingClientRect().bottom)/2
if(this.growth > CTHRESHOLD) {
let amt = (this.growth - CTHRESHOLD)/(1000 - CTHRESHOLD);
color = lerpColor(gCOLOR, fCOLORS[this.grassType], amt);
function updateGrassPos() {
for (let grassProfile of allGrassProfile) {
grassProfile.position = grassProfile.getPosition();
setInterval(updateGrassPos, 500);