# 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:** 1
**Showing post:** 4

<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!

`:)`

---

_[View the full topic](https://discourse.processing.org/t/help-recreating-grid-artwork-cuadricula-optica-by-alberto-gonzalez-vivo/44651)._