​

function setup() {

    createCanvas(400, 300).parent('p5-canvas');

    drawPanel();

}

​

function draw() {

    if (comicPanel === 0) {

        background(240);

        fill(0);

        textSize(18);

        textAlign(CENTER, CENTER);

        text("Panel 1: The Hero Begins", width / 2, height / 2 - 30);

        ellipse(width / 2, height / 2 + 20, 50, 50); 

        text("Our hero stands at the edge of a mysterious forest.", width / 2, height / 2 + 80);

    } 

    else if (comicPanel === 1) {

        background(255, 220, 220);

        fill(0);

        textSize(18);

        textAlign(CENTER, CENTER);

        text("Panel 2: Into the Forest", width / 2, height / 2 - 30);

        rect(width / 2 - 50, height / 2 + 40, 100, 60); 

        text("They step forward into the unknown...", width / 2, height / 2 + 120);

    } 

    else if (comicPanel === 2) {

        background(220, 255, 220);

        fill(0);

        textSize(18);

        textAlign(CENTER, CENTER);

        text("Panel 3: Danger Ahead!", width / 2, height / 2 - 30);

        triangle(width / 2 - 30, height / 2 + 40, width / 2 + 30, height / 2 + 40, width / 2, height / 2 + 70); 

        text("A shadow looms, something dangerous lurks...", width / 2, height / 2 + 80);

    } 

    else if (comicPanel === 3) {

        background(255, 255, 220);

        fill(0);

        textSize(18);

        textAlign(CENTER, CENTER);

        text("Panel 4: The Showdown", width / 2, height / 2 - 30);

        rect(width / 2 - 50, height / 2 + 20, 100, 100); 

        text("The hero must face their greatest challenge yet!", width / 2, height / 2 + 140);

    }

}

​

​

function mousePressed() {

    comicPanel = (comicPanel + 1) % 4; 

    drawPanel(); 

}

​

function drawPanel() {

    if (comicPanel === 0) {

        background(240);

        fill(0);

        textSize(18);

        textAlign(CENTER, CENTER);

        text("Panel 1: The Hero Begins", width / 2, height / 2 - 30);

        ellipse(width / 2, height / 2 + 20, 50, 50); 

        text("Our hero stands at the edge of a mysterious forest.", width / 2, height / 2 + 80);

    } 

    else if (comicPanel === 1) {

        background(255, 220, 220);

        fill(0);

        textSize(18);

        textAlign(CENTER, CENTER);

        text("Panel 2: Into the Forest", width / 2, height / 2 - 30);

        rect(width / 2 - 50, height / 2 + 40, 100, 60); 

        text("They step forward into the unknown...", width / 2, height / 2 + 120);

    } 

    else if (comicPanel === 2) {

        background(220, 255, 220);

        fill(0);

        textSize(18);

        textAlign(CENTER, CENTER);

        text("Panel 3: Danger Ahead!", width / 2, height / 2 - 30);

        triangle(width / 2 - 30, height / 2 + 40, width / 2 + 30, height / 2 + 40, width / 2, height / 2 + 70); 

        text("A shadow looms, something dangerous lurks...", width / 2, height / 2 + 80);

    } 

    else if (comicPanel === 3) {

        background(255, 255, 220);

        fill(0);

        textSize(18);

        textAlign(CENTER, CENTER);

        text("Panel 4: The Showdown", width / 2, height / 2 - 30);

        rect(width / 2 - 50, height / 2 + 20, 100, 100); 

        text("The hero must face their greatest challenge yet!", width / 2, height / 2 + 140);

    }

}

​