​

var meme; //first image

var confuse = "Meme confusion"; //this is the second image

var paragraph = "Click Me!";

var annoyedText = "Bruh";

​

//images

function preload() {

  meme = loadImage("meme.png");

  annoyed = loadImage("annoyed.png");

}

​

function setup() {

  var canvas = createCanvas(600, 400);

  canvas.drawingContext.miterLimit = 2;

}

​

function draw() {

  background("pink");

  imageMode(CENTER);

  image(meme, width / 2, height / 2, 400, 500);

  textAlign(CENTER, CENTER);

  fill("black");

  stroke("green");

  strokeWeight(4);

  textFont("Commic Sans MS");

  textStyle(BOLD);

  textSize(50);

  text(confuse, width / 2, 30);

  textStyle(NORMAL);

  textSize(19);

  strokeWeight(2);

  text(paragraph, width / 2, height - 20);

​

  //this is for the first image

  if (mouseIsPressed) {

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

  } //else{paragraph = "Click Me!";} this is not needed if the var is above it (this is a note for me!)

  //this is for the second image

  else if (keyCode) {

    imageMode(CENTER);

    image(annoyed, width / 2, height / 2, 400, 500);

    textSize(60);

    fill("white");

    text(annoyedText, width / 2, height - 20); //text on second image

    tint("#E91E63");

  }

​

   //save('Meme2-interactions.png');

}

​