# Artwork recreation Edoardo Lanzi

**URL:** https://discourse.processing.org/t/artwork-recreation-edoardo-lanzi/45979
**Category:** Coding Questions
**Created:** [March 12, 2025, 9:40pm UTC](https://discourse.processing.org/t/artwork-recreation-edoardo-lanzi/45979 "2025-03-12T21:40:08Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![maumanto16](https://avatars.discourse-cdn.com/v4/letter/m/7c8e57/32.png) [@maumanto16](https://discourse.processing.org/u/maumanto16)
#### Post date: [March 12, 2025, 9:40pm UTC](https://discourse.processing.org/t/artwork-recreation-edoardo-lanzi/45979/1 "2025-03-12T21:40:08Z")

</div>

![Edoardo Landi squares](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/f/5ffadc06aea3e11d062c09524a4dbd6f676182dd.jpeg)

How would you go about recreating this artwork in processing? (or a similar one on concept)  
I’ve been squeezing my brain around it but can’t find a good solution. Can somebody 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: [March 12, 2025, 10:04pm UTC](https://discourse.processing.org/t/artwork-recreation-edoardo-lanzi/45979/2 "2025-03-12T22:04:37Z")

</div>

It’s a grid of fields.

- Each field is made from a horizontal line A (let’s start top left corner: here left from the line the rect is colored black, right white)

- now the idea: the lower x-pos of the line is growing right when you follow the rects in the grid to the _right_. So one cell in the grid to the right increase x of A by 5. When x touches the right side of the cell, it goes up the right wall of the cell (y shrinks, x constant).

- Similarly: when you follow the grid _down_ from the top left corner: the UPPER x-pos of the line is shrinking. When it meets the left side of the cell, it’s going down (increasing y)

You can achieve this when using quad within the grid

Both x-pos (or start and end points of the line, PVectors) follow the same rule, they start with different angles. Calc x,y from angle

---

<div class="post-metadata">

### Author: ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)
#### Post date: [March 12, 2025, 11:55pm UTC](https://discourse.processing.org/t/artwork-recreation-edoardo-lanzi/45979/3 "2025-03-12T23:55:19Z")

</div>

Create a PGraphics that is `width/15` by `height/15`.

Loop over the 15x15 grid. In the PGraphics, translate to the middle and then rotate by `-TAU/24 * (i+j-1)`, then draw a black background and a white rectangle on the right side big enough to span the square when rotated. `image()` the PGraphics to the right place.

---

<div class="post-metadata">

### Author: ![maumanto16](https://avatars.discourse-cdn.com/v4/letter/m/7c8e57/32.png) [@maumanto16](https://discourse.processing.org/u/maumanto16)
#### Post date: [March 13, 2025, 8:09am UTC](https://discourse.processing.org/t/artwork-recreation-edoardo-lanzi/45979/4 "2025-03-13T08:09:32Z")

</div>

The problem is that when the line passes the 45’ rotation my quads start to be flipped. How do i solve it?

 ![Flipped](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/9/69058453c9641c24c79ec36d2a7eae58aaf83b50.png)

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [March 13, 2025, 11:02am UTC](https://discourse.processing.org/t/artwork-recreation-edoardo-lanzi/45979/5 "2025-03-13T11:02:01Z")

</div>

Welcome to the forum. 😄

@scudly has provided a solution but it might be nice to see it visually.

https://editor.p5js.org/quark-js/full/xjLX6n5NI

You can either use a PGraphic for a tile as this would automatically trim the excess. or use [clip()](https://processing.org/reference/clip_.html) to restrict the area to the tile size.

---

<div class="post-metadata">

### Author: ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)
#### Post date: [March 13, 2025, 2:16pm UTC](https://discourse.processing.org/t/artwork-recreation-edoardo-lanzi/45979/6 "2025-03-13T14:16:18Z")

</div>

Yeah, `clip()` is the easier way to go. 14 lines of code using `clip()` vs 15 for the `PGraphics`. (Or one less on each if you leave out `noStroke()`.)

Nice visualization.
