$*$Computer Graphics

ellipse.js

class Ellipse$2$D $\{$

static vertexPositions $=[]$;

static vertexColors $=[]$;

static shaderProgram $=-1$;

static positionBuffer $=-1$;

static colorBuffer $=-1$;

static aPositionShader $=-1$;

static aColorShader $=-1$;

static initialize$()\{$

Ellipse$2$D$.$shaderProgram $=$ initShaders$($gl$,"/$vshader$.$glsl$","/$fshader$.$glsl$")$;

const radiusX $=0\mathrm{.}2$;

const radiusY $=0\mathrm{.}2*0\mathrm{.}6$; $//$ Scale the y$-$coordinate down to $60\%$

const center $=$ vec$2(-0\mathrm{.}6,0\mathrm{.}85-$ radiusY$)$;

const numSegments $=30$;

for $($let i $=0$; i numSegments; i$++)\{$

const angle $=($i $/$ numSegments$)*2*$ Math.PI;

const x $=$ radiusX $*$ Math.cos$($angle$)+$ center$[0]$;

const y $=$ radiusY $*$ Math.sin$($angle$)+$ center$[1]$;

const red $=1\mathrm{.}0$;

Ellipse$2$D$.$vertexPositions.push$($vec$2($x$,$ y$))$;

Ellipse$2$D$.$vertexColors.push$($vec$3($red$,0\mathrm{.}0,0\mathrm{.}0))$;

$\}$

$//$ Load the data into the GPU

Ellipse$2$D$.$positionBuffer $=$ gl$.$createBuffer$()$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, Ellipse$2$D$.$positionBuffer$)$;

gl$.$bufferData$($gl$.$ARRAY$\_$BUFFER, flatten$($Ellipse$2$D$.$vertexPositions$),$ gl$.$STATIC$\_$DRAW$)$;

Ellipse$2$D$.$colorBuffer $=$ gl$.$createBuffer$()$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, Ellipse$2$D$.$colorBuffer$)$;

gl$.$bufferData$($gl$.$ARRAY$\_$BUFFER, flatten$($Ellipse$2$D$.$vertexColors$),$ gl$.$STATIC$\_$DRAW$)$;

$//$ Associate our shader variables with our data buffer

Ellipse$2$D$.$aPositionShader $=$ gl$.$getAttribLocation$($Ellipse$2$D$.$shaderProgram, "aPosition"$)$;

Ellipse$2$D$.$aColorShader $=$ gl$.$getAttribLocation$($Ellipse$2$D$.$shaderProgram, "aColor"$)$;

$\}$

constructor$()\{$

if $($Ellipse$2$D$.$shaderProgram $===-1)$ Ellipse$2$D$.$initialize$()$;

$\}$

draw$()\{$

gl$.$useProgram$($Ellipse$2$D$.$shaderProgram$)$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, Ellipse$2$D$.$positionBuffer$)$;

gl$.$vertexAttribPointer$($Ellipse$2$D$.$aPositionShader, $2,$ gl$.$FLOAT, false, $0,0)$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, Ellipse$2$D$.$colorBuffer$)$;

gl$.$vertexAttribPointer$($Ellipse$2$D$.$aColorShader, $3,$ gl$.$FLOAT, false, $0,0)$;

gl$.$enableVertexAttribArray$($Ellipse$2$D$.$aPositionShader$)$;

gl$.$enableVertexAttribArray$($Ellipse$2$D$.$aColorShader$)$;

gl$.$drawArrays$($gl$.$TRIANGLE$\_$FAN, $0,$ Ellipse$2$D$.$vertexPositions.length$)$;

gl$.$disableVertexAttribArray$($Ellipse$2$D$.$aPositionShader$)$;

gl$.$disableVertexAttribArray$($Ellipse$2$D$.$aColorShader$)$;

$\}$

$\}$

app.js

var canvas;

var gl;

var sq;

var sq$2$;

var sq$3$;

var sq$4$;

var sq$5$;

var sq$6$;

var triangle;

var circle;

var ellipse;

window.onload $=$ function init$()\{$

canvas $=$ document.getElementById$("$gl$-$canvas" $)$;

gl $=$ canvas.getContext$(\text{'}$webgl$2\text{'})$;

if $(!$gl $)\{$ alert$($ "WebGL $2\mathrm{.}0$ isn't available" $)$; $\}$

gl$.$viewport$(0,0,$ canvas.width, canvas.height $)$;

gl$.$clearColor$(0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0)$;

sq $=$ new Square$()$;

sq$2=$ new Square$2()$;

sq$3=$ new Square$3()$;

sq$4=$ new Square$4()$;

sq$5=$ new Square$5()$;

sq$6=$ new Square$6()$;

triangle $=$ new Triangle$2$D$()$;

circle $=$ new Circle$2$D$()$;

ellipse $=$ new Ellipse$2$D$()$;

render$()$;

$\}$;

function render$()\{$

gl$.$clear$($ gl$.$COLOR$\_$BUFFER$\_$BIT $)$;

sq$.$draw$()$;

sq$2.$draw$()$;

sq$3.$draw$()$;

sq$4.$draw$()$;

sq$5.$draw$()$;

sq$6.$draw$()$;

triangle.draw$()$;

circle.draw$()$;

ellipse.draw$()$;

$\}$

index.html

Not supported

Define a button that changes the orientation of the red ellipse by $90$ degrees.

$$