diff --git a/module 2 b/module 2
new file mode 100644
index 0000000..0ba4c9c
--- /dev/null
+++ b/module 2	
@@ -0,0 +1,267 @@
+<!--Antti Astikainen 
+	1101552 
+	3D programming
+	module2 -->
+<html>
+    <head>
+	<style type="text/css">
+	body{
+	background-color:black;
+	}
+	
+	.choice{
+	width:400px;
+	margin: 0 auto;
+	text-align:left;
+	background-color:white;
+	}
+
+	#Canvas{
+	margin:5% 30%;
+	border:1px solid black;
+	}
+
+</style>
+        <title>1101552</title>
+        
+        <!-- Vertex //-->
+        <script id="shader-vs" type="x-shader/x-vertex">
+        
+            attribute float aVertexAngle; // ANGLE IN CIRCLE
+
+            uniform float radius; // RADIUS OF CIRCLE 
+
+            varying float vVertexAngle;
+
+            vec3 transform(float a) // CALCULATE VERTEX POSITIONS BASED ON ANGLE AND RADIUS
+            {
+                float x, y;
+                x = 0.0 + a * cos(aVertexAngle); // CALCULATING X POSITION OF VERTEX
+                y = 0.0 + a * sin(aVertexAngle); // CALCULATING Y POSITION OF VERTEX
+                
+                return vec3(x, y, 0.0); //VEC3 POSITION
+            }
+
+            void main(void) 
+            {
+                gl_Position = vec4(transform(radius), 1.0); // USE TRANSFORM FUNCTION TO GET VERTEX POSITIONS 
+                gl_PointSize = 5.0; //POINT SIZE
+                vVertexAngle = aVertexAngle;
+            }
+            
+        </script>
+
+        <!-- Fragment Shader //-->
+        <script id="shader-fs" type="x-shader/x-fragment">
+        
+            precision highp float; // SET FLOAT PRECISION TO HIGH PRECISION
+            
+            uniform float radius; // RADIUS VALUE THAT PASS AS UNIFORM
+            
+            varying float vVertexAngle;
+            
+            vec4 color(float a)
+            {
+                float xCos = cos(a);
+                float ySin = sin(a);
+                
+                return vec4(xCos, ySin, 1.0, 1.0);
+            }
+            
+            void main(void) 
+            {
+                gl_FragColor = color(vVertexAngle); // CALCULATE EACH FRAGMENT COLOR BASED ON RADIUS VALUE
+            }
+            
+        </script>
+
+        <script type="text/javascript">
+            var gl = null; // WEBGL CONTEXT
+            var prg = null; // THE PROGRAM (SHADERS)
+            var c_width = 500; // VARIABLE TO STORE THE WIDTH OF THE CANVAS
+            var c_height = 500; // VARIABLE TO STORE THE HEIGHT OF THE CANVAS
+
+            var vertexBuffer = null; //VERTEX BUFFER FOR CIRCLE
+
+            var indices = [];
+            var vertices = []; 
+            
+            
+            var radius = 0.8; // RADIUS VALUE OF CIRCLE
+
+            var renderingMode = 'TRIANGLES'; // FOR DEFAULT RENDERING MODE
+
+
+            function initShaderProgram() // THIS FUNCTION CREATES SHADER PROGRAM THAT USE TO RENDER 
+            {
+                vertexShader : WebGLShader; // VERTEX SHADER
+                fragmentShader : WebGLShader; // FRAGMENT SHADER
+                
+                var vsSource = document.getElementById("shader-vs").innerHTML; // GET VERTEX SHADER SOURCE FROM INDEX.HTML
+            
+                vertexShader = gl.createShader(gl.VERTEX_SHADER); // CREATE NEW SHADER
+                gl.shaderSource(vertexShader, vsSource); // SET SHADER SOURCE 
+                gl.compileShader(vertexShader); // COMPILE SHADER 
+                
+                if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) // IF THERE WERE ANY ERRORS DURING COMPILATION REPORT THEM IN CONSOLE
+                {
+                    console.log("Error compiling vertex shader: " + gl.getShaderInfoLog(vertexShader));
+                }
+                
+                var fsSource = document.getElementById("shader-fs").innerHTML; // GET FRAGMENT SHADER SOURCE FROM INDEX.HTML
+                
+                fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // CREATE NEW SHADER
+                gl.shaderSource(fragmentShader, fsSource); // SET SHADER SOURCE 
+                gl.compileShader(fragmentShader); // COMPILE SHADER 
+                
+                if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) // IF THERE WERE ANY ERRORS DURING COMPILATION REPORT THEM IN CONSOLE
+                {
+                    console.log("Error compiling fragment shader: " + gl.getShaderInfoLog(fragmentShader));
+                }
+                
+                prg = gl.createProgram(); // create program
+            
+                gl.attachShader(prg, vertexShader); // ATTACH VERTEX SHADER TO  PROGRAM
+                gl.attachShader(prg, fragmentShader); // ATTACH FRAGMENT SHADER TO  PROGRAM
+                gl.linkProgram(prg); // LINK PROGRAM
+                
+                if(!gl.getProgramParameter(prg, gl.LINK_STATUS)) // IF THERE WERE ANY ERRORS REPORT THEM TO BROWSER CONSOLE
+                {
+                    console.log("Shader program linking failed: " + gl.getProgramInfoLog(prg));
+                }
+                
+                gl.useProgram(prg);
+                
+                // REFERENCE TO THE UNIFORMS AND ATTRIBUTES DEFINED IN THE SHADERS.
+
+                prg.vertexAngleAttribute = gl.getAttribLocation(prg, "aVertexAngle");
+                prg.uniformRadius = gl.getUniformLocation(prg, "radius");
+            }
+
+            //CREATES THE BUFFERS THAT CONTAIN SHAPE OF THE CIRCLE
+            function initBuffers() 
+            {
+                //EACH NUMBER REPRESENTS ANGLE ON CIRCLE FOR VERTEX IN RADIANS 
+                vertices =  
+                [
+                    0.0, 0.392, 0.785, 1.178, 1.57, 1.963, 2.356, 2.748, 3.141, 3.534, 3.926, 4.319, 4.712, 5.105, 5.497, 5.890
+                ]; 	
+                
+                //THE FOLLOWING CODE SNIPPET CREATES A VERTEX BUFFER AND BINDS THE VERTICES TO IT
+                circleVertexBuffer = gl.createBuffer(); // CREATE VERTEX BUFFER
+                gl.bindBuffer(gl.ARRAY_BUFFER, circleVertexBuffer); // BIND BUFFER SO ALL BUFFER FUNCTIONS APPPLY TO THIS BUFFER UNTIL BIND ANOTHER OR UNBIND THIS ONE
+                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // SET BUFFER DATA FOR CURENTLY BOUND BUFFER
+                gl.bindBuffer(gl.ARRAY_BUFFER, null); // UNBIND BUFFER, GOOD PRACTICE?
+                
+                //THE FOLLOWING CODE SNIPPET CREATES A VERTEX BUFFER AND BINDS THE INDICES TO IT
+                circleIndexBuffer = gl.createBuffer(); // CREATE INDEX BUFFER
+                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, circleIndexBuffer); // BIND BUFFER 
+                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); // SET BUFFER DATA
+                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); // UNBIND BUFFER 
+            }
+
+            
+            //Draws the scene
+
+            function drawScene()
+            {
+                gl.clearColor(0.0, 0.0, 0.0, 1.0); // SET CLEAR COLOR TO BLACK
+                gl.enable(gl.DEPTH_TEST); // ENABLE DEPTH TEST (NOT NECESSERY HERE BUT NEEDED FOR 3D OBJECT RENDERING)
+
+                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // CLEAR BUFFER WITH CURRENT CLEAR COLOR
+                gl.viewport(0, 0, c_width, c_height); // SET VIEW PORT TO BE SAME SIZE AS CANVAS ELEMENT
+                
+                gl.bindBuffer(gl.ARRAY_BUFFER, circleVertexBuffer); // BIND BUFFER, GETING READY TO DRAW
+                gl.vertexAttribPointer(prg.aVertexAngle, 1, gl.FLOAT, false, 0, 0); // TELL CMOPUTER HOW VBO IS ORGANISED
+                gl.enableVertexAttribArray(prg.vertexAngleAttribute); // ENABLE VERTEX SHADER ATTRIBUTE SO CAN USE IT INSIDE SHADER
+
+                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, circleIndexBuffer); // BIND IBO
+                indices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; // SET INDEX DATA
+                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); // SET BUFFER DATA
+                        
+                switch(renderingMode) //RENDER DIFFERENT TYPES
+                {
+
+                    case "TRIANGLES": 
+                    {
+                        gl.drawElements(gl.TRIANGLE_FAN, indices.length, gl.UNSIGNED_SHORT,0); 
+                        break;
+                    }
+                    case "LINE_LOOP": 
+                    {
+                        gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_SHORT,0); 
+                        break;
+                    }
+                    case 'POINTS': 
+                    {
+                        gl.drawElements(gl.POINTS, indices.length, gl.UNSIGNED_SHORT,0); 
+                        break;
+                    }
+                }
+            }
+
+            
+            //RENDERING
+            requestAnimationFrame(renderLoop);
+            function renderLoop() 
+            {
+                if (document.getElementById("polygon").checked)  renderingMode = "TRIANGLES"; // CHECK RADIO BUTTONS AND SET RENDERING MODE
+                if (document.getElementById("lineloop").checked)  renderingMode = "LINE_LOOP";
+                if (document.getElementById("points").checked)  renderingMode = "POINTS";
+                
+                gl.uniform1f(prg.uniformRadius, radius); 
+                
+                requestAnimationFrame(renderLoop);
+                drawScene();
+            }
+
+            function initWebGL() // IN THIS FUNCTION GET WEBGL RENDERING CONTEXT FROM CANVAS ELEMENT
+            {
+                canvas = document.getElementById("Canvas"); // GET CANVAS ELEMENT INSIDE PAGE 
+                try
+                {
+                    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); // THEN GET WEBGL CONTEXT FROM CANVAS 
+                }
+                catch(e) { }
+                
+                if(!gl)
+                {
+                    alert("Error: Your browser does not appear to support WebGL."); // ERROR MESSAGE IF BROWSER DOES NOT SUPPORT WEBGL 
+                }
+            }
+
+            
+            //Execute the WebGL app
+            
+            function runWebGLApp()
+            {
+                //OBTAINS A WEBGL CONTEXT
+                initWebGL();
+                //INITIALIZES THE PROGRAM (SHADERS). MORE ABOUT THIS ON CHAPTER 3!
+                initShaderProgram();
+                //INITIALIZES THE BUFFERS THAT ARE GOING TO USE TO DRAW VERTEX BUFFER AND INDEX BUFFER
+                initBuffers();
+                //RENDERS VB+IB
+                renderLoop();
+            }
+        </script>
+    </head>
+
+    <body onLoad='runWebGLApp()'>
+	<div class="choice">
+        <p>3D Graphics Programming - Module 2 assignment</p>
+        <p>Select option for rendering type:</p>
+        
+        <form>
+            <input type="radio" id="polygon" name="rendermode" value="TRIANGLE_STRIP" checked> Polygon<br>
+            <input type="radio" id="lineloop" name="rendermode" value="LINE_LOOP"> Line Loop<br>
+            <input type="radio" id="points" name="rendermode" value="POINTS"> Point Sprite
+        </form>
+	</div>
+        <canvas id='Canvas' width='500' height='500'>
+            Your browser does not support the HTML5 canvas element.
+        </canvas>
+
+    </body>
+    
+</html>
