# Gradient Shape Grid

**URL:** <https://discourse.processing.org/t/gradient-shape-grid/27604>\
**Category:** Coding Questions\
**Created:** [February 5, 2021, 12:40pm UTC](https://discourse.processing.org/t/gradient-shape-grid/27604 "2021-02-05T12:40:40Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![flipercliper](https://avatars.discourse-cdn.com/v4/letter/f/e36b37/32.png) [@flipercliper](https://discourse.processing.org/u/flipercliper)\
**Post date:** [February 5, 2021, 12:40pm UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/1 "2021-02-05T12:40:40Z")

</div>

Hi everyone!

New to the forum but have been following you for a while and you all are doing a gret job with the open source. I’ve been doing some simple projects with processing but this is quite tricky for me…

I need a grid of forms that evolve graduatelly to others depending of some parameters (for the moment it can be random parameters and then i’ll try to adapt it to my inputs). I attach a picture that i made manually showing the kind of gradient that I’m looking for.

Any help would be great! Don’t need the entire solution but some clues would be awesome. Thanks! I’ll be reading you.!

![gridjpg_Mesa de trabajo 1 copia](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cc94a101501c3b09e115e5f2992ff729aa2aa133.jpeg)

---

<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:** [February 5, 2021, 12:56pm UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/2 "2021-02-05T12:56:48Z")

</div>

Hello,

this is a grid of ellipses.

A grid is often done by a nested for-loop. This means a for-loop inside another for-loop.

The logic is: for 10 lines for 10 columns draw an ellipse.

Use the ellipse() command, see reference: [Language Reference (API) \ Processing 3+](https://www.processing.org/reference/)

Additionally you change the ellipses near to mouse to a diamond. You can use (when x,y are the positions you calculate with the for-loops):

```auto
if(dist(mouseX,mouseY, x,y) < 30) { 
 // diamond 
} else { 
// ellipse 
}

```

Hey, and welcome to the forum!

Great to have you here!

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![SNICKRS](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@SNICKRS](https://discourse.processing.org/u/SNICKRS)\
**Post date:** [February 5, 2021, 2:27pm UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/3 "2021-02-05T14:27:47Z")

</div>

Hello! Processing has a version of the rect() function that allows you to curve the object. First use the nested for-loop like Chrisir mentioned then use a `rect()` command to make a circle: `rect(10, 10, 10, 10, 1000);` As time passes, use `millis()` to track the time and then lower the curve of the rectangle which is the 5th variable. You can easily control this with a variable, maybe using `map()` for controlling the curve.

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [February 6, 2021, 2:51pm UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/4 "2021-02-06T14:51:11Z")

</div>

> [@flipercliper](#):
>
> I need a grid of forms that evolve graduatelly to others

Something like this?  
 ![ezgif.com-gif-maker](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2c8f1bb60ca124c477bf6bbf31f3adcb509ee52a.gif)

---

<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:** [February 6, 2021, 9:43pm UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/5 "2021-02-06T21:43:17Z")

</div>

Or here…

```auto
void setup() {
  size(800, 800);
  background(0);
  // **********************************
  rectMode(CENTER); 
  ellipseMode(CENTER);
  // **********************************
}

void draw() {
  background(0); 
  for (int x=0; x < 600; x+=60)
    for (int y=0; y < 600; y+=60)
      if (dist(mouseX, mouseY, x, y) < 140) { 
        // diamond
        float roundness = map( dist ( x+30, y+30, mouseX, mouseY), 0, 180, 0, 60); 
        rect(x+30, y+30, 50, 50, 
          roundness);
      } else { 
        // ellipse
        ellipse(x+30, y+30, 59, 59);
      }

  fill(255); 
  text("Move the mouse over the grid", 
    30, 720);
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 7, 2021, 5:25pm UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/6 "2021-02-07T17:25:03Z")

</div>

```auto
int[] x = new int[pages];
int[] y = new int[pages];
int[] z = new int[pages];

void setup() {
  size(500, 400, P3D);
  noFill();
  stroke(0, 155, 0);
  smooth();
  for(int p = 0; p<pages; p++) {
    x[p] = int(random(-150, 150));
    y[p] = int(random(-150, 0));
    z[p] = int(random(-150, 150));
  }
}
void draw() {
  background(255);
  
  translate(width/2, height/2);
  
  rotateY(map(mouseX, 0, width, 0, TWO_PI));
  
  //box(300);
  for(int p = 0; p<pages; p++) {
    strokeWeight(1);
    bezier(0, 150, 0, 0, -150, 0, x[p], y[p], z[p], x[p], y[p], z[p]);
    strokeWeight(8);
    point(x[p], y[p], z[p]);
  }
}

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 8, 2021, 6:04pm UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/7 "2021-02-08T18:04:34Z")

</div>

[![](https://img.youtube.com/vi/Y1D-0whVBac/maxresdefault.jpg "Ep.9 Processing 3D tutorial | Grid with rotateX, rotateY and scale (Creative coding)") ](https://www.youtube.com/watch?v=Y1D-0whVBac)

---

<div class="post-metadata">

**Author:** ![flipercliper](https://avatars.discourse-cdn.com/v4/letter/f/e36b37/32.png) [@flipercliper](https://discourse.processing.org/u/flipercliper)\
**Post date:** [February 9, 2021, 11:08am UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/8 "2021-02-09T11:08:38Z")

</div>

Interesting! but how can I reference the  
" int[] x = new int[pages];  
int[] y = new int[pages];  
int[] z = new int[pages]; "

Appeared the error " pages cannot be resolved to a variable "

Thanks!

---

<div class="post-metadata">

**Author:** ![flipercliper](https://avatars.discourse-cdn.com/v4/letter/f/e36b37/32.png) [@flipercliper](https://discourse.processing.org/u/flipercliper)\
**Post date:** [February 9, 2021, 11:21am UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/9 "2021-02-09T11:21:18Z")

</div>

Thanks mate, it looks pretty similar of what I’m looking for. It’s a great help.

But for the application that i really need, it doesn’t depends of the variable mouse and don’t have to be changing.

I’m looking for a fix image grid of a few “focus” of squares and others of circles positioned randomly over the canvas. And every time Runs the code generate a different image with the focus of shapes positioned differently. And the “shape gradient” from focus of squares to the focus of circles linking both shapes.

Don’t know if i explained well, but yours it’s a great help so far. I’ll be playing with that. Cheers!

---

<div class="post-metadata">

**Author:** ![flipercliper](https://avatars.discourse-cdn.com/v4/letter/f/e36b37/32.png) [@flipercliper](https://discourse.processing.org/u/flipercliper)\
**Post date:** [February 9, 2021, 11:22am UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/10 "2021-02-09T11:22:28Z")

</div>

Definitely gonna use it, thanks! great help.

---

<div class="post-metadata">

**Author:** ![flipercliper](https://avatars.discourse-cdn.com/v4/letter/f/e36b37/32.png) [@flipercliper](https://discourse.processing.org/u/flipercliper)\
**Post date:** [February 9, 2021, 11:24am UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/11 "2021-02-09T11:24:12Z")

</div>

kind of! but not exactly. Check the answer: [Gradient Shape Grid - #9 by flipercliper](https://discourse.processing.org/t/gradient-shape-grid/27604/9)

thanks!

---

<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:** [February 9, 2021, 11:56am UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/12 "2021-02-09T11:56:26Z")

</div>

> [@flipercliper](#):
>
> a few “focus” of squares and  
> others [foci] of circles positioned randomly over the canvas

ok, so like mouseX and mouseX (a focus), the rects are positioned around a few foci (let’s assume that#s the Plural of focus)

also, around a few other foci, circles are positioned.

```auto
XOOOOOXXX
OOOOOOXOO
OOOOOOOxO
XXXOOOOOO

```

Questions:  
Are there empty spaces or is there always a shape (in whichever form)?

**The gradients**

Questions: you like the concept of a roundness that changes the shape gradually?  
I this what you mean?  
With multiple foci, we need to take different foci into account for each shape, right? My idea would be to :

- for each shape add the distances of **all** rect foci (for-loop) and sub the distances of **all** circle foci (for-loop). The result (or average) can be mapped to the desired roundness.

---

<div class="post-metadata">

**Author:** ![flipercliper](https://avatars.discourse-cdn.com/v4/letter/f/e36b37/32.png) [@flipercliper](https://discourse.processing.org/u/flipercliper)\
**Post date:** [February 9, 2021, 12:53pm UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/13 "2021-02-09T12:53:55Z")

</div>

Yes! I think you got the idea.

**A:**  
There are not empty spaces  
**Gradients:**  
the idea of roundness is exactly the gradient that i want, but also playing with the rotation of the square being 45 degrees in the centre of the foci (to look like a “diamond”)

And yes, we need different foci. To make it simple let’s make only one type of foci (the diamonds) and the rest the circles around the foci.  
Your idea looks useful, but as I said with only the diamond foci could work. I tried it, but with my **basic** skills of coding I’m a bit lost.

I think the concept would be:

- Make the grid with the for-loops
- Select several (let’s say 4) shapes of that grid randomly. I think it would be someting like  
**if ((x=random) && (y=random)) {**  
but for several coordinates.
- And convert them in diamonds with that roundness gradient around them
- The rest can be circles  
**else { ellipse;}**

Really apreciate your help, I’ll keep trying.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 9, 2021, 2:54pm UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/14 "2021-02-09T14:54:44Z")

</div>

```auto
float rot = 0;

void setup() {
  size(400, 400);
  background(100, 200, 50);
  smooth();
  noStroke();
}
void draw_rotating_rectangle(float x, float y, float rect_size, float r) {
  translate(x, y);
  rotate(r);
  rect(0, 0, rect_size, rect_size);
  resetMatrix();
}
void draw() {
  background(100, 200, 50);

  float x = 0;
  while (x < 8) {
    float y = 0;
    while (y < 8) { 
      // we give a unique rotation amount to each rectangle, depending
      // on which column and row the rectangle is located (x and y)
      draw_rotating_rectangle(50 + x * 40, 50 + y * 30, 16, rot + x + y);
      y = y + 1;
    }
    x = x + 1;
  }
  rot = rot + 0.05;
}

```

---

<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:** [February 10, 2021, 10:13am UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/15 "2021-02-10T10:13:42Z")

</div>

> [@flipercliper](#):
>
> Select several (let’s say 4) shapes of that grid randomly. I think it would be someting like  
> **if ((x=random) && (y=random)) {**  
> but for several coordinates

No, you would make for example 2 arrays, one for the pos of circle foci, one for pos of rect foci (or x,y arrays for each foci list). You **store** the loci there before starting the grid.

You use the 2 arrays to make the grid.

Chrisir

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [February 23, 2021, 5:31am UTC](https://discourse.processing.org/t/gradient-shape-grid/27604/16 "2021-02-23T05:31:57Z")

</div>

> [@flipercliper](#):
>
> Interesting! but how can I reference the  
> " int x = new int[pages];  
> int y = new int[pages];  
> int z = new int[pages]; "
> 
> Appeared the error " pages cannot be resolved to a variable "
> 
> Thanks!

```auto
int pages = 300;
int[] x = new int[pages];
int[] y = new int[pages];
int[] z = new int[pages];

void setup() {
  size(500, 400, P3D);
  noFill();
  stroke(0, 155, 0);
  smooth();
  for(int p = 0; p<pages; p++) {
    x[p] = int(random(-150, 150));
    y[p] = int(random(-150, 0));
    z[p] = int(random(-150, 150));
  }
}
void draw() {
  background(255);
  
  translate(width/2, height/2);
  
  rotateY(map(mouseX, 0, width, 0, TWO_PI));
  
  //box(300);
  for(int p = 0; p<pages; p++) {
    strokeWeight(1);
    bezier(0, 150, 0, 0, -150, 0, x[p], y[p], z[p], x[p], y[p], z[p]);
    strokeWeight(8);
    point(x[p], y[p], z[p]);
  }
}

```