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