"use strict"; var canvas; var gl; var positions = []; var numTimesToSubdivide = 5; init(); function init() { canvas = document.getElementById( "gl-canvas" ); gl = canvas.getContext('webgl2'); if (!gl) { alert( "WebGL 2.0 isn't available" ); } // // Initialize our data for the Sierpinski Gasket // // First, initialize the corners of our gasket with three positions. var vertices = [ vec2( -1, -1 ), vec2( 0, 1 ), vec2( 1, -1 ) ]; divideTriangle( vertices[0], vertices[1], vertices[2], numTimesToSubdivide); // // Configure WebGL // gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 1.0, 1.0, 1.0, 1.0 ); // Load shaders and initialize attribute buffers var program = initShaders( gl, "vertex-shader", "fragment-shader" ); gl.useProgram(program); // Load the data into the GPU var 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 var 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 var ab = mix( a, b, 0.5 ); var ac = mix( a, c, 0.5 ); var bc = mix( b, c, 0.5 ); --count; // three new triangles divideTriangle( a, ab, ac, count ); divideTriangle( c, ac, bc, count ); divideTriangle( b, bc, ab, count ); } } function render() { gl.clear( gl.COLOR_BUFFER_BIT ); gl.drawArrays( gl.TRIANGLES, 0, positions.length ); }

------------------------------------

"use strict"; var canvas; var gl; var positions = []; var numTimesToSubdivide = 5; init(); function init() { canvas = document.getElementById( "gl-canvas" ); gl = canvas.getContext('webgl2'); if (!gl) { alert( "WebGL 2.0 isn't available" ); } // // Initialize our data for the Sierpinski Gasket // // First, initialize the corners of our gasket with three positions. var vertices = [ vec2( -1, -1 ), vec2( 0, 1 ), vec2( 1, -1 ) ]; divideTriangle( vertices[0], vertices[1], vertices[2], numTimesToSubdivide); // // Configure WebGL // gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 1.0, 1.0, 1.0, 1.0 ); // Load shaders and initialize attribute buffers var program = initShaders( gl, "vertex-shader", "fragment-shader" ); gl.useProgram(program); // Load the data into the GPU var 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 var 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 var ab = mix( a, b, 0.5 ); var ac = mix( a, c, 0.5 ); var bc = mix( b, c, 0.5 ); --count; // three new triangles divideTriangle( a, ab, ac, count ); divideTriangle( c, ac, bc, count ); divideTriangle( b, bc, ab, count ); } } function render() { gl.clear( gl.COLOR_BUFFER_BIT ); gl.drawArrays( gl.TRIANGLES, 0, positions.length ); }

---------------------------------

The other files can be found at https://www.interactivecomputergraphics.com/8E/

Problem Description: Refer to Exercise 2.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: 1. Create a folder named CSC1431ProjectTwo. Copy gasket2.html, gasket2.js, and three files located in Common folder (namely, webgl-utils.js, initShaders.js, and MV.js). Rename gasket2.html as YourInitial Proj2.html, gasket2.js as YourInitialGasket2.js. 2. Modify the links in YourlnitialProj2.html, so that the following four files will be linked appropriately: YourInitialGasket2.js, webgl-utils.js, initShaders.js, and MV.js. 3. Test run first to ensure that you will get the similar (but larger) graph as following red one: This shows that you have modified all links successfully. 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). Problem Description: Refer to Exercise 2.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: 1. Create a folder named CSC1431ProjectTwo. Copy gasket2.html, gasket2.js, and three files located in Common folder (namely, webgl-utils.js, initShaders.js, and MV.js). Rename gasket2.html as YourInitial Proj2.html, gasket2.js as YourInitialGasket2.js. 2. Modify the links in YourlnitialProj2.html, so that the following four files will be linked appropriately: YourInitialGasket2.js, webgl-utils.js, initShaders.js, and MV.js. 3. Test run first to ensure that you will get the similar (but larger) graph as following red one: This shows that you have modified all links successfully. 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)