# Drawing arc in WEBGL

**URL:** <https://discourse.processing.org/t/drawing-arc-in-webgl/13065>\
**Category:** Beginners\
**Created:** [July 30, 2019, 5:45pm UTC](https://discourse.processing.org/t/drawing-arc-in-webgl/13065 "2019-07-30T17:45:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jithin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jithin/32/122_2.png) [@Jithin](https://discourse.processing.org/u/Jithin)\
**Post date:** [July 30, 2019, 5:45pm UTC](https://discourse.processing.org/t/drawing-arc-in-webgl/13065/1 "2019-07-30T17:45:48Z")

</div>

Is it possible to draw arc in WEBGL mode?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 30, 2019, 9:26pm UTC](https://discourse.processing.org/t/drawing-arc-in-webgl/13065/2 "2019-07-30T21:26:10Z")

</div>

In theory yes

You can use all 2D items in 3D

You can position them using translate ()

to isolate this, start the section with pushMatrix() and end the section with popMatrix()

---

<div class="post-metadata">

**Author:** ![Jithin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jithin/32/122_2.png) [@Jithin](https://discourse.processing.org/u/Jithin)\
**Post date:** [July 31, 2019, 3:13am UTC](https://discourse.processing.org/t/drawing-arc-in-webgl/13065/3 "2019-07-31T03:13:44Z")

</div>

I didn’t know we could use 2d primitives in WEBGL. Thanks for the info !!!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 8:48pm UTC](https://discourse.processing.org/t/drawing-arc-in-webgl/13065/4 "2019-07-31T20:48:53Z")

</div>

Example

```auto

float CameraX;
float CameraY;
float angle;

void setup() {
  size( 800, 800, P3D );
  CameraX = width / 2.0;
  CameraY = 50;
} // setup

void draw() {
  background(0);
  lights(); 

  // camera
  camera(
    CameraX, CameraY, 700, 
    width/2.0, height/2.0, 0, 
    0, 1, 0);

  // Floor
  drawFloor();

  // ------------------------------------

  //sphere

  pushMatrix();
  translate(width/2-200, height/2, -120);
  fill(222, 111, 111);
  noStroke();
  sphere (33);
  popMatrix();

  // ------------------------------------

  // paint arc
  fill(111, 110, 110); 

  pushMatrix();
  translate(width/2, height/2, 0);
  rotateY(angle);

  strokeWeight(20);
  stroke(222, 2, 2);

  // usage: arc(x, y, w, h, start, stop, OPEN)
  arc(0, 0, 
    180, 180, 
    radians(0), angle, 
    OPEN);

  if (angle>TWO_PI) 
    angle=0;

  popMatrix();
  //

  // 
  angle+=.01;
} // draw

void keyPressed() {
  if (key == CODED) {
    //
    if (keyCode == UP) {
      CameraY-=10;
    } else if (keyCode == DOWN) {
      CameraY+=10;
    } else if (keyCode == RIGHT) {
      CameraX+=10;
    } else if (keyCode == LEFT) {
      CameraX-=10;
    } else {
      // do nothing
    }
  } else {  
    // not key == CODED
    //
  }
}

void drawLine(float x1, float y1, float z1, 
  float x2, float y2, float z2, 
  float weight, color strokeColour)
  // drawLine was programmed by James Carruthers
  // see http://processing.org/discourse/yabb2/YaBB.pl?num=1262458611/0#9
{
  PVector p1 = new PVector(x1, y1, z1);
  PVector p2 = new PVector(x2, y2, z2);
  PVector v1 = new PVector(x2-x1, y2-y1, z2-z1);
  float rho = sqrt(pow(v1.x, 2)+pow(v1.y, 2)+pow(v1.z, 2));
  float phi = acos(v1.z/rho);
  float the = atan2(v1.y, v1.x);
  v1.mult(0.5);
  pushMatrix();
  translate(x1, y1, z1);
  translate(v1.x, v1.y, v1.z);
  rotateZ(the);
  rotateY(phi);
  noStroke();
  fill(strokeColour);
  box(weight, weight, p1.dist(p2)*1.2);
  popMatrix();
}

void drawFloor() {
  stroke(2, 2, 255);
  // draw floor: 
  float floorY=600;
  // to right (background)
  line ( 20, floorY, -200, 
    width-20, floorY, -200);
  // to right (in the front)
  line ( 20, floorY, -0, 
    width-20, floorY, -0);
  // left side 
  line ( 20, floorY, -200, 
    20, floorY, -0);
  // right side   
  line ( width-20, floorY, -200, 
    width-20, floorY, -0);
}
//

```

---

<div class="post-metadata">

**Author:** ![Jithin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jithin/32/122_2.png) [@Jithin](https://discourse.processing.org/u/Jithin)\
**Post date:** [August 3, 2019, 1:38pm UTC](https://discourse.processing.org/t/drawing-arc-in-webgl/13065/5 "2019-08-03T13:38:02Z")

</div>

Wow thanks… This is awesome !!!

---

<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:** [August 7, 2019, 10:36pm UTC](https://discourse.processing.org/t/drawing-arc-in-webgl/13065/6 "2019-08-07T22:36:36Z")

</div>

Just so that the Processing (Java Mode) answer doesn’t confuse people in the p5.js beginners channel, here is arc in p5.js WEBGL:

```auto
function setup() {
  createCanvas(200, 200, WEBGL);
  arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
}

```

```auto
function setup() {
  createCanvas(200, 200, WEBGL);
  rotateX(0.2);
  rotateY(1);
  arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
}

```