Write a WebGL program that implements Michael Barnsleys chao

 Write a WebGL program that implements Michael Barnsley\'s  \'chaos game\'.  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 = 40000 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 

Solution

Code:

var gl;

var points;

const NumPoints = 5000;

window.onload = function init()

    {

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

      gl = WebGLUtils.setupWebGL( canvas );

      if ( !gl ) { alert( \"WebGL isn\'t available\" );

     }

// Initialize our data

// Initialize corners of our gasket with 3 points.

var vertices = [

                    vec2( -1, -1 ),

                    vec2( 0, 1 ),

                    vec2( 1, -1 )

                       ];

var u = add( vertices[0], vertices[1] );

var v = add( vertices[0], vertices[2] );

var p = scale( 0.5, add( u, v ) );

// Add randomly chosen point into array of points

points = [ p ];

for ( var i = 0; points.length < NumPoints; ++i )

{

   var j = Math.floor(Math.random() * 3);

   p = add( points[i], vertices[j] );

    p = scale( 0.5, p );

    points.push( p );

}

// 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(points), gl.STATIC_DRAW );

var vPos = gl.getAttribLocation( program, \"vPosition\" );

gl.vertexAttribPointer( vPos, 2, gl.FLOAT, false, 0, 0 );

gl.enableVertexAttribArray( vPos );

render();

}

function render()

   {

      gl.clear( gl.COLOR_BUFFER_BIT );

     gl.drawArrays( gl.POINTS, 0, points.length );

    }

points = [ p ];

for ( var i = 0; points.length < NumPoints; ++i )

{

var j = Math.floor(Math.random() * 3);

p = add( points[i], vertices[j] );

p = scale( 0.5, p );

points.push( p );

}