​

var state = 1

var rectX = 415;

var rectY = 415;

var rectWidth = 65;

var rectHeight = 25;

var rectColor = [255, 255, 255];

var recColor2 = [0, 17, 43];

var rectRandX, rectRandY;

​

// variables for memes

var ricky

var noTouch

​

​

function preload() {

  ricky = createVideo(['Rick Roll.mp4'])

  noTouch = loadImage("please-do-not-touch-posted-rfunny-reddit.png")

}

​

function setup() {

  createCanvas(500, 500);

  drawSlide();

  rectRandX = random(50, 450);

  rectRandY = random(50, 450);

  ricky.hide();

}

​

function drawSlide() {

  background(90, 144, 224);

​

  textSize(25);

  fill(1, 26, 82);

​

  if (state == 1) {

    // first panel

    text(

      "🅸🅽 🆃🅷🅸🆂 🅿🆁🅾🅹🅴🅲🆃 🆈🅾🆄 🆆🅸🅻🅻 🅳🅾 🅰🅲🆃🅸🆅🅸🆃🅸🅴🆂 🆃🅾 🆂🅴🅴 🅼🅴🅼🅴🆂. 🆈🅾🆄 🅲🅰🅽 🅳🅾 🆃🅷🅴🆂 🅷🅾🆆🅴🆅🅴🆁 🅼🅰🅽🆈 🆃🅸🅼🅴🆂 🆈🅾🆄 🆆🅰🅽🆃, 🅱🆄🆃 🆆🅸🅻🅻 🆃🅷🅴🆈 🅱🅴 🆃🅷🅴 🆂🅰🅼🅴? 🆆🅷🅾 🅺🅽🅾🆆🆂",

      50,

      100,

      400

    );

    fill(rectColor);

    rect(rectX, rectY, rectWidth, rectHeight);

    textSize(20);

    fill(0, 0, 0);

    text("Next", 425, 420, 1);

​

  }

​

  if (state == 2) {

    // second panel

    text("🅲🅷🅾🅾🆂🅴 🆈🅾🆄🆁 🅰🅲🆃🅸🆅🅸🆃🆈", 100, 100, 400);

​

    fill(recColor2);

    rect(80, 200, 100, 100);

    rect(280, 200, 100, 100);

    fill(255);

    text("1", 122, 260);

    text("2", 324, 260)

  }

​

  if (state == 3) {

    // third panel, first activity

    textSize(30);

    text("Find the black rectangle", 100, 100);

    rect(121, 83, 2, 18);

    // Draw red rectangles

  fill(255, 0, 0);

  rect(121, 120, 100, 50);

  rect(250, 120, 50, 100);

  rect(350, 150, 75, 25);

  rect(150, 200, 25, 50);

​

  // Draw yellow rectangles

  fill(255, 255, 0);

  rect(200, 200, 25, 50);

  rect(300, 200, 75, 25);

  rect(100, 250, 100, 25);

  rect(350, 250, 25, 50);

​

  // Draw green rectangles

  fill(0, 255, 0);

  rect(150, 250, 100, 25);

  rect(350, 250, 25, 50);

  rect(250, 300, 50, 100);

  rect(100, 350, 100, 50);

  }

  if (state == 4) {

    //forth panel, second activity

    text("Find and click the square", 100, 100);

    fill(rectColor2);

    rect(rectRandX, rectRandY, rectWidth, rectHeight);

  }

  if (state == 5) {

  var assets = [noTouch, ricky];

  var asset = random(assets);

  if (asset == noTouch) {

    image(noTouch, 0, 0, width, height);

  } else {

    ricky.play();

    image(ricky, 0, 0, width, height);

  }

} 

}

​

function mousePressed() {

  if (state == 1) {

    if (

      mouseX > rectX &&

      mouseX < rectX + rectWidth &&

      mouseY > rectY &&

      mouseY < rectY + rectHeight

    ) {

      rectColor = [62, 213, 247];

      if (mouseIsPressed) {

        state = 2;

      }

    }

  }

​

  if (state == 2) {

    if (

      mouseX > 80 &&

      mouseX < 180 &&

      mouseY > 200 &&

      mouseY < 300

    ) {

      rectColor2 = [105, 150, 219];

      if (mouseIsPressed) {

        state = 3;

      }

    }

​

    if (

      mouseX > 280 &&

      mouseX < 380 &&

      mouseY > 200 &&

      mouseY < 300

    ) {

      rectColor2= [105, 150, 219];

      if (mouseIsPressed) {

        state = 4;

      }

    }

  }

​

  if (state == 3) {

    if (mouseX > 117 && mouseX < 125 && mouseY > 83 && mouseY < 101) {

      if (mouseIsPressed) {

        state = 5;

      }

    }

  }

​

  if (state == 4) {

    if (

      mouseX > rectRandX &&

      mouseX < rectRandX + rectWidth &&

      mouseY > rectRandY &&

      mouseY < rectRandY + rectHeight

    ) {

      state = 5;

    }

  }

​

  drawSlide();

 }