my storybook - OpenProcessing

mySketch
xxxxxxxxxx
 
let egg;
let caterpillar;
let pupa;
let emergingg;
let butterfly;
var calm;
var imageNum = 1;
function preload() {
egg = loadImage("egg.jpeg");
caterpillar = loadImage("caterpillar.jpeg");
pupa = loadImage("pupa.jpeg");
emergingg = loadImage("emergingg.jpeg");
butterfly = loadImage("butterfly.jpeg");
calm = loadSound("calm.mp3");
} 
function setup() {
createCanvas(400, 400);
calm.play();
}
function draw() {
if (imageNum == 1) {
background(57, 255, 20);
image(egg, 100, 100, 200, 200);
text("Eggs: Hatches into tiny larvae or caterpillars",50,100)
}
if (imageNum == 2) {
background(50,205,50);
image(caterpillar, 100, 100, 200, 200);
text("Caterpillar: Feeds on leaves, hangs upside down to form pupa", 50,100);
}
if (imageNum == 3) {
background(0,255,0);
image(pupa, 100, 100, 200, 200)
text("Pupa: Undergoes complete metamorphosis to emerge as a butterfly", 40,100);
}
if (imageNum == 4) {
background(45,90,39);
image(emergingg, 100, 100, 200, 200)
text("Emerges: The butterfly is emerging out the pupa", 50,100)
}
if (imageNum == 5) {
background(144,238,144);
image(butterfly, 100, 100, 200, 200)
text("Butterfly: YAY! The butterfly is here", 50,100)
}
}
function keyPressed() {
if (key == 1) {
imageNum = 1;
}
if (key == 2) {
imageNum = 2;
}
if (key == 3) {
imageNum = 3;
}
if (key == 4) {
imageNum = 4;
}
if (key == 5) {
imageNum = 5;
}
}
​