How to introduce gradient into ellipse

Hi, I am learning to program with processing and I need help.I need to paint the balls with gradient, It has to look like this:

My code:

int columns = 20; // Número de columnes
int rows = 10; // Número de files
float diameter; // Diametre dels cercles
float width_columns, height_rows; // Amplada de les columnes i alçada de les files
int r = 255;
int g = 0;
int b = 0;
void setup() {
size(800, 400); // Mida del llenç
background(255); // Fons blanc
textSize(18); // Mida del text
fill(0); // Farcit del text
stroke(0); // Contorn del text
}
void draw() {
width_columns = width/columns; // Calculem l'amplada de les columnes
height_rows = height/rows; // Calculem l'alçada de les files
for(int i=0; i < rows; i++){ // Recorrem les files
for(int j=0; j < columns; j++){ // Recorrem les columnes
noStroke();
fill(r,g,b);
ellipse (j*width_columns + width_columns/4, i*height_rows + height_rows/2,40,40 );
  for (int columns = 0; columns < width; columns++) {
    for(int rows = 0; rows < height; rows++) {
}}
}}
}

How can I do it? Thank you so much!

Hello,

Please format your code:
https://discourse.processing.org/faq#format-your-code
UPDATE Thanks for formatting!

Consider using:
https://processing.org/reference/lerpColor_.html

There is a Linear Gradient example in there!

Start first with lerping along the columns (or rows) from:

  • from c1 to c2
  • amt is from j to columns which is mapped from 0 to 1

image

It looks like you have two nested loops in your code; one is not used.
I only used one nested loop.

When you are ready think about the next step… this will require some thought!

image

:)

3 Likes