USING BOTH HTML AND JAVASCRIPT(If possible modify the code below):

Write a WebGL program that implements Michael Barnsley's 'chaos game'. A good template is HelloPoint2 from Chapter 2 of Matsuda and Lea's textbook there codes are below. Store the coordinates of three vertices v1 = (x1,y1), v2 = (x2,y2), and v3 = (x3,y3) and an initial point p0 = (x0,y0). The vertices should be chosen to form a well-shaped triangle centered in the clip coordinate space [-1,1] X [-1,1]. Implement the following loop: Initialize p = (x,y) to p0 = (x0,y0) n = 50000 for i = 0 to n-1 Select v from the set {v1,v2,v3} at random. Set p to the midpoint between v and the previous value of p. Render a point at p with PointSize = 1 using gl.drawArrays. end 

HelloPoint2.html

	Please use a browser that supports "canvas"

HelloPoint2.js

// HelloPint2.js (c) 2012 matsuda
	// Vertex shader program
	var VSHADER_SOURCE =
	'attribute vec4 a_Position; ' + // attribute variable
	'void main() { ' +
	' gl_Position = a_Position; ' +
	' gl_PointSize = 10.0; ' +
	'} ';
	// Fragment shader program
	var FSHADER_SOURCE =
	'void main() { ' +
	' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); ' +
	'} ';
	function main() {
	// Retrieve element
	var canvas = document.getElementById('webgl');
	// Get the rendering context for WebGL
	var gl = getWebGLContext(canvas);
	if (!gl) {
	console.log('Failed to get the rendering context for WebGL');
	return;
	}
	// Initialize shaders
	if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
	console.log('Failed to intialize shaders.');
	return;
	}
	// Get the storage location of a_Position
	var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
	if (a_Position < 0) {
	console.log('Failed to get the storage location of a_Position');
	return;
	}
	// Pass vertex position to attribute variable
	gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
	// Specify the color for clearing
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	// Clear
	gl.clear(gl.COLOR_BUFFER_BIT);
	// Draw
	gl.drawArrays(gl.POINTS, 0, 1);
	}