# How make this movement?

**URL:** <https://discourse.processing.org/t/how-make-this-movement/21935>\
**Category:** Coding Questions\
**Created:** [June 17, 2020, 12:40am UTC](https://discourse.processing.org/t/how-make-this-movement/21935 "2020-06-17T00:40:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lucaso](https://avatars.discourse-cdn.com/v4/letter/l/8baadc/32.png) [@Lucaso](https://discourse.processing.org/u/Lucaso)\
**Post date:** [June 17, 2020, 12:40am UTC](https://discourse.processing.org/t/how-make-this-movement/21935/1 "2020-06-17T00:40:43Z")

</div>

Hi everyone! I’m new in this community and using Processing, so I’m going to explain what is my problem.

I want make a “field road” effect, similar to the one shown in the following link:  
[https://cs.brynmawr.edu/gxk2013/examples/transformations/starfield/](https://cs.brynmawr.edu/gxk2013/examples/transformations/starfield/)

I know, that is a starfield, but I’m looking to implement a similar effect in a project I’m working on

 ![example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b85cc63a2c597335852b835f9b91bad726f2a3f7.jpeg)

[image]

I seek to generate an effect in which the squares get closer and give that feeling of being “entering” in those squares.  
Sorry if I don’t express myself well, my English is not very good.

I hope they can help me with my problem and that I can continue learning, thanks very much!

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [June 17, 2020, 1:34am UTC](https://discourse.processing.org/t/how-make-this-movement/21935/2 "2020-06-17T01:34:00Z")

</div>

Welcome, @Lucaso

First, you’ll need to setup an animated sketch.

It’s probably easiest to pull this off if you set the `rectMode()` to `CENTER`. Here’s a basic example to riff-off:

```auto
void setup() {
  // draw rectangles from the center (not top-left)
  rectMode(CENTER);
}

int size = 0;

void draw() {
  // move the origin to the center of the display window
  translate(width/2, height/2);
  // draw a rectangle
  rect(0, 0, size, size);
  // increment the size value
  size ++;
}

```

Among other additions, you’ll need to add a loop to draw multiple rectangles, alternating the fills of each.

---

<div class="post-metadata">

**Author:** ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)\
**Post date:** [June 17, 2020, 11:21am UTC](https://discourse.processing.org/t/how-make-this-movement/21935/3 "2020-06-17T11:21:02Z")

</div>

I made a interactive and similar sketch in the spirit of Vasarely : [vasarelo](https://www.openprocessing.org/sketch/444989)

---

<div class="post-metadata">

**Author:** ![Lucaso](https://avatars.discourse-cdn.com/v4/letter/l/8baadc/32.png) [@Lucaso](https://discourse.processing.org/u/Lucaso)\
**Post date:** [June 18, 2020, 2:28pm UTC](https://discourse.processing.org/t/how-make-this-movement/21935/4 "2020-06-18T14:28:33Z")

</div>

This is the movement who i’m looking for, thanks so much!!