# How to draw a "three-quarter circle"?

**URL:** <https://discourse.processing.org/t/how-to-draw-a-three-quarter-circle/23448>\
**Category:** Coding Questions\
**Created:** [August 23, 2020, 8:12pm UTC](https://discourse.processing.org/t/how-to-draw-a-three-quarter-circle/23448 "2020-08-23T20:12:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Schred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schred/32/13146_2.png) [@Schred](https://discourse.processing.org/u/Schred)\
**Post date:** [August 23, 2020, 8:12pm UTC](https://discourse.processing.org/t/how-to-draw-a-three-quarter-circle/23448/1 "2020-08-23T20:12:55Z")

</div>

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

![Example](https://static.thenounproject.com/png/2289883-200.png)

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:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/69a3845e7bd2b52aa4939b3565f2b45011837383.png)

Does anybody know a way to approach this?

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [August 23, 2020, 8:25pm UTC](https://discourse.processing.org/t/how-to-draw-a-three-quarter-circle/23448/2 "2020-08-23T20:25:35Z")

</div>

Hello @Schred,

You can use arc() to do this:

[https://processing.org/reference/arc\_.html](https://processing.org/reference/arc_.html)

🤓

---

<div class="post-metadata">

**Author:** ![Schred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schred/32/13146_2.png) [@Schred](https://discourse.processing.org/u/Schred)\
**Post date:** [August 24, 2020, 5:41am UTC](https://discourse.processing.org/t/how-to-draw-a-three-quarter-circle/23448/4 "2020-08-24T05:41:21Z")

</div>

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

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

---

<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 16, 2020, 7:51pm UTC](https://discourse.processing.org/t/how-to-draw-a-three-quarter-circle/23448/5 "2020-09-16T19:51:28Z")

</div>

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.

```auto
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.

```auto
/**
 * 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);
  }  
}

```

 ![OwnArc--screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0d31f48ef80c7f2dee7b5d9eaeeb4ea6b02bba84.png)

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 18, 2020, 9:28am UTC](https://discourse.processing.org/t/how-to-draw-a-three-quarter-circle/23448/6 "2020-09-18T09:28:25Z")

</div>

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 18, 2020, 9:57am UTC](https://discourse.processing.org/t/how-to-draw-a-three-quarter-circle/23448/7 "2020-09-18T09:57:42Z")

</div>

or you could…

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

```

 ![Bildschirmfoto 2020-09-18 um 11.56.45](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0a3f58f96d5c6d2d31240fb5cfe8fb503d334251.png)

😁

---

<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 18, 2020, 8:09pm UTC](https://discourse.processing.org/t/how-to-draw-a-three-quarter-circle/23448/8 "2020-09-18T20:09:10Z")

</div>

Ha! Well, it worked 😉

---

<div class="post-metadata">

**Author:** ![adamskii\_uk](https://avatars.discourse-cdn.com/v4/letter/a/82dd89/32.png) [@adamskii\_uk](https://discourse.processing.org/u/adamskii_uk)\
**Post date:** [September 18, 2020, 10:24pm UTC](https://discourse.processing.org/t/how-to-draw-a-three-quarter-circle/23448/9 "2020-09-18T22:24:00Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Schred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schred/32/13146_2.png) [@Schred](https://discourse.processing.org/u/Schred)\
**Post date:** [September 19, 2020, 8:21am UTC](https://discourse.processing.org/t/how-to-draw-a-three-quarter-circle/23448/10 "2020-09-19T08:21:21Z")

</div>

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