# How to draw a ring?

**URL:** <https://discourse.processing.org/t/how-to-draw-a-ring/3873>\
**Category:** Coding Questions\
**Created:** [September 26, 2018, 5:50pm UTC](https://discourse.processing.org/t/how-to-draw-a-ring/3873 "2018-09-26T17:50:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![colaps](https://avatars.discourse-cdn.com/v4/letter/c/db5fbb/32.png) [@colaps](https://discourse.processing.org/u/colaps)\
**Post date:** [September 26, 2018, 5:50pm UTC](https://discourse.processing.org/t/how-to-draw-a-ring/3873/1 "2018-09-26T17:50:47Z")

</div>

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

 ![Image1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b6edc5fdbb9be4f5ea9ba02edcece351a26069fb.png)

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [September 26, 2018, 8:09pm UTC](https://discourse.processing.org/t/how-to-draw-a-ring/3873/2 "2018-09-26T20:09:34Z")

</div>

Draw the circle but with [no fill](https://processing.org/reference/noFill_.html).

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

image(img, 0, 0);
ellipse(x, y, size, size);

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [September 26, 2018, 9:37pm UTC](https://discourse.processing.org/t/how-to-draw-a-ring/3873/3 "2018-09-26T21:37:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![colaps](https://avatars.discourse-cdn.com/v4/letter/c/db5fbb/32.png) [@colaps](https://discourse.processing.org/u/colaps)\
**Post date:** [September 27, 2018, 10:11am UTC](https://discourse.processing.org/t/how-to-draw-a-ring/3873/4 "2018-09-27T10:11:48Z")

</div>

Hi @TheWizardBear & @kfrajer,  
Thanks a lot for your advise.  
You’re right, “simplest ideas are often the best”.  
Thanks again 🙂Colaps

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 27, 2018, 4:00pm UTC](https://discourse.processing.org/t/how-to-draw-a-ring/3873/5 "2018-09-27T16:00:14Z")

</div>

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

```auto
PImage img;

void setup(){
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/9/95/Rainbow_Icon.png");
  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);
}

```

![15%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/24eaa87244edee30c714fc308dc270c6cfb8e382.png)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 21, 2019, 10:11am UTC](https://discourse.processing.org/t/how-to-draw-a-ring/3873/6 "2019-11-21T10:11:46Z")

</div>

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.

![Screenshot%20from%202019-11-21%2011-48-05](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3062bf66edf41674def2c85ecc89fb0cbcd834d3.png)

```auto
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);
  rotate(radians(45));
  
  noStroke();
  fill(255, 200, 40);
  rect(-20, -300, 40, 600);
    
  shape(donut, 80 * sin(frameCount * 0.01), 0);
}

PShape makeDonut(float innerRadius, float outerRadius, float steps) {
  PShape s = createShape();
  s.beginShape();
  for (float a=0; a<TAU; a+=TAU/steps) {
    s.vertex(outerRadius*cos(a), outerRadius*sin(a));
  }
  s.beginContour();
  for (float a=0; a<TAU; a+=TAU/steps) {
    s.vertex(innerRadius*cos(-a), innerRadius*sin(-a));
  }
  s.endContour();
  s.endShape(CLOSE);
  return s;
}

```