# Gradients with different colors

**URL:** <https://discourse.processing.org/t/gradients-with-different-colors/30143>\
**Category:** Processing\
**Created:** [May 18, 2021, 1:14am UTC](https://discourse.processing.org/t/gradients-with-different-colors/30143 "2021-05-18T01:14:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [May 18, 2021, 1:14am UTC](https://discourse.processing.org/t/gradients-with-different-colors/30143/1 "2021-05-18T01:14:59Z")

</div>

Hi there

I want to make a picture as the picture attached.

 ![IMG_20210517_210007](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e760b957acf965a70014074a7a2e7ad71eb87f5d.jpeg)

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

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

```

}  
}

\</\>

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 18, 2021, 1:56am UTC](https://discourse.processing.org/t/gradients-with-different-colors/30143/2 "2021-05-18T01:56:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [May 18, 2021, 2:36am UTC](https://discourse.processing.org/t/gradients-with-different-colors/30143/3 "2021-05-18T02:36:54Z")

</div>

Sorry, the Code was

```auto
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

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 18, 2021, 3:26am UTC](https://discourse.processing.org/t/gradients-with-different-colors/30143/4 "2021-05-18T03:26:02Z")

</div>

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.

🤓

---

<div class="post-metadata">

**Author:** ![Flolo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/flolo/32/13874_2.png) [@Flolo](https://discourse.processing.org/u/Flolo)\
**Post date:** [May 18, 2021, 9:50am UTC](https://discourse.processing.org/t/gradients-with-different-colors/30143/5 "2021-05-18T09:50:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 18, 2021, 4:08pm UTC](https://discourse.processing.org/t/gradients-with-different-colors/30143/6 "2021-05-18T16:08:54Z")

</div>

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

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

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

```