Animated grid loop

Processing Coding Questions
1

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:

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:

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

2

Place this

x = x+50;
``` at the end of the loop
1 Like
3

Thanks for the reply!
I’ve tried that, but it only fixes a small part of the problem. I’ll keep playing with this :slight_smile:

4

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.

1 Like
5

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?

  //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 :raised_hands:

1 Like
6

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

1 Like