# Drawing arc in WEBGL

Is it possible to draw arc in WEBGL mode?

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

1 Like

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

1 Like

Example

``````

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,
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);
}
//
``````
1 Like

Wow thanksâ€¦ This is awesome !!!

1 Like

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:

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