# How will you approach this picture?

**URL:** <https://discourse.processing.org/t/how-will-you-approach-this-picture/24837>\
**Category:** Coding Questions\
**Created:** [October 23, 2020, 4:56am UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837 "2020-10-23T04:56:51Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [October 23, 2020, 4:56am UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/1 "2020-10-23T04:56:51Z")

</div>

Like a lot of us, I’ve been a fan of Autechre since 2001 (I was 11) and I’ve been always amazed by their covers.  
There are a couple of covers that always make me think of raw code.  
So my question is, how will you approach this cover in Processing or P5j?

![Autechre-l-event](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6bb35cb6c0f7c1189d0415f1616f3d977a4a7427.jpeg)

I thought it will be easy to translate to code, but it’s harder than I thought!  
So my logic was either create a X amount squares, with random widths and heights and let them intersect, but some some of them touch at their vertex…  
and my second idea was just to create a grid of squares fill some randomly and that way you can intersect stuff…I don’t know

Also, Exai artwork goes under the similar concept.

Anyway, sorry if there’s no code for me, I’ve started it but I have no clue how to do it.

I’ll try to add some stuff, maybe I can get a better idea after I post this.

---

<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:** [October 23, 2020, 8:06am UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/2 "2020-10-23T08:06:56Z")

</div>

> [@Huno](#):
>
> create a grid of squares

I think it’s definitely a grid of squares (2D array, see tutorials).

You can fill it randomly in a nested for-loop

**Idea**

You can also make a random walker (see examples) that starts at different random locations a and walks from there (marks rectangles as black). Instead of walking it could also draw multiple times (random number) from the random point “a” a certain distance (random dist and direction).

Chrisir

---

<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:** [October 23, 2020, 11:07am UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/3 "2020-10-23T11:07:47Z")

</div>

Hello,

I always try to visualize the problem and approaches to tackling it before writing a single line of code. You are doing this…

You then have to translate to code with what is available to you. That is where the fun and learning begins.

One of the best tools in a programmer’s tool chest is knowing the resources available to you and learning to navigate, filter, and use them.

A short list of resources to peruse:

> **Resources \< Click here to expand !**
>
> Explore the resources available here:
> 
> - The Processing _website_ has references, examples, tutorials, links to resources, etc.  
> [https://processing.org/](https://processing.org/)
> 
> - The Processing PDE (IDE) has lots to offer!  
> An exploration of the menu bar will reveal what is available there;  
> libraries, tools, local examples, and other goodies are in there.
> 
> - The Coding Train \< Experience the unbridled enthusiasm of Daniel Shiffman  
> [https://shiffman.net/](https://shiffman.net/)  
> [https://www.youtube.com/user/shiffman](https://www.youtube.com/user/shiffman)  
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
> 
> - Happy Coding  
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
> 
> - The source code can give insight if you are adventurous:  
> [GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)
> 
> - Explore Processing on GitHub:  
> [Processing Foundation · GitHub](https://github.com/processing)  
> [processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java) \< Many of the Processing functions are here!
> 
> - The Processing Foundation  
> [https://processingfoundation.org/](https://processingfoundation.org/)  
> Check out the menu.  
> In the education menu, there is a reference to the Coding Train.
> 
> - And the Internet. `:)`

`:)`

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [October 23, 2020, 1:19pm UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/4 "2020-10-23T13:19:28Z")

</div>

Creating a grid of squares right, but randomly making them dark or bright would create a to evenly distributed pattern.  
So I would generate the values using noise() or even include another noise function (opensimplex noise)

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [October 23, 2020, 3:58pm UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/5 "2020-10-23T15:58:09Z")

</div>

> [@Chrisir](#):
>
> random walker (see examples)

oh, amma get my hands on that and come with a code. What I’m thinking to is that range is an important aspect of it. All squares should start and end from a specific range instead of the full canvas.

I better start talking some code and see if I come back with a proper result.

> [@philipplehmann](#):
>
> I would generate the values using noise()

of course! Noise! I always seem to forget about that function.

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [October 23, 2020, 7:03pm UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/6 "2020-10-23T19:03:29Z")

</div>

Hi @Huno,

Have you looked at the Wikipedia [page](https://en.wikipedia.org/wiki/Exai_(album)#Artwork_and_Title) of the “Exai” album ?

> … Following the album’s release, fan speculation included theories that the artwork was based on [Conway’s Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)[[5]](https://en.wikipedia.org/wiki/Exai_(album)#cite_note-5) or [binary code](https://en.wikipedia.org/wiki/Binary_code).[[6]](https://en.wikipedia.org/wiki/Exai_(album)#cite_note-6) Autechre members Sean and Rob were initially reluctant to discuss the album as they “wanted to see what people could figure out” but ultimately confirmed that **the artwork depicts a heavily-pixelated typography exercise**. _Exai_ is Autechre’s eleventh album, and the title **may be derived from a phonetic rendering of the Roman numeral “XI,” or eleven** , which also appears in one track title: “T ess xi.”

If the artwork is indeed the result of a heavy pixelisation of an image I would suggest to look for downsampling methods. Something like [Gaussian Pyramid](https://en.wikipedia.org/wiki/Pyramid_(image_processing)) or [Lanczos resampling](https://en.wikipedia.org/wiki/Lanczos_resampling) could be worth investigating.

* * *

I really enjoy this kind of question. Reading people’s various ideas and approaches is always both exciting and instructive.

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [October 23, 2020, 8:00pm UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/7 "2020-10-23T20:00:40Z")

</div>

Wow, I didn’t actually thought of the Wiki, lol. I will check it out. I love the idea of the Pixelated Type.

> [@solub](#):
>
> [Gaussian Pyramid](https://en.wikipedia.org/wiki/Pyramid_(image_processing)) or [Lanczos resampling](https://en.wikipedia.org/wiki/Lanczos_resampling)

does seem like something I will love to try!

> [@solub](#):
>
> Reading people’s various ideas and approaches is always both exciting and instructive.

Yes! I’m always wondering how people approach stuff. I’ve come around some solutions that seem pretty bold, some pretty smart and even some pretty dumb but work!

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [October 23, 2020, 8:14pm UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/8 "2020-10-23T20:14:57Z")

</div>

Ok! So, as basic as I can think, because I’m a noob.

```auto
// s to save png
// p to record pdf
// e to stop pdf record.

import processing.pdf.*;
import java.util.Calendar;

boolean recordPDF = false;

int a = 0;

void setup() {
  size(600,600);
  background(255,230,100);
  noStroke();
  //noLoop();
}

void draw(){
   if (a < 5) {
  for (int x = 60; x < width - 60; x = x + 60){
    for (int y = 60; y < height - 60; y = y + 60){
     
  rect(x, y,60,60);
  for (int a = 0; a < 255; a = a + 1){
    for (int b = 0; b < 255; b = b + 1){
  fill(255, 230, 100 + random(x));
      }
     }
    }
  }
     a = a + 1;
   } else {
     noLoop();
   }
 
}

void keyReleased(){
  if (key == 's') saveFrame(timestamp()+"_##.png");
  if (key == 'p') {
    if (recordPDF == false) {
      beginRecord(PDF,timestamp()+".pdf");
      println("making pdf");
      recordPDF = true;
    }
  } else if (key == 'e'){
    if (recordPDF){
      println("done!");
      endRecord();
      recordPDF = false;
    }
  }
}
//timestamp 
String timestamp() {
  Calendar now = Calendar.getInstance();
  return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS",now);
}

```

now, I had to add the **if condition** as “amount of repetitions” because, if the code runs once, the first square, rect(0,0) always appears **white**. And even though it doesn’t appear white anymore, the first rectangle always appear to be the same color.  
I don’t know why this happens! Maybe because is too much randomness.

but yea, not so complex!

Now with the concept of **range** I subtracted the width and height of the canvas to 1 square width and heigt, _ **start maybe 2 columns and rows offset from the limit** _

What do y’all think?

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [October 24, 2020, 4:44am UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/9 "2020-10-24T04:44:21Z")

</div>

Ok, so I was thinking… if I want just the background and the square colors to be constant. Background Yellow, squares black.  
I thought of working with the alpha on the fill loop, but that will only give me a range of opacities, and welp…there’s the issue with the first square that never matches the background color, is either white or background, something that I think is due to that first square being doubled due to the nested loop.

_ **What about drawing just one square and then translate it around randomly within range?** _

---

<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:** [October 24, 2020, 1:53pm UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/10 "2020-10-24T13:53:16Z")

</div>

You are doing it wrong.

There is a nice tutorial about 2D arrays. Data of the colors of the grid. You should use a 2D array / grid to store colors.

Start by filling the 2D array / grid randomly (black or yellow) then display the grid. So TWO nested for-loops. 2 times 2.

The fill must be before the rect so it can work (in the 2nd double for-loop).

fill ( grid [x][y] );

---

<div class="post-metadata">

**Author:** ![ddownn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ddownn/32/2731_2.png) [@ddownn](https://discourse.processing.org/u/ddownn)\
**Post date:** [October 29, 2020, 2:57pm UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/11 "2020-10-29T14:57:18Z")

</div>

Maybe it will help for visualization, here’s the grid. The overall image is 21 x 21. The black squares are bounded in a 15 x 16 area, unless you consider the first or last column to have been “Intentionally left blank”, then I suppose you could say it’s 16 x 16.

 ![grid](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/ff1e3a189b36b355ef37f07cad4bc3cf5d77afa9.jpeg)

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [November 1, 2020, 4:59pm UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/12 "2020-11-01T16:59:15Z")

</div>

> [@Chrisir](#):
>
> Start by filling the 2D array / grid randomly (black or yellow) then display the grid. So TWO nested for-loops. 2 times 2.

so, one nested loop for the grid and one for the colors? Oh…snap, I better start some reading.

> [@ddownn](#):
>
> Maybe it will help for visualization, here’s the grid

Hey! That’s a great idea, I never thought of that. Thanks a lot.

---

<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:** [November 1, 2020, 5:14pm UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/13 "2020-11-01T17:14:47Z")

</div>

Read the tutorial about two-dimensional arrays on the Website | tutorials

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 3, 2020, 6:21pm UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/14 "2020-11-03T18:21:42Z")

</div>

> [@Huno](#):
>
> What do y’all think?

I think it’s a nice idea to create random artwork pixelations like that, but you have to invent some methods to evenly distributed the pattern like @philipplehmann mentioned.  
The whole thing reminded me of a QR code, so I puzzled a little bit and the result are these lines of code, which give the embedded iframe below. What do you think the decoding of this bar will write[?](https://online-barcode-reader.inliteresearch.com/)

t=u=g=0;r=[1,8,9,12,15,22,12,14,3,6,17,20,3,6,12,14,17,20,3,6,17,20,9,14,1,8,15,22,10,  
12,1,3,5,8,18,22,1,4,14,17,19,21,7,12,17,19,8,11,13,15,16,18,4,11,14,16,17,19,20,22,  
1,8,15,19,9,12,3,6,12,15,20,22,3,6,17,19,3,6,10,12,14,16,13,15,1,8,9,12,13,15,18,19,21,22];  
q=[3,1,2,3,2,1,2,1,3,3,2,3,1,3,2,1,3,2,3,1,5,3,1,1,1,0,2,2,0,6,2,2,2,2,1,1,3,2,0,1,1,2];  
c=[1,8,9,14,15,22,9,11,11,12,12,13,10,11,12,14,1,8,15,22,1,5,7,8,10,11,14,15,17,18,20,21,4,6,  
15,16,1,4,6,9,10,11,14,15,7,10,12,14,16,17,1,8,9,10,17,18,20,22,16,17,19,20,19,20,12,18,1,8,18,19];  
setup=\_=\>{createCanvas(w=460,w).background(255);strokeWeight(20).strokeCap(SQUARE)  
for(y=20;y\<440;y+=20){for(p=0;p\<q[u];p++){line(r[t]\*20,y,r[t+1]\*20,y);t+=2;}u++;}  
for(x=30;x\<440;x+=20){for(p=0;p\<q[u];p++){line(x,c[g]\*20-10,x,c[g+1]\*20-10);g+=2;}u++;}}  
.

https://editor.p5js.org/noelpil/present/Zy6kii7ZR

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [November 5, 2020, 1:38am UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/15 "2020-11-05T01:38:28Z")

</div>

> [@noel](#):
>
> What do you think the decoding of this bar will write[?](https://online-barcode-reader.inliteresearch.com/)

I LOVE PROCESSING! lol

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [November 20, 2020, 12:50am UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/16 "2020-11-20T00:50:59Z")

</div>

-hey, ! well  
No, I couldn’t do it.  
I really don’t know how to approximate the array thing. I understand the concept but I can’t make it work.

```auto
var cols = 10;
var rows = 10;

var colors = [];

function setup() {
  createCanvas(400, 400);
  for (var i=0; i<cols; i++){
    colors[i] = [23];
    for (var j=0; j<rows; j++){
      colors[i][j] = [190];
      
    }
  }
}

function draw() {
  background(220);
    for (var i=0; i<cols; i++){
    for (var j=0; j<rows; j++){
      var x = i * 60;
      var y = j * 60;
      fill(colors[i][j]);
      stroke(0);
      rect(x,y, 60,60);
    }
  } 
}

```

I read the processing tutorial but had to do it on the js editor.  
I really don’t know

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 20, 2020, 4:14am UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/17 "2020-11-20T04:14:22Z")

</div>

Here is the extension of the QR shorthand code above with some comments.  
I created a QR bar [online here](https://qrcode.tec-it.com/en/Raw) and took it to Inkscape drawing some thin lines to facilitate seeing the x-y positions of the blocks as @ddown suggested. It took half an hour puzzling but it’s fun.

```auto
let t = 0;
let index = 0;
let g = 0;

row = [1, 8, 9, 12, 15, 22, 12, 14, 3, 6, 17, 20, 3, 6, 12, 14, 17, 20, 3, 6, 17, 20, 9, 14, 1, 8, 15, 22, 10, 
  12, 1, 3, 5, 8, 18, 22, 1, 4, 14, 17, 19, 21, 7, 12, 17, 19, 8, 11, 13, 15, 16, 18, 4, 11, 14, 16, 17, 19, 20, 22, 
  1, 8, 15, 19, 9, 12, 3, 6, 12, 15, 20, 22, 3, 6, 17, 19, 3, 6, 10, 12, 14, 16, 13, 15, 1, 8, 9, 12, 13, 15, 18, 19, 21, 22];

column = [1, 8, 9, 14, 15, 22, 9, 11, 11, 12, 12, 13, 10, 11, 12, 14, 1, 8, 15, 22, 1, 5, 7, 8, 10, 11, 14, 15, 17, 18, 20, 21, 4, 6, 
  15, 16, 1, 4, 6, 9, 10, 11, 14, 15, 7, 10, 12, 14, 16, 17, 1, 8, 9, 10, 17, 18, 20, 22, 16, 17, 19, 20, 19, 20, 12, 18, 1, 8, 18, 19];

repeat = [3, 1, 2, 3, 2, 1, 2, 1, 3, 3, 2, 3, 1, 3, 2, 1, 3, 2, 3, 1, 5, 3, 1, 1, 1, 0, 2, 2, 0, 6, 2, 2, 2, 2, 1, 1, 3, 2, 0, 1, 1, 2];

function setup() {
  createCanvas(460, 460);
  background(255);
  strokeWeight(20);
  strokeCap(SQUARE);

  for (let y = 20; y < 440; y += 20) { // for every row Y value with a 20 pixel stroke weight
    for (let rpt = 0; rpt < repeat[index]; rpt++) { // repeating in still the same row all the remaining lines 
      let startX = row[t] * 20; // the row array has two subsequent values. First the startX
      let endX = row[t+1] * 20; // second the endX (multiplied by the stroke width pixels amount 20)
      line(startX, y, endX, y); // the row lines (sometimes just one block)
      t += 2; // jump 2 to new startX
    }
    index++;
  }

  for (let x = 30; x < 440; x += 20) { // for every column X value with a 20 pixel stroke weight
    for (let rpt = 0; rpt < repeat[index]; rpt++) { // repeating in still the same column all the remaining lines 
      let startY = column[g] * 20 - 10; // the column array has two subsequent values. First the startY
      let endY = column[g+1] * 20 - 10; // second the endY (multiplied by the stroke width pixels amount 20)
      line(x, startY, x, endY); // the column lines (sometimes just one block)
      g += 2; // jump 2 to new startY
    }
    index++;
  }
}

```

---

<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:** [November 20, 2020, 8:51am UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/18 "2020-11-20T08:51:09Z")

</div>

almost there

your draw() was good, in setup() you forgot to either set the color to black or yellow

here is an example in processing

```auto

int cols = 10;
int rows = 10;

color[][] colors = new color[cols][rows];

void setup() {
  size(400, 400);
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      if (random(1) > 0.5)
        colors[i][j] = 0;
      else 
      colors[i][j] = color( 255, 255, 0 );
    }
  }
}

void draw() {
  background(220);
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      int x = i * 60;
      int y = j * 60;
      fill(colors[i][j]);
      stroke(111);
      rect(x, y, 60, 60);
    }
  }
}

```

Chrisir

---

<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:** [November 20, 2020, 8:57am UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/19 "2020-11-20T08:57:58Z")

</div>

here is another example that shows the coordinates (indexes) of the grid / 2D array

```auto

int cols = 10;
int rows = 10;

color[][] colors = new color[cols][rows];

void setup() {
  size(400, 400);
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      colors[i][j] = color(190); // gray
    }
  }
  colors[2][4] = color( 255, 255, 0 ); // yellow
  colors[5][1] = color( 0, 255, 0 ); // blue
}

void draw() {
  background(220);
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {

      int x = i * 60;
      int y = j * 60;

      fill(colors[i][j]);
      stroke(111);
      rect(x, y, 60, 60);

      fill(0); 
      text(i+","+j, x+23, y+23);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Huno](https://avatars.discourse-cdn.com/v4/letter/h/b38774/32.png) [@Huno](https://discourse.processing.org/u/Huno)\
**Post date:** [November 21, 2020, 2:16am UTC](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837/20 "2020-11-21T02:16:23Z")

</div>

Amazing how I totally forgot about **if** and **else** for the colors. And HONESTLY I read and read and read and saw youtube videos and I never got it.

Thanks a lot for being so kind and sharing. The else was a doubt I had like “how can I change some to be with a different color”  
I will continue to study it and maybe come with some interesting solutions, _like maybe try to draw different shapes or do it 3d, like each iteration goes up a level._ I will try that.

> [@Chrisir](#):
>
> here is another example that shows the coordinates

Also, these example, is amazing for understanding what it’s actually happening. Thanks a lot Chrisir!

[Next page](https://discourse.processing.org/t/how-will-you-approach-this-picture/24837.md?page=2)