I created a class for each gradient, in order to use 2DArrays, but it's not working. I've followed some tutorials and saw the explanation by Shifmann, so I don't get why it's wrong (it only shows 1 circle and not 9). I want to create a grid, 3 by 3, and currently it's only showing 1 circle

float posY = 200;
int cols = 3;
int rows = 3;
Gradient[][]grad = new Gradient[cols][rows];


void setup() {
  size(600, 800);

  smooth();
  int raio = 30;
  color c1 = color (253, 196, 80, 40);
  color c2 = color(254, 127, 168, 40);
  for (int i=0; i<cols; i  ) {
    for (int j=0; j<rows; j  ) {
      grad[i][j] = new Gradient (i*150, j*200, raio, c1, c2);
    }
  }

  ellipseMode(RADIUS);

  noStroke();
}

void draw () {

  background (#F6C4C7);

  for (int i = 0; i < cols; i  ) {
    for (int j = 0; j < rows; j  ) {
      grad[i][j].desenhar_grad();
    }
  }
}


void keyPressed()
{
  if (key == 's') keyDown = true;
  saveFrame("ellipse.jpg");
  //saveFrame("ellipse.png");
  println("sss");
}

class Gradient {

  float x;
  float y;
  color cor1;
  color cor2;
  int raio;

  Gradient(float posX, float posY, int r, color c1, color c2) {
    x=posX;
    y=posY;
    raio=r;
    cor1=c1;
    cor2=c2;
  }

  void desenhar_grad() {
    pushStyle();
    noStroke();
    for (int r = raio; r > 0; r--) {
      int tom = lerpColor(cor1, cor2, map(r, 0, raio, 0.0, 1.0)); // os últimos dois valores são as cores. o primeiro é o centro, o segundo é o exterior
      fill(tom);
      circle(posX, posY, r * 2);
    }
    popStyle();
  }
}```

CodePudding user response：

The names of the coordinate attributes are x and y:

circle(posX, posY, r * 2);

circle(x, y, r * 2);