Infinite loop when using image()

p5.js Coding Questions
6

Sure. Here it is. But there are a lot of image, and it’s not very pretty…

let secText, minText, hourText;
let image1, image2, image3, image4, image5, image6, image7,
image8, image9, image10, image11, image12, image13, image14,
image15, image16, image18, image19, image20, image21,
image22, image23, image24;
let fading = false;
let currImage;

function preload() {
image1 = loadImage(“1.png”);
image2 = loadImage(“2.png”);
image3 = loadImage(“3.png”);
image4 = loadImage(“4.png”);
image5 = loadImage(“5.png”);
image6 = loadImage(“6.png”);
image7 = loadImage(“7.png”);
image8 = loadImage(“8.png”);
image9 = loadImage(“9.png”);
image10 = loadImage(“10.png”);
image11 = loadImage(“11.png”);
image12 = loadImage(“12.png”);
image13 = loadImage(“13.png”);
image14 = loadImage(“14.png”);
image15 = loadImage(“15.png”);
image16 = loadImage(“16.png”);
image17 = loadImage(“17.png”);
image18 = loadImage(“18.png”);
image19 = loadImage(“19.png”);
image20 = loadImage(“20.png”);
image21 = loadImage(“21.png”);
image22 = loadImage(“22.png”);
image23 = loadImage(“23.png”);
image24 = loadImage(“25.png”);

if (hour() == 1) {
currImage = image25;
} else if (hour() == 2) {
currImage = image23;
} else if (hour() == 3) {
currImage = image22;
} else if (hour() == 4) {
currImage = image21;
} else if (hour() == 5) {
currImage = image20;
} else if (hour() == 6) {
currImage = image19;
} else if (hour() == 7) {
currImage = image7;
} else if (hour() == 8) {
currImage = image6;
} else if (hour() == 9) {
currImage = image5;
} else if (hour() == 10) {
currImage = image4;
} else if (hour() == 11) {
currImage = image3;
} else if (hour() == 12) {
currImage = image2;
} else if (hour() == 13) {
currImage = image1;
} else if (hour() == 14) {
currImage = image2;
} else if (hour() == 15) {
currImage = image3;
} else if (hour() == 16) {
currImage = image4;
} else if (hour() == 17) {
currImage = image5;
} else if (hour() == 18) {
currImage = image6;
} else if (hour() == 19) {
currImage = image7;
} else if (hour() == 20) {
currImage = image8;
} else if (hour() == 21) {
currImage = image9;
} else if (hour() == 22) {
currImage = image22;
} else if (hour() == 23) {
currImage = image23;
} else if (hour() == 24) {
currImage = image24;
}

}

function setup() {
createCanvas(1000, 526);
}

function draw() {
background(255);

if (hour() == 1) {
if (!fading) {
fadeIn(image25);
}
} else if (hour() == 2) {
if (!fading) {
fadeIn(image23);
}
} else if (hour() == 3) {
if (!fading) {
fadeIn(image22);
}
} else if (hour() == 4) {
if (!fading) {
fadeIn(image21);
}
} else if (hour() == 5) {
if (!fading) {
fadeIn(image20);
}
} else if (hour() == 6) {
if (!fading) {
fadeIn(image19);
}
} else if (hour() == 7) {
if (!fading) {
fadeIn(image7);
}
} else if (hour() == 8) {
if (!fading) {
fadeIn(image6);
}
} else if (hour() == 9) {
if (!fading) {
fadeIn(image5);
}
} else if (hour() == 10) {
if (!fading) {
fadeIn(image4);
}
} else if (hour() == 11) {
if (!fading) {
fadeIn(image3);
}
} else if (hour() == 12) {
if (!fading) {
fadeIn(image2);
}
} else if (hour() == 13) {
if (!fading) {
fadeIn(image1);
}
} else if (hour() == 14) {
if (!fading) {
fadeIn(image2);
}
} else if (hour() == 15) {
if (!fading) {
fadeIn(image3);
}
} else if (hour() == 16) {
if (!fading) {
fadeIn(image4);
}
} else if (hour() == 17) {
if (!fading) {
fadeIn(image5);
}
} else if (hour() == 18) {
if (!fading) {
fadeIn(image6);
}
} else if (hour() == 19) {
if (!fading) {
fadeIn(image7);
}
} else if (hour() == 20) {
if (!fading) {
fadeIn(image8);
}
} else if (hour() == 21) {
if (!fading) {
fadeIn(image9);
}
} else if (hour() == 22) {
if (!fading) {
fadeIn(image22);
}
} else if (hour() == 23) {
if (!fading) {
fadeIn(image23);
}
} else if (hour() == 24) {
if (!fading) {
fadeIn(image24);
}
}

image(currImage, 0, 0, 1000, 526);

textSize(100);
fill(255);
if (second() < 10) {
secText = “0” + second();
} else {
secText = second();
}

if (hour() > 12) {
hourText = hour() - 12;
} else {
hourText = hour();
}
text(hour() + “:” + minute() + “:” + secText, 320, 290);
}

function fadeIn(img) {

for (let i = 0; i < 255; i++) {
tint(255, i);
image(img, 0, 0);
}

fading = true;
currImage = img;
}