# How to draw a ring?

Hi everybody,
As a newbie in Processing, I try to draw a “ring”… (because English is not my native language I have to clarify what is a “ring” for me: a circle with a hole at the center, like a donut ).
My problem is that I don’t know how to create the hole.
It must be a “hole” because I need to see the background of the window through this ring.
I tried with PShape, beginContour and endContour without success (ellipse is not “usable”).
To be clear, please find an example of what I have (: x:) and of what I would like (: heavy_check_mark:).
If you have a clue for me or a snipet … it would be great
Thanks for all
Colaps

1 Like

Draw the circle but with no fill.

``````stroke(ringColor);
noFill(); //This line is the one you need!

image(img, 0, 0);
ellipse(x, y, size, size);
``````
3 Likes

I was going to suggest to use a mask but @TheWizardBear has shown a much simpler solution. To add to his solution, you need to also use `strokeWeight()` as it will allow you to change the thickness of the border of your ring. More info in the reference.

Kf

3 Likes

Hi @TheWizardBear & @kfrajer,
You’re right, “simplest ideas are often the best”.
Thanks again Colaps

Ellipse with noFill is simplest, but – depending on what you are trying to do – another flexible options is arc(). It is useful for animating, drawing partial rings, or creating collections of partial rings (e.g. the Disney mouse-ear silhouette)…

``````PImage img;

void setup(){
noFill();
stroke(255);
strokeWeight(3);
}

void draw() {
background(255);
image(img, 0, 0);
translate(width/2, height/2);
float clock = millis()%2200/2000.0;
float amt = clock * TWO_PI;
arc(0, 0, 50, 50, 0, amt);
}
``````

3 Likes

If you need a ring that also has stroke you can create a PShape ring. This works in P2D or P3D mode, doesn’t in the default JAVA2D mode.

``````PShape donut;

void setup() {
size(500, 500, P2D);
smooth(8);
donut = makeDonut(100, 200, 90);
donut.setFill(color(255, 100));
donut.setStroke(color(0, 100, 100));
donut.setStrokeWeight(10);
}

void draw() {
background(0, 100, 100);
translate(width/2, height/2);

noStroke();
fill(255, 200, 40);
rect(-20, -300, 40, 600);

shape(donut, 80 * sin(frameCount * 0.01), 0);
}

PShape s = createShape();
s.beginShape();
for (float a=0; a<TAU; a+=TAU/steps) {