Infinite loop when using image()

I made a simple loop, but when the image() function is called inside it, it comes up as an infinite loop. Any ideas?

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

Hello, @rustyrobison, and welcome to the Processing Forum!

Is the code that you have provided contained within a function when you are executing it? If so, which function is it? It would be best if we could see your entire code.

What happens that indicates that there is an infinite loop?

Thank you for responding.

A have a student who wants to make images fade in at each hour. There is a function called fadeIn at the bottom. An error warning of an infinite loop appears. If I comment out the image() function, there is no error.

Here’s a link: https://openprocessing.org/sketch/1520351

Thanks for your time,
Rusty

Thanks for the link.

Currently, I am getting a message stating that the server cannot be found. Although the problem could be temporary, it might be best if you post the code. That would enable us to copy it and run it locally. For doing that, we could use any image we have available that can be opened in p5.js.

EDIT (March 18, 2022):

The problem with the server was temporary.

The loop that you posted is not actually infinite. However, the repeated and rapid redisplaying of images may be triggering a protective mechanism on the server that issues a message about a possible infinite loop.

Try copying the code and all the images, and then run the script locally. What happens then?

1 Like

Hello @rustyrobison,

This can be confirmed by changing the loop count; I tried a few lower values and it did not give an error message.

The code provided is fading in a for() loop and this will be rapid and not be seen over time.

Consider fading over time in the draw() loop which is 60 fps:

if (fading)
	{
	f++;  
    if (f>255)
		{
		f = 0;
		fading = false;	
		}
	textSize(48);	
	text(f, width/2, height/2)	
	}

Above code is not complete but worked when used to fade an image over time with tint().

:)

1 Like

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;
}

To clarify, the script executes on the browser, and not on the server. However, the script appears to be served by OpenProcessing wthin a page that contains a protective mechanism.

1 Like

Thanks for the code.

The draw function is running at 60 times per second, and within that, the fadeIn function gets called that contains a loop that iterates 255 times. During each iteration, an image is rendered. A protective mechanism identifies it as an infinite loop, which it is not. However, there is a lot of drawing of images.

You can experiment with some optimization that produces the desired effect with less frequent drawing.

I think I understand. Thank you so much for your time. My student and I will experiment with ways to optimize the code.

All the best,
Rusty

3 Likes