Variations of color on a loop

[humano]

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

[jafal]

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

[humano]

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

[jafal]

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

[humano]

Exactly! That is what I was trying with my Code

[jafal]

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

[humano]

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

[jafal]

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

[humano]

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

[glv]

Hello,

@humano

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?

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:

Welcome to Processing!

Have fun!

:)

[humano]

Thank you so much, that is amazing!

[glv]

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

:)

[humano]

awesome! How can I thank you?!