​

//image

var eiffel65Image;

​

function preload() {

  eiffel65Image = loadImage('eiffel65.jpeg')

}

​

function setup() {

  createCanvas(400, 400);

  textSize(20);

}

​

function mousePressed () {

  currentPanel = currentPanel + 1;

  if (currentPanel > 4) {

    currentPanel = 1;

  }

}

​

function draw() {

  background(250);

  if (currentPanel == 1) {

    //1st comic panel

    //green circle

    fill("green");

    circle(70, 200, 100);

    //text from green character

    fill("black");

    text('Um... Hey man, what color are you?', 20, 130);

    line(150, 150, 130, 170);

    //blue circle

    fill("blue");

    circle(330, 200, 100);

  }

  else if(currentPanel == 2){

    //2nd comic panel

    //green circle

    fill("green");

    circle(70, 200, 100);

    //text from blue character

    fill("black");

    text("I'm blue. Da ba dee da ba di", 130, 130);

    line(260, 170, 240, 150);

    //blue circle

    fill("blue");

    circle(330, 200, 100);

  }

  else if (currentPanel == 3) {

    //3rd comic panel

    //green circle

    fill("green");

    circle(70, 200, 100);

    //dot-dot-dot

    fill("black");

    text('...', 190, 100);

    //blue circle

    fill("blue");

    circle(330, 200, 100);

  }

  else if (currentPanel == 4) {

    //4th comic panel

    //green circle

    fill("green");

    circle(70, 200, 100);

    //text from green

    fill("black");

    text('EIFFEL65?!', 50, 45);

    text('CREATORS OF THE SONG', 10, 70);

    text('BLUE (DA BE DEE)?!', 20, 95);

    text('WHAT ARE YOU', 40, 120);

    text('GUYS DOING HERE?!', 10, 145)

    line(150, 150, 130, 170);

    //blue circle turned to image

    image(eiffel65Image, 230, 100, 150, 150);

  }

}