# Animated grid loop
**URL:** https://discourse.processing.org/t/animated-grid-loop/23154
**Category:** Coding Questions
**Created:** [August 9, 2020, 9:06pm UTC](https://discourse.processing.org/t/animated-grid-loop/23154 "2020-08-09T21:06:01Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@brunobot](https://discourse.processing.org/u/brunobot)
#### Post date: [August 9, 2020, 9:06pm UTC](https://discourse.processing.org/t/animated-grid-loop/23154/1 "2020-08-09T21:06:01Z")
Hello!
I’m new to Processing. Love it but some of the thinking is giving me a hard time.
I’m trying to recreate this kind of visual effect here:
> **[@area\_17\_](https://www.instagram.com/p/CB6FYLshs9V)**
I thought I could recreate this by creating a stripe of different coloured squares (then I’ll just change the width in order to achieve a somewhat seamless gradient).
I’ve managed to hardcode a test of what I want, but when I try to translate this into a ‘for loop’ I run into some issues:
- suddenly the speed of the animation increases massively
- I don’t know how to make the first square of the loop start at x0,
- the direction of the animation is reversed (why is this happening?)
Here’s a working codepen where you can find the code:
https://codepen.io/bradiohead/embed/preview/QWNbqVj?height=300&slug-hash=QWNbqVj&default-tabs=html,result&host=https://codepen.io
If you remove the comments you can see the ‘for’ loop in action.
I’m trying to actually understand the process, rather than copy and paste some working code from a random source.
Any pointers, tips or directions, would be massively appreciated.
Thanks!
Bruno
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [August 10, 2020, 2:47am UTC](https://discourse.processing.org/t/animated-grid-loop/23154/2 "2020-08-10T02:47:23Z")
> [@brunobot](#):
>
> the Loop start at 0
Place this
````auto
x = x+50;
``` at the end of the loop
````
---
### Author:  [@brunobot](https://discourse.processing.org/u/brunobot)
#### Post date: [August 10, 2020, 3:58pm UTC](https://discourse.processing.org/t/animated-grid-loop/23154/3 "2020-08-10T15:58:32Z")
Thanks for the reply!
I’ve tried that, but it only fixes a small part of the problem. I’ll keep playing with this 🙂
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [August 10, 2020, 4:04pm UTC](https://discourse.processing.org/t/animated-grid-loop/23154/4 "2020-08-10T16:04:15Z")
An Animation is based on Updating the screen throughout.
BUT draw () updates the screen only once at its end. That’s a fact with processing.
Hence, a for loop is not suitable for an animation. Instead use the fact that draw() in itself loops automatically. As you had in your old version I guess.
---
### Author:  [@brunobot](https://discourse.processing.org/u/brunobot)
#### Post date: [August 10, 2020, 4:20pm UTC](https://discourse.processing.org/t/animated-grid-loop/23154/5 "2020-08-10T16:20:16Z")
That makes so much more sense. If a for loop isn’t suitable, would there be an easier/better way to repeat this bit throughout, while still animating it?
```auto
//Square 01
fill(0,100,100);
rect(x,y,50,50);
x = x+1;
if (x > width) {x = 0;}
```
I want to fill the entire width with squares, each one in a different hue, and each one moving 1px to the right, until they reach full width and start all over again.
Thanks man I appreciate your input massively 🙌
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [August 10, 2020, 4:33pm UTC](https://discourse.processing.org/t/animated-grid-loop/23154/6 "2020-08-10T16:33:20Z")
That’s pretty much the way to go
For a grid: when beginning a new line, add something to your y value, so you go down the screen with your rectangles