How to draw a "three-quarter circle"?

I am trying to draw the following in a Processing sketch:

Example

The lines are no problem, but I am searching for a way to implement the curves by also just using vertexes. Ideally, I would just have to tell the code the positions of the (in this case) top, bottom and left. I’ve tried using curveVertex to get a circle shape as a base, but couldn’t get that to work. My code:

void draw() {
  beginShape();
  curveVertex(50, 50);
  curveVertex(50, 50);
  curveVertex(100, 100);
  curveVertex(50, 150);
  curveVertex(0, 100);
  curveVertex(0, 100);
  endShape();
}

The result:

result

Does anybody know a way to approach this?

2 Likes

Hello @Schred,

You can use arc() to do this:

https://processing.org/reference/arc_.html

:nerd_face:

7 Likes

Thanks, I’ll have a look at that later today! :smile:

Edit: Yep, that’s what I was looking for. Thanks! :smile:

2 Likes

If you want to “roll your own” and not use arc(), then the formula is not to hard for circle coordinates – radius*cos(a) and radius*sin(a) for a point at angle a.

To draw line segments, loop over the points and draw a line between the previous point and the next.

void myarc(float radius, float arcsize, float step) {
  line(0, 0, radius, 0);
  for (float angle=step; angle<=arcsize; angle+=step) {
    float x1 = radius*cos(angle-step);
    float y1 = radius*sin(angle-step);
    float x2 = radius*cos(angle);
    float y2 = radius*sin(angle);
    line(x1, y1, x2, y2);
    if (angle+step>arcsize) line(0, 0, x2, y2);
  }
}

This also lets you get more creative, for example, varying line thickness or color, or drawing shapes at the points.

/**
 * create your own simple arc drawing function
 * ( rather than using the built-in `arc()` )
 * 2020-09-16 Processing 3.5.4
 */
void setup() {
  size(900, 300);
  strokeWeight(2);
}

void draw() {
  background(255);
  translate(width/6.0, height/2.0);
  myarc(140, TWO_PI*0.75, 0.025);
  translate(width/3.0, 0);
  myarc(140, TWO_PI*(mouseX/(float)width), 0.025);
  translate(width/3.0, 0);
  myarc2(140, TWO_PI*(mouseX/(float)width), 0.1);
}

void myarc(float radius, float arcsize, float step) {
  line(0, 0, radius, 0);
  for (float angle=step; angle<=arcsize; angle+=step) {
    float x1 = radius*cos(angle-step);
    float y1 = radius*sin(angle-step);
    float x2 = radius*cos(angle);
    float y2 = radius*sin(angle);
    line(x1, y1, x2, y2);
    if (angle+step>arcsize) line(0, 0, x2, y2);
  }
}

void myarc2(float radius, float arcsize, float step) {
  for (float angle=step; angle<=arcsize; angle+=step) {
    float x1 = radius*cos(angle);
    float y1 = radius*sin(angle);
    ellipse(x1, y1, 10, 10);
  }  
}

4 Likes
int i;
float j;
boolean closed;

void setup() {
  size(600, 400);
  background(0);
  noStroke();
}

void draw() {
  fill (0);
  ellipse (i-1, 200, 210, 210);
  fill(255, 255, 0);
  arc(i, 200, 200, 200, j, 6);
  i += 4;
  if (j > 0.6) closed = true;
  if (!closed ) j += 0.05; 
  else j -= 0.05;
  if (j < 0) closed = false;
  if (i > 700) i = 0;
}
3 Likes

or you could…

size(300,300);
background(195);
fill(255);
stroke(0);
strokeWeight(2);
circle(width/2,height/2,150);
fill(196);
rect(width/2,height/2-150,150,150);
noStroke();
rect(width/2-1,height/2-226,200,150);
rect(width/2+77,height/2-75,150,150);

:grin:

4 Likes

Ha! Well, it worked :wink:

1 Like

Here’s my attempt. Not exactly the best algorithm, but will give you another option to choose from. :slight_smile:

void setup() {
  size(500, 500, P2D);
  background(230, 140, 140);
  pacMan(width/2, height/2, 100, 180, 5);
}

void pacMan(float x1, float y1, float radius, int precision, int thickness) {
  beginShape();
  strokeWeight(thickness);

  for (float a = 0; a <= PI+HALF_PI; a += TWO_PI/precision) {
    float x2 = x1 + (cos(a) * radius);
    float y2 = y1 + (sin(a) * radius);
    vertex(x2, y2);
  }
  
  vertex(x1, y1);
  endShape(CLOSE);
}
3 Likes

Haha, thank you all for your suggestions! Really appreciate it! :smiley: