$*$Computer Graphics

Define a slider that changes the radius of the shaded circle. Be sure that the radius value is greater than zero.

circle.js

class Circle$2$D $\{$

static vertexPositions $=[]$;

static vertexColors $=[]$;

static shaderProgram $=-1$;

static positionBuffer $=-1$;

static colorBuffer $=-1$;

static aPositionShader $=-1$;

static aColorShader $=-1$;

static initialize$()\{$

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

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

const center $=$ vec$2(0\mathrm{.}8-$ radius, $0\mathrm{.}95-$ radius$)$;

const numSegments $=30$;

$//$ First vertex $(3$ o'clock$)$ with black color

Circle$2$D$.$vertexPositions.push$($vec$2($center$[0]+$ radius, center$[1]))$;

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

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

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

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

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

$//$ Vary red color as a function of angle

const fadeFactor $=0\mathrm{.}45$;

const red $=0\mathrm{.}5+0\mathrm{.}5*$ Math.cos$(15)*$ fadeFactor;

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

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

$\}$

$//$ Load the data into the GPU

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

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

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

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

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

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

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

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

$\}$

constructor$()\{$

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

$\}$

draw$()\{$

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

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

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

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

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

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

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

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

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

gl$.$disableVertexAttribArray$($Circle$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;

$//$ Function to handle button click event

function rotateEllipse$()\{$

ellipse.rotate$(90)$; $//$ Call a function to rotate the ellipse by $90$ degrees

render$()$; $//$ Render the updated scene

$\}$

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)$;

$//$ Create an event listener for the rotate button

const rotateButton $=$ document.getElementById$(\text{'}$rotateButton$\text{'})$;

rotateButton.addEventListener$(\text{'}$click$\text{'},$ rotateEllipse$)$;

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

Rotate Ellipse

$$