# Infinite loop when using image()

**URL:** <https://discourse.processing.org/t/infinite-loop-when-using-image/35826>\
**Category:** Coding Questions\
**Created:** [March 18, 2022, 6:40pm UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826 "2022-03-18T18:40:56Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rustyrobison](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rustyrobison/32/15929_2.png) [@rustyrobison](https://discourse.processing.org/u/rustyrobison)\
**Post date:** [March 18, 2022, 6:40pm UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826/1 "2022-03-18T18:40:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [March 18, 2022, 8:21pm UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826/2 "2022-03-18T20:21:24Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![rustyrobison](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rustyrobison/32/15929_2.png) [@rustyrobison](https://discourse.processing.org/u/rustyrobison)\
**Post date:** [March 18, 2022, 8:35pm UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826/3 "2022-03-18T20:35:55Z")

</div>

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](https://openprocessing.org/sketch/1520351)

Thanks for your time,  
Rusty

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [March 18, 2022, 8:45pm UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826/4 "2022-03-18T20:45:02Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 18, 2022, 9:54pm UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826/5 "2022-03-18T21:54:13Z")

</div>

Hello @rustyrobison,

> [@javagar](#):
>
> 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.

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:

```auto
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()._

`:)`

---

<div class="post-metadata">

**Author:** ![rustyrobison](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rustyrobison/32/15929_2.png) [@rustyrobison](https://discourse.processing.org/u/rustyrobison)\
**Post date:** [March 18, 2022, 10:03pm UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826/6 "2022-03-18T22:03:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [March 18, 2022, 10:20pm UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826/7 "2022-03-18T22:20:25Z")

</div>

> [@javagar](#):
>
> … triggering a protective mechanism on the server …

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.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [March 18, 2022, 11:42pm UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826/8 "2022-03-18T23:42:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rustyrobison](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rustyrobison/32/15929_2.png) [@rustyrobison](https://discourse.processing.org/u/rustyrobison)\
**Post date:** [March 19, 2022, 1:28am UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826/9 "2022-03-19T01:28:36Z")

</div>

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