Gradients with different colors

Processing
1

Hi there

I want to make a picture as the picture attached.

IMG_20210517_210007
IMG_20210517_2100071080×1085 79.6 KB

I have found a Code about gradients that I wanted to use, but I dont understand anything :sweat_smile:

I would like to know what I need to change to use another colors and to Move the core of the diferent colors. Can you please help me?

</>

float redX;
float redY;
float redXSpeed;
float redYSpeed;

float greenX;
float greenY;
float greenXSpeed;
float greenYSpeed;

float blueX;
float blueY;
float blueXSpeed;
float blueYSpeed;

void setup() {
size(256, 256);
noSmooth();

redX = random(width);
redY = random(height);
redXSpeed = random(-1, 1);
redYSpeed = random(-1, 1);

greenX = random(width);
greenY = random(height);
greenXSpeed = random(-1, 1);
greenYSpeed = random(-1, 1);

blueX = random(width);
blueY = random(height);
blueXSpeed = random(-1, 1);
blueYSpeed = random(-1, 1);
}

void draw() {

redX += redXSpeed;
redY += redYSpeed;
if (redX < 0 || redX > width) {
redXSpeed *= -1;
}
if (redY < 0 || redY > height) {
redYSpeed *= -1;
}

greenX += greenXSpeed;
greenY += greenYSpeed;
if (greenX < 0 || greenX > width) {
greenXSpeed *= -1;
}
if (greenY < 0 || greenY > height) {
greenYSpeed *= -1;
}

blueX += blueXSpeed;
blueY += blueYSpeed;
if (blueX < 0 || blueX > width) {
blueXSpeed *= -1;
}
if (blueY < 0 || blueY > height) {
blueYSpeed *= -1;
}

for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
float redDistance = dist(x, y, redX, redY);
float greenDistance = dist(x, y, greenX, greenY);
float blueDistance = dist(x, y, blueX, blueY);

  stroke(redDistance, greenDistance, blueDistance);
  point(x, y);
}

}
}

</>

2

Hello @humano

I think it’s a great exercise to look at found code.
Could you be more specific about what you don’t understand?
The structure of the program or its flow? The syntax? Please be more specific.

Personally, when I’m trying to parse found code, I start by going through and changing number assignments to variables one at a time. This way I can begin to see the effect each variable has on the sketch appearance. This will not answer all questions however it is a good place to start.
:nerd_face:

3

Sorry, the Code was

void setup() {
  size(256, 256);
  noSmooth();
}

void draw() {
  for(int y = 0; y < height; y++){
    for(int x = 0; x < width; x++){
      float distanceFromTopLeft = dist(x, y, 0, 0);
      float distanceFromTopRight = dist(x, y, width, 0);
      float distanceFromBottomLeft = dist(x, y, 0, height);
      
      stroke(distanceFromTopLeft, distanceFromTopRight, distanceFromBottomLeft);
      point(x, y);
    }
  }
}

I change dist(x,y) but cores are still un the corners

4

So the found code is animated. Do you want animation? Or are you isolating this static section in order to manually change the variables?
When I look at the found code it looks like it’s the second set of numbers in the dist(x, y, 0, 0) that controls the change.
So instead of :

dist(x, y, 0, 0);

try

dist(x, y, 100, 100);

and you should see this is where the color location is controlled.

:nerd_face:

5

Hey, pls use
set(x, y, color(distanceFromTopLeft, distanceFromTopRight, distanceFromBottomLeft));
its much faster than point().

6

I added the variables from the found code for the red channel that I think is needed to carry out the effect you want. So additionally the same would have to happen in the green and blue channels as well.
But am showing only the addition of the variables for red here for demonstration purposes.
Hopefully this helps. :slight_smile:

///////////////////////////////////////////////////////////////

float redX; // I think you need these 4 variables (as seen in the found code) in order to get the back and forth effect
float redY;
float redXSpeed;
float redYSpeed;

void setup() {
  size(256, 256);
  noSmooth();
  
  
  redX = random(width);
  redY = random(height);
  redXSpeed = 7; // I randomly chose "7" to speed up the movement of color so easier to see
  redYSpeed = 7;
}

void draw() {
  
  redX += redXSpeed;
  redY += redYSpeed;
  if (redX < 0 || redX > width) {
    redXSpeed *= -1;
  }
  if (redY < 0 || redY > height) {
    redYSpeed *= -1;
  }
  
  for(int y = 0; y < height; y++){
    for(int x = 0; x < width; x++){
      float distanceFromTopLeft = dist(x, y, redX, redY);
      float distanceFromTopRight = dist(x, y, width, 0);
      float distanceFromBottomLeft = dist(x, y, 0, height);
      println(x, y);
      
      
      stroke(distanceFromTopLeft, distanceFromTopRight, distanceFromBottomLeft);
      point(x, y);
    }
  }
}