Different function to every ellipse

Processing Coding Questions
1

Hi, I’m doing this thing, trying to make every ellipse appear and disappear with the same function but in a different time, like if every ellipse is in a different moment of the sine function.
I can write the function as I want, but I don’t know how to make the difference with every ellipse.

float a;
float b;
void setup() {
  size(900, 900);
}

void draw() {
  background(227,227,227);
  a=(220+ sin(b)*227)/2;
  noStroke();
  fill(227,227,a);
  for (int y=60; y<height; y+=60) {
    for (int x=60; x<width; x+=60) {
           ellipse(x, y, 60, 60);
    }
  }
  b+=0.02;
}

I’ve tried with random, but I don’t know how to make it right:

float a;
float b;
float c;
void setup() {
  size(900, 900);
  c=random(100);
}

void draw() {
  background(227,227,227);
  a=(2200+ sin(b+c)*227)/2;
  noStroke();
  fill(227,227,a);
  for (int y=60; y<height; y+=60) {
    for (int x=60; x<width; x+=60) {
           ellipse(x, y, 60, 60);
    }
  }
  b+=0.02;
}

I thank any help

1 Like
2 
float a;
float b;
void setup() {
  size(900, 900);
}

void draw() {
  background(227,227,227);
  noStroke();
  
  for (int y=60; y<height; y+=60) {
    for (int x=60; x<width; x+=60) {
        a=(220+ sin((b+(x+y)/10))*227)/2;
        fill(227,227,a);
       ellipse(x, y, 60, 60);
    }
  }
  b+=0.02;
}

The key lies in setting the fill color for every circle individually. That means these two lines of code need to be executed for every ellipse individually:

a=(220+ sin(b+((x+y)/10))*227)/2;
fill(227,227,a);

As you can see, (x+y)/10 is added to b in the sin() function. It’s as if a circle with a high x and y position is further ahead in time than one with a low x and y position. This creates this diagonal gradient. You could also add just x or y, or any other mathematical combination of the two.

1 Like
3

And here is a proper fix with a few more nice changes. This one assigns each circle it’s own “starting position” along the sin curve in a 2D array.

float a;
float[][] b;
void setup() {
  size(900, 900);
  b = new float[(height-60)/60][(width-60)/60];
  for (int y=0; y<(height-60)/60; y++) {
    for (int x=0; x<(width-60)/60; x++) {
      b[x][y] = random(TWO_PI);
    }
  }
}

void draw() {
  background(227, 227, 227);
  noStroke();
  for (int y=0; y<(height-60)/60; y++) {
    for (int x=0; x<(width-60)/60; x++) {
      a=(220+ sin(b[x][y])*227)/2;
      fill(227, 227, a);
      ellipse(60 + 60 * x, 60 + 60 * y, 60, 60);
      b[x][y]+=0.02;
    }
  }
}
1 Like
4

Thank you, WeinSim and TfGuy44,
the solution more concrete I was looking for is TfGuy44’s, it’s perfect, I didn’t know that could be done. Now understand more things, even about the sine function.

Thank you very much!