user3295674 - 4 years ago 411

Javascript Question

I'm new to WebGL and was trying to draw a circle with triangle_fan.

I set up the variables

`var pi = 3.14159;`

var x = 2*pi/100;

var y = 2*pi/100;

var r = 0.05;

points = [ vec2(0.4, 0.8) ]; //establish origin

And then drew the circle using this for loop.

`for(var i = 0.4; i < 100; i++){`

points.push(vec2(r*Math.cos(x*i), r*Math.sin(y*i)));

points.push(vec2(r*Math.cos(x*(i+1)), r*Math.sin(y*(i+1))));

}

The issue is that

Also, the image below is that is drawn :/

Recommended for you: Get network issues from **WhatsUp Gold**. **Not end users.**

Answer Source

Using triangle fan you don't need to duplicate vertices. WebGL will form **ABC, ACD** and **ADE** triangles from **[A,B,C,D,E]** array with TRIANGLE_FAN mode.

Also, you don't take into account center of your sphere. And i can't get why **i = 0.4**.

Here is corrected version of your code:

```
vec2 center = vec2(cX, cY);
points.push(center);
for (i = 0; i <= 100; i++){
points.push(center + vec2(
r*Math.cos(2*Math.PI/200),
r*Math.sin(2*Math.PI/200)
));
}
```

Also if you want to draw a sphere you could often draw one triangle or gl.point and discard pixels which are out of circle in fragment shader.

Recommended from our users: **Dynamic Network Monitoring from WhatsUp Gold from IPSwitch**. ** Free Download**