Loops that draws gradient circles across and down the screen

p5.js Beginners
1

Hello,
I just started using processing a couple of days ago and started experimenting with loops. I’ve created some coding that would draw a circle within a circle and successively get small. I want to create a loop that draws these circles across and down the screen but I am confused on how to do that. the code I have created is very repetitive with only the position of the circles changing. I really need some help.

this is my code:

void setup()
{
  size (512,348);
  background (255);
}
  void draw()
  {
  float w=width-422;
  while (w>0) 
  {
    noStroke();
    fill(w);
    ellipse(width-462, height-298,w,w); 
    w=w- 20;}
    
    float a=width-422;
  while (a>0) 
  {
    noStroke();
    fill(a);
    ellipse(147, 50,a,a); 
    a=a- 20;}
    
    
   float b=width-422;
  while (b>0) 
  {
    noStroke();
    fill(b);
    ellipse(244, 50,b,b); 
    b=b- 20;}
    
     float c=width-422;
  while (c>0) 
  {
    noStroke();
    fill(c);
    ellipse(341, 50,c,c); 
    c=c- 20;}
    
     float d=width-422;
  while (d>0) 
  {
    noStroke();
    fill(d);
    ellipse(438, 50,d,d); 
    d=d- 20;}
    
 println(mouseX," ",mouseY);
  }
2

Please learn how to format your code.

3

You’re doing this is way that could work, but is a little weird.

Your approach is:

  1. Draw a bunch of large dark circles.
  2. Then draw a bunch of smaller, slightly lighter circles on top of them.
  3. Then draw a bunch of even smaller, even more slightly lighter circles on top of them.
  4. Then draw a bunch of even more smaller, even more slightly lighter circles on top of them.

And… that works.

But you could also do it this way:

  1. Draw the first circle first, and then the smaller circle on top of it, and the second one on top of it, and the third one on top of it. So the first circle is completely done.
  2. Move to where the next circle is and do the same thing.

In short, I would suggest you just get one complete circle working first! Don’t worry about loops that do positions. Just worry about loops that deal with the size of the circles and the color of the circles… for one complete circle.

Once you have one of them working, you can move it into a function to call to draw the complete circle at any position you like. Then you can worry about loops that change positions.

2 Likes