interactive comic template

  3/4/2024

*/

​

var x = 100;

var y = 100;

var state = 1;

var timer = 0;

​

function setup() {

  createCanvas(400, 400);

  textSize(30);

  textFont("Comic Sans MS");

  // frameRate(5);

}

​

function draw() {

  background(220);

​

  timer++; // count up by 1 per frame

  text(timer, 20, 30);

  text(state, 20, 60);

  // reset when count is 120

  if (timer == 120) {

    timer = 0; // set timer back to 0

​

    // add 1 to state

    state++;

    // after 3, reset to 1

    if (state > 3) {

      state = 1;

    }

  }

​

  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

}

​