Interactive Design

  by htet aung lin

  3/11/2024

  "Troll meme png sticker" imgae by Rawpixel

  https://www.rawpixel.com/image/6538212/png-face-sticker

  "rageface_laughing_lol_crazy_clean" image by MEME TN

https://www.flickr.com/photos/meme_tn/6878032000/in/photostream/

​

  "rageface_fuck_that_bitch_yao_ming" image by MEME TN

https://www.flickr.com/photos/meme_tn/6878031312/in/photostream/

​

  "rageface_angry_y_u_no" image by MEME TN

  https://www.flickr.com/photos/meme_tn/7024128881/in/photostream/

*/

var state = 1;

var meme;

var meme1;

var meme2;

var meme3;

function preload() {

  meme = loadImage("meme.png");

  meme1 = loadImage("meme_1.jpg");

  meme2 = loadImage("meme_2.jpg");

  meme3 = loadImage("meme_3.jpg");

}

​

function setup() {

  createCanvas(400, 400);

  textSize(30);

  textFont("Comic Sans MS");

}

​

function mousePressed() {

  state++;

  if (state == 5) {

    state = 1;

  }

}

​

function draw() {

  background("white");

  if (state == 1) {

    //first panel

    image(meme, 130, 150, 150, 150);

    text("Brain not Braining", 80, 150);

    fill("red");

  }

​

  if (state == 2) {

    // second panel

    image(meme1, 150, 60, 150, 150);

    text("Money not Moneying", 80, 40);

    fill("green");

  }

​

  if (state == 3) {

    // third panel

    image(meme2, 60, 200, 150, 150);

    text("Nothing Understanding", 20, 180);

    fill("purple");

  }

​

  if (state == 4) {

    // fourth panel

    image(meme3, 130, 130, 150, 150);

    text("Hell the what happening", 30, 300);

    fill("blue");

  }

}

​