# Easy 'for loop' question

**URL:** <https://discourse.processing.org/t/easy-for-loop-question/14075>\
**Category:** Beginners\
**Created:** [September 19, 2019, 1:55pm UTC](https://discourse.processing.org/t/easy-for-loop-question/14075 "2019-09-19T13:55:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [September 19, 2019, 1:55pm UTC](https://discourse.processing.org/t/easy-for-loop-question/14075/1 "2019-09-19T13:55:27Z")

</div>

What am I missing here? I’m expecting that the background should cycle through from black to white. …it’s not.

```auto
function setup() {
	createCanvas(100, 100);
}

function draw() {
	for (let x = 0; x < 256; x++) {
		background(x);
		print(x);
	}
}

```

Thanks!

---

<div class="post-metadata">

**Author:** ![TTG](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ttg/32/983_2.png) [@TTG](https://discourse.processing.org/u/TTG)\
**Post date:** [September 19, 2019, 2:25pm UTC](https://discourse.processing.org/t/easy-for-loop-question/14075/2 "2019-09-19T14:25:32Z")

</div>

There is nothing wrong with the code,  
though you perform a for loop over 255 colors, the last one is 255.  
then it exits the loop and the color remaining is 255 ( = white).  
the framerate is slow so only the last one will be shown.

(let x = 0; x \< 130; x++) { \<-- would give a grey background

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [September 19, 2019, 2:27pm UTC](https://discourse.processing.org/t/easy-for-loop-question/14075/3 "2019-09-19T14:27:14Z")

</div>

RIGHT! I forgot that the for loop all happens within one frame!

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 19, 2019, 8:44pm UTC](https://discourse.processing.org/t/easy-for-loop-question/14075/4 "2019-09-19T20:44:27Z")

</div>

you can replace the for-loop by the looping of draw() itself

then each step is visible as a frame on its own

```auto

let x = 0;

function setup() {
	createCanvas(100, 100);
	frameRate(22);
}

function draw() {
	background(x);
	x++;
	// print(x);
}

```