let state = "gathering"

​

// for aniamtion

let expanding = true;

let speed = .5;

let max = 140;

let min = 120;

​

// for counter

let mugwortClicks = 0;

let treeofheavenClicks = 0;

let purslaneClicks = 0;

​

let mugwort;

let treeofheaven;

let purslane;

​

function preload(){

  mugwort = loadImage('mugwort.png');

  purslane = loadImage('purslane.png');

  treeofheaven = loadImage('treeofheaven.png');

}

function setup() {

  createCanvas(windowWidth, windowHeight);

  imageMode(CENTER);

  textAlign(CENTER);

  textSize(width/30);

}

​

function draw() {

  background(220);

  if(state == "gathering"){

    // animation code starts here

    if(expanding == true){

      imageSize = imageSize + speed;

      if(imageSize > max){

        expanding = false;

      } 

    } else if (expanding == false){

      imageSize = imageSize - speed;

      if(imageSize < min){

        expanding = true;

      }

    }

    // end animation code

    image(purslane, width/8,height/8, imageSize, imageSize)

    image(mugwort, width - width/8, height - height/8, imageSize, imageSize)

    image(treeofheaven, width - width/8, height/8, imageSize, imageSize) 

    text("forage plants until \ntincture is complete", width/2, height/2);

    text("purlane: " + purslaneClicks, width/8, height - height/8);

    text("mugwort: " + mugwortClicks, width/8, height - height/8 + 20);

    text("mugwort: " + treeofheavenClicks, width/8, height - height/8 + 40);

  } else if(state == "results"){

   text("this is the results page", width/2, height/2); 

  }

}

​

function mousePressed(){

  // when someone clicks anywhere on the canvas

  if(state == "gathering"){

    if(dist(mouseX, mouseY, width/8, height/8) < 50)

      purslaneClicks = purslaneClicks + 1;

  }else if(dist(mouseX, mouseY, width - width/8, height - height/8) < 50){

   mugwortClicks = mugwortClicks + 1; 

  }else if(dist(mouseX, mouseY, width - width/8, height/8) < 50){

   treeofheavenClicks = treeofheavenClicks + 1; 

  }

}