# Help recreating grid artwork (Cuadricula Óptica by Alberto Gonzalez Vivo)

**URL:** <https://discourse.processing.org/t/help-recreating-grid-artwork-cuadricula-optica-by-alberto-gonzalez-vivo/44651>\
**Category:** Coding Questions\
**Tags:** homework, contributions\
**Created:** [June 26, 2024, 2:43pm UTC](https://discourse.processing.org/t/help-recreating-grid-artwork-cuadricula-optica-by-alberto-gonzalez-vivo/44651 "2024-06-26T14:43:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matias\_alderroba](https://avatars.discourse-cdn.com/v4/letter/m/2acd7d/32.png) [@Matias\_alderroba](https://discourse.processing.org/u/Matias_alderroba)\
**Post date:** [June 26, 2024, 2:43pm UTC](https://discourse.processing.org/t/help-recreating-grid-artwork-cuadricula-optica-by-alberto-gonzalez-vivo/44651/1 "2024-06-26T14:43:51Z")

</div>

![obra_agv](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/4/64fb77ae939ba62814e8d38466bff0903bab79e7.jpeg)

Hi, I’m new to Processing and I don’t know how to recreate this image on the right side of 800x400 interactively, please help me

---

<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:** [June 26, 2024, 3:45pm UTC](https://discourse.processing.org/t/help-recreating-grid-artwork-cuadricula-optica-by-alberto-gonzalez-vivo/44651/2 "2024-06-26T15:45:32Z")

</div>

Beautiful image!

And welcome to the forum!

* * *

**The grid**

You can draw a grid of rectangles

Use

```auto
for (int x.... {
    for (int y.... {
         rect( x * 20, y * 20, ....
    }
}

```

* * *

**Now for the interactive part**

Please look closely at the image.

What do you see?

The width and height of each rectangle is changing separately.

So calculate `wRect = map(mouseX, 0, width, 0, 16);`

(check out the `map()` command in the reference)

This is obviously wrong but it’s a start.

Use **wRect** as a parameter for the width of each rectangle, repeat the process with the height hRect.

Your line should now look like this:

` rect( x * 20, y * 20, wRect, hRect );`

* * *

**Later**

Later you can use dist(mouseX, 0,rectangle’s pos x ,0) to get the **distance** from the rect to mouse.

This gives you the distance that you can use in the `map()` command above.

Check reference for the commands.

Chrisir

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 28, 2024, 5:13pm UTC](https://discourse.processing.org/t/help-recreating-grid-artwork-cuadricula-optica-by-alberto-gonzalez-vivo/44651/3 "2024-06-28T17:13:31Z")

</div>

Hi @Matias_alderroba,

Would recommend to set the origin to the center, makes it imo easier and has the advantage that you will implicitly correct the inconsistency (from an aesthetic perspective) in the posted image. 🙂

Let’s imagine numdots=20  
Means, draw the small rects (use rectMode CENTER) from -numdots/2 to numdots/2 (inclusive) by applying a scaling factor and set width and height for it depending their distances from the center.

Below is created by very few lines of code, so if you think about it you’ll manage it. 👍

![Screen_Recording_20240628_185245_APDE-ezgif.com-optimize](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/b/bb43e636fe0463d778d772c3a7792c2b1f92d50c.gif)

Cheers  
— mnse

PS:  
setting origin:

> **[translate() / Reference](https://processing.org/reference/translate_.html)**
>
> Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation, and the z param…

for drawing:

> **[rect() / Reference](https://processing.org/reference/rect_.html)**
>
> Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets th…

> **[rectMode() / Reference](https://processing.org/reference/rectmode_)**
>
> Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted. The default mode is rectMode(CORNER), which inte…

For sizing:

> **[map() / Reference](https://processing.org/reference/map_.html)**
>
> Re-maps a number from one range to another. In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the w…

PPS: by add two more code lines…  
 ![Screen_Recording_20240628_213750_APDESketchPreview-ezgif.com-optimize](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/3/6312aa546accf82fe824d2d1ac01c41901b1238f.gif)

Coloring:

> **[lerpColor() / Reference](https://processing.org/reference/lerpcolor_)**
>
> Calculates a color between two colors at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 is equal to the first point, 0.1 is very ne…

---

<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:** [July 1, 2024, 2:05pm UTC](https://discourse.processing.org/t/help-recreating-grid-artwork-cuadricula-optica-by-alberto-gonzalez-vivo/44651/4 "2024-07-01T14:05:55Z")

</div>

> [@Matias\_alderroba](#):
>
> I’m new to Processing and I don’t know how to recreate this image

Processing resources (tutorials, references, examples) are here:  
_[https://processing.org/](https://processing.org/)_

I encourage you to peruse the website and get familiar with the resources there and use them.

A must read:  
_[Guidelines—Asking Questions](https://discourse.processing.org/t/guidelines-asking-questions/2147)_

You must first be familiar with the Processing environment and entry level programming; assuming you have some of the basics to get started.

You must understand the co-ordinate system. See the tutorial.

That looks like a _ **grid** _. \< Important concept and keyword when doing a search!

A _**nested for() loop**_ will be helpful. \< Another important concept!

The Processing reference has one example of a _**nested for() loop**_:

> **[for / Reference](https://processing.org/reference/for.html)**
>
> Controls a sequence of repetitions. A basic for structure has three parts: init, test, and update. Each part must be separated by a semicolon (;). The loop continues until …

The points in the example can be made larger or replaced with other shapes.  
There may be other examples on the site that use _for()_ and _nested for() loops_.

After you get a grid you can start manipulating the points with some additional code.

Add interactivity later! There is a tutorial that discussed that.

My initial attempt:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/d/0d196c18b520995835031c8c520936566ab79831.png)

The grid is the first step and very achievable.

The _rect()_ and spacing is the next challenge!  
You can space them with increasing and decreasing values along each row and column.

Only after you master the above you can consider more advanced approaches.

Try it with just a one row first. The columns can be added after and you will start to see how that works with some (maybe lots of) coding.

I like to experiment and have fun with coding!  
Once I progressed (this may be advanced for a beginner) I used sine waves and spacing along the y for equal increments along x for the _rect()_ size:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/6/364532d5bd85bc00ffbbfe4309f812733b3c59da.png)

Shows the spacing used (blue points and lines on left):

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/b/aba0b2f2b3f32c0d015de32c658f9802163716e8.png)

Give consideration to interactivity and variables you are using but add that last.

One step at a time!

Have fun!

`:)`