Bouncing gradient

Processing Coding Questions
1

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 by happy coding.io:

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
Capture d’écran 2022-10-05 à 15.04.001624×881 154 KB

2

Hello @gradientquestion

This additional resource may be of help:

2 Likes
3

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

4

In setup, change this:

To this:

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

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?

:nerd_face: