This seems like it should be simple, but I just can't get it. I'm trying to get Processing to draw rings something like these: http://infosthetics.com/archives/today_mobile_phone2.jpg

I want simple circular rings, semi-transparent with the hole in the ring off centre. I've tried:
- the Geomerative library but it's rings render oddly (zig-zag lines in what should be a solid fill) so I didn't push too far there.
- creating an ellipse with no fill and a heavy strokeWeight. Looks great, but obviously the hole is centred.
- considered overlapping two rings create with the heavy stroke ellipse method, one for the outer circle and one to provide the off-centre hole. Seems like the alpha is the downfall here though, as they it's visually obvious that they two rings and not one.
- Right now I'm seeing if blend() can help me, here's the latest code I have, obviously not there yet as the hole in the blue ring ought to let the red ring show through.

Any suggestions much appreciated.

background(255);
size(700,700);
smooth();

strokeWeight(30);
stroke(0);
fill(0,0,0,0);
ellipse(400,400,100,100);

noStroke();
fill(255,0,0,200);
ellipse(100,100,150,150);

// blend(x, y, width, height, dx, dy, dwidth, dheight, MODE)
blend(360,360,80,80,50,50,80,80,ADD);

noStroke();
fill(0,0,255,200);
ellipse(150,150,200,200);

blend(360,360,80,80,100,100,80,80,ADD);

How about something like this:

Quote:


Uses curveVertex to draw a smooth circle with about 12 vertices. Note though that only works if you use noStroke() since the inner and outer circles of each ring are joined with a line. Transparency works fine.

I don't know of any way in Processing to effect a 'moveto' inside beginShape() / endShape(). It would be very helpful if there was.

A rule of 2D graphics states that to draw holes in an object, the hole must be drawn in the reverse order of the outer shape.
Ie. for a circle, you draw the outer diameter clockwise, and the inner one counter-clockwise. Or the reverse.
That said, how to draw a circle in a defined direction? I recently discovered that Java draws them using four CubicCurves, our Bézier curves, with a ratio between control vector and radius of 0.552.
I tried and indeed it matches closely the drawing of an ellipse.

The remainder was then quite simple to do. It seems to work well.

Code:

// Clockwise
void drawCircleCW(float x, float y, float w, float h)
{
  // Java draws circles using four cubic curves too, with ratio of length of control vector
  // against radius of 0.552. I compute the complement of this ratio for convenience.
  float l = 1 - 0.552;
  float hw = w / 2, hh = h / 2;
  float lx = l * hw, ly = l * hh;
  // Assume here default CENTER mode
  x -= hw; y -= hh;

  vertex(x, y + hh); // Left
  bezierVertex(x, y + ly,
	x + lx, y,
	x + hw, y); // Top
  bezierVertex(x + w - lx, y,
	x + w, y + ly,
	x + w, y + hh); // Right
  bezierVertex(x + w, y + h - ly,
	x + w - lx, y + h,
	x + hw, y + h); // Bottom
  bezierVertex(x + lx, y + h,
	x, y + h - ly,
	x, y + hh); // Back to left
}

// Counter Clockwise
void drawCircleCCW(float x, float y, float w, float h)
{
  float l = 1 - 0.552;
  float hw = w / 2, hh = h / 2;
  float lx = l * hw, ly = l * hh;
  // Assume here default CENTER mode
  x -= hw; y -= hh;

  vertex(x, y + hh); // Left
  bezierVertex(x, y + h - ly,
	x + lx, y + h,
	x + hw, y + h); // Bottom
  bezierVertex(x + w - lx, y + h,
	x + w, y + h - ly,
	x + w, y + hh); // Right
  bezierVertex(x + w, y + ly,
	x + w - lx, y,
	x + hw, y); // Top
  bezierVertex(x + lx, y,
	x, y + ly,
	x, y + hh); // Back to left
}

// Draw a ring, assuming it is circular (not an ellipse),
// but accepting that the internal circle isn't centered on the external one
void drawRing(
    float xx, float xy, float xd, // Center of external circle and its diameter
    float ix, float iy, float id) // Center of internal circle and its diameter
{
  beginShape();
  drawCircleCCW(xx, xy, xd, xd);
  drawCircleCW(ix, iy, id, id);
  endShape();
}

void setup()
{
  size(500, 500);
  noLoop();

  noStroke();
  background(222);
  // To verify it fits to a circle
  fill(#FF0000);
  ellipse(width/2, height/2, 200, 200);
  // Draw test ring
  fill(0x8800EE00);
  drawRing(width/2, height/2, 200,
    width/2, height/2, 100);
  // Draw some others
  fill(0x440000EE);
  for (int i = 0; i < 5; i++)
  {
    float rxd = width / random(1.5, 5);
    float rxx = random(rxd / 2, width - rxd / 2);
    float rxy = random(rxd / 2, height - rxd / 2);
    float rid = rxd / random(2, 4);
    float rix = rxx + rid * random(-0.9, 0.9) / 4;
    float riy = rxy + rid * random(-0.9, 0.9) / 4;
    drawRing(rxx, rxy, rxd, rix, riy, rid);
  }
}