Which may or may not have been drawn around several other rings. You get the point though, right?
I'm really new to this, fair warning, but I'm trying to build a class responsible for drawing a ring. My initial thought was to either simply draw an ellipse the color of the background and then do a thick stroke around the ellipse OR draw an ellipse and then draw a smaller one the color of the background inside it.
This, to me, had two problems. One, it's dependent upon the stacking order, so if I draw lots of them and want them nested within each other, I'd have to draw them in the order I wanted them in.
The second problem I saw is that it's dependent upon knowing the color of the background.
Now, I'm all for reusability and loose coupling and all that, so I though to try and essentially draw a ring using a series of smaller ellipses drawn very close to each other. Much like painting with a brush. Brilliant, I know.
Problem is, I'm not brilliant and I have no idea what I'm doing.
My current attempt looks something like this:
void setup() {
smooth();
size(400, 400);
}
void draw() {
background(0);
Ring r = new Ring(width * 0.5, height * 0.5, 100.00, 50, #CCFF66);
Ring r2 = new Ring(width * 0.5, height * 0.5, 180.00, 50, #CC2266);
r.display();
r2.display();
fill(#33EECC);
ellipse(width * 0.5, height * 0.5, 20, 20);
}
class Ring {
float x, y, r, startx, starty;
int thickness;
color c;
Ring(float x, float y, float r, int thickness, color c) {
this.x = x;
this.y = y;
this.starty = (y - r) + (thickness * 0.5);
this.thickness = thickness;
this.c = c;
}
void display() {
noStroke();
fill(this.c);
float bx = this.x;
float by = this.starty;
for(int i = 0; i < 360; i++) {
pushMatrix();
rotate(i);
translate(bx, by);
ellipse(0, 0, this.thickness, this.thickness);
popMatrix();
}
}
}
What I'm attempting to do for this demo here is draw two different colored rings around the blue dot in the center. I'm trying to set the Ring class up to be anchored at the center (which is technically an empty space, I suppose).
However, the code above gives me:
So obviously, it isn't drawing a circle in the direction I need it to, and also the rings are far too big, and they're overlapping.
My grand scheme for this is to actually draw a fading tail ring, sort of like a gradient to transparency where the ring connects back with itself, but one step at a time.
Has anyone done anything similar? I'm really stumped here.
