interactive comic template

  3/4/2024

*/

​

var x = 100;

var y = 100;

var state = 1;

​

function setup() {

  createCanvas(400, 400);

  textSize(30);

  textFont("Comic Sans MS");

}

​

function mousePressed() {

  state++;

  if (state == 4) {

    state = 1;

  }

}

​

function draw() {

  background(220);

  // text(state, 20, 30);

​

​

  if (state == 1) {

    // first panel

    x = 100;

    fill('black');

    text("Hello!", x + 100, y);

    fill('red');

  }

​

  if (state == 2) {

    // second

    x = 300;

    fill('black');

    text("Hi!", x - 100, y);

    fill('blue');

  }

  if (state == 3) {

    x = 100;

    fill('black');

    text("Goodbye!", x + 100, y);

    fill('red');

  }

  // character

  circle(x, y, 100); // head

  circle(x - 20, y - 20, 10); // left eye

  circle(x + 20, y - 20, 10); // right eye

  rect(x - 25, y + 20, 50, 10, 5); // mouth

}

​