Infinite loop when using image()

rustyrobison · March 18, 2022, 6:40pm

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

javagar · March 18, 2022, 8:21pm

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?

rustyrobison · March 18, 2022, 8:35pm

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

javagar · March 18, 2022, 8:45pm

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?

glv · March 18, 2022, 9:54pm

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().

:)

rustyrobison · March 18, 2022, 10:03pm

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

javagar · March 18, 2022, 10:20pm

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.

javagar · March 18, 2022, 11:42pm

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.

rustyrobison · March 19, 2022, 1:28am

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

Topic		Replies	Views
Tint() in for loop doesn't work Coding Questions	10	187	July 16, 2022
Question about using a for loop to execute a function multiple times Coding Questions	1	1088	January 27, 2020
Making a for loop ( or timer ) Coding Questions	1	782	December 10, 2018
Help with some loops and image processing Coding Questions	2	528	January 17, 2019
Strange Behavior Triggered by image() Function Coding Questions	19	1443	January 28, 2019

Infinite loop when using image()

Related topics