​

var memeImage, annoyedImage;

var state = 0;

var r = 0; //rotation for animation

var rSpeed = 0.025; //speed of rotation

var s = 1; 

var sSpeed = 0.01; //image speed

​

/* states:

0 click me 

1 when you don't understand a meme text

2 second image and text "bruh"

*/

function mousePressed() {

  state = state + 1;

  if (state > 2) {

    state = 0;

  }

  console.log("state", state);

}

​

​

​

//images

function preload() {

  memeImage = loadImage("meme.png");

  annoyedImage = loadImage("annoyed.png");

}

​

function setup() {

  var canvas = createCanvas(600, 400);

  canvas.drawingContext.miterLimit = 2;

  background("pink");

  textAlign(CENTER, CENTER);

  fill("white");

  stroke("black");

  textFont("Commic Sans MS");

  textSize(25);

  strokeWeight(2);

  imageMode(CENTER);

}

​

​

function draw() {

  var w = width;

  var h = height;

  var img = memeImage;

  var memeText = "";

  var confuseText = "Meme Confusion";

​

  if (mouseIsPressed) {

   // w *=2; 

   // h *=2;

    tint(255, 255, 255);

  } 

​

  if (state === 0) {

    memeText = "Click me!";

  } else if (state === 1) {

    memeText = "when you are trying to understand what is a meme";

    tint(169,169,169);

  } else if (state === 2) {

    memeText = "Bruh";

     tint(255, 0, 0);

    img = annoyedImage;

  }

  push();

 translate(width / 2, height / 2);

   scale(s);

  image(img,0, 0, w, h);

   s += sSpeed;

  if (s > 2 || s < 1) {

    sSpeed *= -1;}

 pop();

  //rotation for text

  translate(width / 2, height - 60); //translate to the position that the text is at 

  rotate(r);

  text(memeText, 0, 0); //draw it at 0, 0 so that it shows up in the correct place

  r += PI * rSpeed;

  if (r > TWO_PI || r < 0){

    rSpeed *= -1;

  } 

}

​