How to draw a ring?

[colaps]

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

[TheWizardBear]

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);

[kfrajer]

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

[colaps]

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

[jeremydouglass]

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(){
  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);
}

[hamoid]

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);
  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;
}