A slight variation on generating the Sierpinski gasket with Problem Description:

Refer to Exercise $2\mathrm{.}1.$ A slight variation on generating the Sierpinski gasket with

triangular polygons yields the fractal mountains used in computer$-$generated animations. After

you find the midpoint of each side of the triangle, perturb this location before sub$-$division.

Generate these triangles without fill. Later, you can do this exercise in three dimensions and

add shading. After a few subdivisions, you should have generated sufficient detail that your

triangles look like a mountain.

Step by Step Instructions:

Create a folder named CSCl$431$ProjectTwo. Copy gasket$2.$html$,$ gasket$2.$js$,$ a

triangular $$polygons $$yields $$the $$fractal $$mountains $$used $$in $$computer$-$generated $$animations$.$After $$

you $$find $$the $$midpoint $$of $$each $$side $$of $$the $$triangle$,$perturb $$this $$location $$before $$sub$-$division$.$

Generate $$these $$triangles $$without $$fill$.$Later$,$you $$can $$do $$this $$exercise $$in $$three $$dimensions $$and $$

add $$shading$.$After $$a $$few $$subdivisions$,$you $$should $$have $$generated $$sufficient $$detail $$that $$your $$

triangles $$look $$like $$a $$mountain$.$

$$

Step $$by $$Step $$Instructions: $$

$$

$4.$ Now, follow the instruction in problem description: $$After you find the midpoint of each

side $$of $$the $$triangle$,$perturb $$this $$location $$before $$sub$-$division$.$You $$may $$do $$this $$by $$simply $$

move $$this $$midpoint $$to $$a $$random $$point $$on $$the $$same $$side $$of $$triangle$.$

$5.$ Change color set as green.

$6.$ Run your project, you shall get something looks like a mountain $($the green graph

above$).$

Fix my code:

"use strict";

let canvas;

let gl;

let positions $=[]$;

let numTimesToSubdivide $=5$;

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" $)$; $\}$

$//$

$//$ Initialize our data for the Sierpinski Gasket

$//$

$//$ First, initialize the corners of our gasket with three positions.

let vertices $=[$

vec$2(-1,-1),$

vec$2(0,1),$

vec$2(1,-1)$

$]$;

divideTriangle$($ vertices$[0],$ vertices$[1],$ vertices$[2],$

numTimesToSubdivide$)$;

$//$

$//$ Configure WebGL

$//$

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

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

$//$ Load shaders and initialize attribute buffers

let program $=$ initShaders$($ gl$,$ "vertex$-$shader", "fragment$-$shader" $)$;

gl$.$useProgram$($program$)$;

$//$ Load the data into the GPU

let bufferId $=$ gl$.$createBuffer$()$;

gl$.$bindBuffer$($ gl$.$ARRAY$\_$BUFFER, bufferId $)$;

gl$.$bufferData$($ gl$.$ARRAY$\_$BUFFER, flatten$($positions$),$ gl$.$STATIC$\_$DRAW $)$;

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

let positionLoc $=$ gl$.$getAttribLocation$($ program, "aPosition" $)$;

gl$.$vertexAttribPointer$($ positionLoc, $2,$ gl$.$FLOAT, false, $0,0)$;

gl$.$enableVertexAttribArray$($ positionLoc $)$;

render$()$;

$\}$;

function triangle$($a$,$ b$,$ c$)$

$\{$

positions.push$($a$,$ b$,$ c$)$;

$\}$

function divideTriangle$($a$,$ b$,$ c$,$ count$)$

$\{$

$//$ check for end of recursion

if $($ count $===0)\{$

triangle$($a$,$ b$,$ c$)$;

$\}$

else $\{$

$//$bisect the sides

let ab $=$ mix$($ a$,$ b$,0\mathrm{.}5)$;

let ac $=$ mix$($ a$,$ c$,0\mathrm{.}5)$;

let bc $=$ mix$($ b$,$ c$,0\mathrm{.}5)$;

$--$count;

$//$ three new triangles

divideTriangle$($ a$,$ ab$,$ ac$,$ count $)$;

divideTriangle$($ c$,$ ac$,$ bc$,$ count $)$;

divideTriangle$($ b$,$ bc$,$ ab$,$ count $)$;

$\}$

$\}$

function midpointDisplacement$($x$1,$ x$2,$ y$1,$ y$2,$ displacement, roughness$)$

$\{$

let mx $=($x$1+$x$2)/2$;

let my $=($y$1+$y$2)/2$;

let distance $=$ Math.sqrt$(($x$2-$x$1)**2+($y$2-$y$1)**2)$;

if$($distance

return;

$\}$

let randomDisplacement$=($Math$.$random$()*2-1)*$displacement;

my$+=$randomDisplacement;

let maxDisplacement$=$distance$/$roughness;

if$($displacement$>$maxDisplacement$)\{$

displacement $=$maxDisplacement;

$\}$

midpointDisplacement$($x$1,$ y$1,$ mx$,$ my$,$ displacement, roughness$)$;

midpointDisplacement$($mx$,$ my$,$ x$2,$ y$2,$ displacement, roughness$)$;

line.push$($x$1,$ y$1,$ x$2,$ y$2)$;

$\}$

function render$()$

$\{$

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

gl$.$drawArrays$($ gl$.$TRIANGLES, $0,$ positions.length$)$;

$\}$