Drawing arc in WEBGL

p5.js Beginners
1

Is it possible to draw arc in WEBGL mode?

2

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
3

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

1 Like
4

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

Wow thanks… This is awesome !!!

1 Like
6

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