# Variations of color on a loop

Hi there! I have been working on this loop recently and it is almost perfect, but I want to make little variations between points and when I use random on hue, or saturation or brightness all of them are the same. Could you please help me with this?

``````float u = 0;
float v = 0;
float w = 0;
size(1000,1000);
colorMode(HSB, 360, 100, 100);
strokeCap(ROUND);

stroke(random(295,305),100,100);
for (int x = 0; x < 1000; x += 12) {
for (int y = 0; y < 1000; y += 12) {
u = u + 0.1;
v = v + 0.11;
w = w + 0.1;

float n = noise(u) * 1000;
float m = noise(v) * 1000;
float l = noise(x/100.0, y/100.0)*18;

strokeWeight(l);
point(n,m);

}
}
``````

Hi

``````float u = 0;
float v = 0;
float w = 0;
void setup(){
size(1000,1000);
colorMode(HSB, 100, 100, 100);

}

void draw(){
background(0);

strokeCap(ROUND);

stroke(random(0,100),100,100);
for (int x = 0; x < 1000; x += 12) {
for (int y = 0; y < 1000; y += 12) {
u = u + 0.1;
v = v + 0.11;
w = w + 0.1;

float n = noise(u) * 1000;
float m = noise(v) * 1000;
float l = noise(x/100.0, y/100.0)*18;

strokeWeight(l);
point(n,m);
}
}
}

``````

Thanks, but It is a static picture, It is not an animation

Do you want to make each point with random color or what?

Exactly! That is what I was trying with my Code

Hi
Replacing point with small circle close to your demand if itâ€™s fine with you

``````float u = 0;
float v = 0;
float w = 0;
void setup(){
size(1000,1000);
colorMode(HSB, 100, 100, 100);

}
void draw(){
background(0);
//strokeCap(ROUND);
//stroke(random(0,100),100,100);
for (int x = 0; x < 1000; x += 12) {
for (int y = 0; y < 1000; y += 12) {
u = u + 0.1;
v = v + 0.11;
w = w + 0.1;
float n = noise(u) * 1000;
float m = noise(v) * 1000;
float l = noise(x/100.0, y/100.0)*18;
//strokeWeight(155);
fill(random(0,100), random(0,100), random(0,100));
ellipse (n,m,1+l,l+1);
noLoop();
}
}
}
``````
1 Like

Thank you so much @jafal . Could you help me with something else? I have replaced ellipses for rect swith different type of corners to make it a litlle more organic. I would like to revitalize it giving every dot a different rotation, but obviously is not like this!

``````float u = 0;
float v = 0;
float w = 0;
void setup(){
size(1000,1000);
colorMode(HSB, 100, 100, 100);

}
void draw(){
background(0);
for (int x = 0; x < 1000; x += 12) {
for (int y = 0; y < 1000; y += 12) {
u = u + 0.1;
v = v + 0.11;
w = w + 0.1;
float n = noise(u) * 1000;
float m = noise(v) * 1000;
float l = noise(x/100.0, y/100.0)*20;
noStroke();
fill(random(0,100), random(0,100), random(0,100));
//rotate(PI/random(1,5));
rect(n,m,l,l,random(0,100), random(0,100), random(0,100), random(0,100));
noLoop();
}
}
}
``````

Hi
I am not sure that I understand what you ask for do you want random rotation and random size and random rect shape at once

Yeah , that is Life: everything random
Here se can see all the dots are paralelo and I would like to make some of them more leaning. Do you think there is an easy way?

``````float u = 0;
float v = 0;
float w = 0;
void setup(){
size(1000,1000);
colorMode(HSB, 100, 100, 100);

}
void draw(){
background(0);
for (int x = 0; x < 1000; x += 12) {
for (int y = 0; y < 1000; y += 12) {
u = u + 0.1;
v = v + 0.11;
w = w + 0.1;
float n = noise(u) * 1000;
float m = noise(v) * 1000;
float l = noise(x/100.0, y/100.0)*200;
noStroke();
fill(random(0,100), random(0,100), random(0,100));
//rotate(PI/random(1,5));
rect(n,m,l,l,random(0,100), random(0,100), random(0,100), random(0,100));
noLoop();
}
}
}
``````

Hello,

An example:

``````float u = 0;
float v = 0;
float w = 0;

void setup()
{
size(800, 400);
colorMode(HSB, 360, 100, 100);
noLoop();
}

void draw()
{
background(0);
for (int x = 0; x < 1000; x += 120)
{
for (int y = 0; y < 1000; y += 120)
{
u = u + 0.1;
v = v + 0.11;
w = w + 0.1;
float n = noise(u) * 400;
float m = noise(v) * 400;
float l = noise(x/100.0, y/100.0)*200;
noStroke();
fill(random(0, 360), random(0, 100), random(0, 100));
//rotate(PI/random(1,5));

rectMode(CENTER);

// Left:
rect(n, m, l, l, random(0, 100), random(0, 100), random(0, 100), random(0, 100));

// Right:
push();
translate(width/2, 0);
translate(n, m);
rotate(random(0, TAU));
rect(0, 0, l, l, random(0, 100), random(0, 100), random(0, 100), random(0, 100));
pop();
}
}
}

void keyPressed()
{
redraw();
}
``````

I added some code for you to examine with a â€śLeftâ€ť and â€śRightâ€ť to see the differences and redraw() when a key is pressed.

I encourage you to go through the resources here:

Have fun!

`:)`

2 Likes

Thank you so much, that is amazing!

1 Like

Hello @humano,

I see that you are exploring noise these daysâ€¦ `:)`

I modified example above to increment x and y over time so you can see the progression of the noise with each frame.

``````float u = 0;
float v = 0;
float w = 0;

int y;
int x;

void setup()
{
size(800, 400);
colorMode(HSB, 360, 100, 100);
background(128);
//noLoop();
}

void draw()
{
//background(0);
//for (int x = 0; x < 1000; x += 120)
//  {
//  for (int y = 0; y < 1000; y += 120)
//    {

y = frameCount/1000; //Integer math!
x = frameCount%1000;

// Resets after 1024 frames:
if (frameCount%1024 == 0)
{
keyPressed();
}

u = u + 0.1;
v = v + 0.11;
w = w + 0.1;
float n = noise(u) * 400;
float m = noise(v) * 400;
float l = noise(x/100.0, y/100.0)*200;
noStroke();
fill(random(0, 360), random(0, 100), random(0, 100));
//rotate(PI/random(1,5));

rectMode(CENTER);

// Left:
push();
//rect(n, m, l, l, random(0, 100), random(0, 100), random(0, 100), random(0, 100));
stroke(60, 100, 100);
strokeWeight(3);
point(n, m);
pop();

// Right:
push();
translate(width/2, 0);
translate(n, m);
rotate(random(0, TAU));
rect(0, 0, l, l, random(0, 100), random(0, 100), random(0, 100), random(0, 100));
pop();
//  }
//}
}

void keyPressed()
{
background(128);
x = 0;
y = 0;
redraw();
}
``````

`:)`

1 Like

awesome! How can I thank you?!