you could use polygons to create the ring...

e.g.

Code:

void drawRing(int x, int y, float w1, float w2, int segments)
{
  // w1 == outer radius, w2 == inner radius.
  float deltaA=(1.0/(float)segments)*TWO_PI;
  beginShape(QUADS);
  for(int i=0;i<segments;i++)
  {
    vertex(x+w1*cos(i*deltaA),y+w1*sin(i*deltaA));
    vertex(x+w2*cos(i*deltaA),y+w2*sin(i*deltaA));
    vertex(x+w2*cos((i+1)*deltaA),y+w2*sin((i+1)*deltaA));
    vertex(x+w1*cos((i+1)*deltaA),y+w1*sin((i+1)*deltaA));
  }
  endShape();
} 

you can try varying the number of segments, depending how smooth you want the ring to be, 8 will look octagonal, 32 will look pretty smooth.

It's possible, but it probably involves a fair bit of trigenometry and other maths I think.

I must admit that I king of skimmed your post and failed to see the multi-riug part.

To be honest, the drawing all of one layer, than all of the other, whilst hacky, is probably the easiest way to get the correct end image.

I can think of another way of going about drawing the rings to get the result you want, but it's a fairly odd pixel-centric way.

That would be, for each pixel on screen, work out the distance to all of your ring-centres, then for each ring-centre, work out if the pixel is in the middle part, in the ring, or completely outside, then if the pixel is only outside, it's not coloured, if it's only outside or in the ring, it's coloured, and if it's inside any, it's left. Thoguh this will be slow, and produce exactly the same result as the ellipse(..) method, and I only include it here, as an alternat way of lookign at the problem.

I see arc() working with two circles. I'll have to try at that one after I get a hang of the trigonometry involved.

But as soon as there are three or more circles involved it'll get a lot more complicated. Imagine three circles, the one in the middle, slightly overlapped left and right by the others. Now we need two arcs to describe the outline-segments for the middle circle. Tricky.

I had a go at the "layer"-solution:

Code:

int MAX=100;
// declare array of positions
float[] myxlocs = new float[MAX];
float[] myylocs = new float[MAX];

Ring1[] myRings1 = new Ring1[MAX];
Ring2[] myRings2 = new Ring2[MAX];
Ring3[] myRings3 = new Ring3[MAX];

void setup() {
  size(500,500);
  // fill array with locations
  for(int i=0; i<MAX; i++) {
    myxlocs[i]=random(width);
    myylocs[i]=random(height);
  }

  for (int i = 0; i < MAX; i++) { 
    float tempxp = random(width);
    float tempyp = random(height);
    float tempxv = random(1,1.5);
    float tempyv = random(1,1.5);
    myRings1[i] = new Ring1(tempxp, tempyp, tempxv, tempyv);
    myRings2[i] = new Ring2(tempxp, tempyp, tempxv, tempyv);
    myRings3[i] = new Ring3(tempxp, tempyp, tempxv, tempyv);
  }
  smooth();
} 

void draw() {
  background(255);
  
  for (int i=0; i<MAX; i++) {
    myRings3[i].drive();
    myRings3[i].draw();
  }
  
  for (int i=0; i<MAX; i++) {
    myRings2[i].drive();
    myRings2[i].draw();
  }
  
  for (int i=0; i<MAX; i++) {
    myRings1[i].drive();
    myRings1[i].draw();
  }
}

class Ring1 {

  float xpos;
  float ypos;
  float xvel;
  float yvel;
  float xsize;
  float ysize; 

  Ring1(float xp, float yp, float velx, float vely) {

    xpos = xp;
    ypos = yp;
    xvel = velx;
    yvel = vely;

    xsize = 20;
    ysize = xsize;
  }

  void draw () {
    ellipseMode(CENTER);
   // fill(0,100,255);
    fill(0,255,0);
    noStroke();
    ellipse(xpos, ypos, xsize, ysize);
  }

  void drive () {
    xpos = xpos + xvel;
    if (xpos > width + xsize) { 
	xpos = -xsize-20; 
    }
    ypos = ypos + yvel;
    if (ypos > width + ysize) { 
	ypos = -ysize-20; 
    }
  }
}

class Ring2 {

  float xpos;
  float ypos;
  float xvel;
  float yvel;
  float xsize;
  float ysize; 
  
  Ring2(float xp, float yp, float velx, float vely) {
    xpos = xp;
    ypos = yp;
    xvel = velx;
    yvel = vely;

    xsize = 30;
    ysize = xsize;
  }

  void draw () {
    ellipseMode(CENTER);
    fill(255,255,255);
    noStroke();
    ellipse(xpos, ypos, xsize, ysize);
  }

  void drive () {
    xpos = xpos + xvel;
    if (xpos > width + xsize) { 
	xpos = -xsize+20-20; 
    }
    ypos = ypos + yvel;
    if (ypos > width + ysize) { 
	ypos = -ysize+20-20; 
    }
  }

}

class Ring3 {

  float xpos;
  float ypos;
  float xvel;
  float yvel;
  float xsize;
  float ysize; 

  Ring3(float xp, float yp, float velx, float vely) {
    xpos = xp;
    ypos = yp;
    xvel = velx;
    yvel = vely;

    xsize = 40;
    ysize = xsize;
  }

  void draw () {
    ellipseMode(CENTER);
    fill(0,150,200);
    noStroke();
    ellipse(xpos, ypos, xsize, ysize);
  }

  void drive () {
    xpos = xpos + xvel;
    if (xpos > width + xsize) { 
	xpos = -xsize+40-20; 
    }
    ypos = ypos + yvel;
    if (ypos > width + ysize) { 
	ypos = -ysize+40-20; 
    }
  }
}

 

It actually works good enough. It's still very unelegant to use three classes, but I didn't see another way to seperate all the layers from each other. Whats your take?

Now that's what I call cleaning up. Goes to show that I've still some way to go getting my coding together.

I actually remember seeing the levitated-piece, but without checking on the details. Seems like it's quite allright to fake it every now and then.