Gradient Shape Grid

[flipercliper]

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

[Chrisir]

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+

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):

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

Hey, and welcome to the forum!

Great to have you here!

Warm regards,

Chrisir

[SNICKRS]

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.

[micycle]

@flipercliper

I need a grid of forms that evolve graduatelly to others

Something like this?

[Chrisir]

Or here…

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);
}

[jafal]

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]);
  }
}

[jafal]

Ep.9 Processing 3D tutorial | Grid with rotateX, rotateY and scale (Creative coding)

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

[flipercliper]

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!

[flipercliper]

Definitely gonna use it, thanks! great help.

[flipercliper]

kind of! but not exactly. Check the answer: Gradient Shape Grid - #9 by flipercliper

thanks!

[Chrisir]

@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.

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.

[flipercliper]

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.

[jafal]

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;
}

[Chrisir]

@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

[jafal]

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

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]);
  }
}