# Bouncing gradient

**URL:** <https://discourse.processing.org/t/bouncing-gradient/39090>\
**Category:** Coding Questions\
**Created:** [October 5, 2022, 7:28am UTC](https://discourse.processing.org/t/bouncing-gradient/39090 "2022-10-05T07:28:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gradientquestion](https://avatars.discourse-cdn.com/v4/letter/g/8e8cbc/32.png) [@gradientquestion](https://discourse.processing.org/u/gradientquestion)\
**Post date:** [October 5, 2022, 7:28am UTC](https://discourse.processing.org/t/bouncing-gradient/39090/1 "2022-10-05T07:28:40Z")

</div>

Hello !

I am a beginner on processing, I need to make a moving gradient with 3 RGB codes.  
pink: 247,211,237  
blue: 156,217,204  
white: 255,251,233

I found this code here : [https://happycoding.io/examples/processing/for-loops/bouncing-gradient](https://happycoding.io/examples/processing/for-loops/bouncing-gradient) by [happy coding.io](https://happycoding.io):

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

```

I would like to be able to put my colors instead of red, blue and geen, how can I do?  
also when I try to adapt the size of the sketch to my screen it destroys the visual how can I do to adapt it?

Thank you very much for your help!! i really need to understand

I want to make this :

 ![Capture d’écran 2022-10-05 à 15.04.00](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/1/5150a79ac8c503d9998a770be355e0b7d53b3e5b.jpeg)

---

<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:** [October 5, 2022, 3:36pm UTC](https://discourse.processing.org/t/bouncing-gradient/39090/2 "2022-10-05T15:36:03Z")

</div>

Hello @gradientquestion

This additional resource may be of help:

> **[Reference](https://processing.org/reference/colorMode_.html)**
>
> Changes the way Processing interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using t…

---

<div class="post-metadata">

**Author:** ![gradientquestion](https://avatars.discourse-cdn.com/v4/letter/g/8e8cbc/32.png) [@gradientquestion](https://discourse.processing.org/u/gradientquestion)\
**Post date:** [October 6, 2022, 3:21pm UTC](https://discourse.processing.org/t/bouncing-gradient/39090/3 "2022-10-06T15:21:16Z")

</div>

Hello ! thank you for your answer I will study this thankkssss

---

<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:** [December 2, 2022, 6:18pm UTC](https://discourse.processing.org/t/bouncing-gradient/39090/4 "2022-12-02T18:18:58Z")

</div>

**In setup, change this:**

> [@gradientquestion](#):
>
> ```auto
> void setup() {
> size(256, 256);
> noSmooth();
> 
> ```

**To this:**

```auto
void setup() {
  size(400, 400);
  noSmooth();
  colorMode(RGB, 400);

```

> **[colorMode() / Reference](https://processing.org/reference/colorMode_.html)**
>
> Changes the way Processing interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using t…

**Of note, this section:**

“For example, calling **colorMode(RGB, 1.0)** will specify that values are specified between 0 and 1. The limits for defining colors are altered by setting the parameters **max** , **max1** , **max2** , **max3** , and **maxA**.”

However, I do not know specifically, what is happening under the hood…  
**Is this “max” a variable being mapped to, without explicitly calling the map function?**

🤓