# data[].attributes.body
Tay Shiek Chi

# data[].attributes.body
Lam Sze Wei

# data[].attributes.body
Kee Ying Ming

# data[].attributes.body
Ong Yit Hang

# data[].attributes.body
Mervyn Fung Wai Ben

# data[].attributes.body
Tan Chong Gee

# data[].attributes.body
Heng Yew Ken

# data[].attributes.body
Chan Wei Jian

# data[].attributes.body
Lau Yan Ming

# data[].attributes.body
Chai Yi Jing

# data[].attributes.body
Goh Pui San

# data[].attributes.body
Poong Ka Tsun

# data[].attributes.body
Lee Su Siew

# data[].attributes.body
Ng Wey Kean

# data[].attributes.body
Daniel Chin Jie Yuan

# data[].attributes.body
Pang Chee Hoo

# data[].attributes.body
Ooi Lim Seong Liang

# data[].attributes.body
Dear Students, try create a tetrahedron - 3d gasket and post your screenshot here. You can get the sample from one of the angle's source code. Modify it 3 different colours.

# data[].attributes.body
Zahidah
Ain Zulaikha

# data[].attributes.body
Poong Ka Tsun
Chan Wei Jian

# data[].attributes.body
Lam Sze Wei
Tay Shiek Chi

# data[].attributes.body
Muhammad Hasiff

# data[].attributes.body
Fattini Izzati
Noor Hidayah

# data[].attributes.body
Chai Yi Jing
Lee Su Siew

# data[].attributes.body
Ong Yit Hang

# data[].attributes.body
var gl;
var points;

window.onload = function init(){
var canvas = document.getElementById( "gl-canvas" );
        
    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" );
 }
    // Four Vertices

    var vertices = [
        vec2( 0.5, -0.5 ),
        vec2( 0.0, 0.5 ),
        vec2( -0.5, -0.5 ),
        vec2( 0.5, -0.5)
    ];
 
// Configure WebGL
 
 gl.viewport( 0, 0, canvas.width, canvas.height );
 gl.clearColor( 0.0, 1.0, 0.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(vertices), gl.STATIC_DRAW );

  // Associate out shader variables with our data buffer

 var vPosition = gl.getAttribLocation( program, "vPosition" );
 gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
 gl.enableVertexAttribArray( vPosition );

     render();
};

function render() {
    gl.clear( gl.COLOR_BUFFER_BIT );
    gl.drawArrays( gl.TRIANGLES, 0, 4 );
}

# data[].attributes.body
Kee Ying Ming
Liew Hann Yuan

# data[].attributes.body
Heng Yew Ken & Mervyn Fung
[HTML]
<!DOCTYPE html>
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition;
void main()
{
gl_Position = vPosition;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

void main()
{
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}
</script>

<script type="text/javascript" src="Common/webgl-utils.js"></script>
<script type="text/javascript" src="Common/initShaders.js"></script>
<script type="text/javascript" src="Common/MV.js"></script>
<script type="text/javascript" src="task.js"></script>
</head>

<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>

[Javascript]
var gl;
var points;

window.onload = function init(){
var canvas = document.getElementById( "gl-canvas" );

gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" );
}
// Four Vertices

var vertices = [
vec2( -0.5, -0.5 ),
vec2( 0, 0.5 ),
vec2( 0.5, -0.5 ),
vec2( -0, -0)
];

// Configure WebGL

gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );

// Load shaders and initialize attribute buffers

var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );// JavaScript Document

// Load the data into the GPU

var bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

// Associate out shader variables with our data buffer

var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );

render();
};

function render() {
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays( gl.TRIANGLES, 0, 4 );
}

# data[].attributes.body
Aisyah Farhah
Sofia Zamiran
Auni Syazwani

# data[].attributes.body
Lau Yan Ming

# data[].attributes.body
Goh Pui San

# data[].attributes.body
Tan Chong Gee
Lim Hooi Mei

# data[].attributes.body
Daniel Chin Jie Yuan
Ng Wey Kean

# data[].attributes.body
Hoong Shu Yan
Christine Lim Xin Yi

# data[].attributes.body
Ng Yoke Kuan
Loke Hui Kei

# data[].attributes.body
Ooi Lim Seong Liang
Pang Chee Hoo

# data[].attributes.body
Dongoh Shin
Jowoon Kim

square.html
<!DOCTYPE html>
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition;
void main()
{
gl_Position = vPosition;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

void main()
{
gl_FragColor = vec4( 1.0, 1.0, 0.0, 1.0 );
}
</script>

<script type="text/javascript" src="Common/webgl-utils.js"></script>
<script type="text/javascript" src="Common/initShaders.js"></script>
<script type="text/javascript" src="Common/MV.js"></script>
<script type="text/javascript" src="square.js"></script>
</head>
<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>

square.js
var gl;
var points;

window.onload = function init(){
var canvas = document.getElementById( "gl-canvas" );

gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" );
}
// Four Vertices

var vertices = [
vec2( 0.5, -0.5 ),
vec2( 0.0, 0.5 ),
vec2( -0.5, -0.5 ),
vec2( 0.5, -0.5)
];

// Configure WebGL

gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 0.0, 1.0, 0.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(vertices), gl.STATIC_DRAW );

// Associate out shader variables with our data buffer

var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );

render();
};

function render() {
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays( gl.TRIANGLES, 0, 4 );
}

# data[].attributes.body
Dirah

# data[].attributes.body
Damia Fakhira

# data[].attributes.body
Norazhar Bin Norazman Teh

# data[].attributes.body
Norhazwani binti Zainal Azlin
'Afifah binti Mohd Hasbullah

# data[].attributes.body
Bong Lee Yiun
Loo Ji Yong
Yap Sin Tong

# data[].attributes.body
Nur Afiqah binti Muhammad

# data[].attributes.body
Yap Sin Tong

# data[].attributes.body
Fatini Nadhirah Mohd Nain

# data[].attributes.body
Ain Fakhira Putri binti Yusoff

# data[].attributes.body
Dear Students, please use this platform to submit your tasks, sharing information, as well questions or discussions to me and also to your classmates.

# data[].attributes.body
Bong Lee Yiun

# data[].attributes.body
Fatini Nadhirah Mohd Nain
Yap Sin Tong

//.html
gl_FragColor = vec4(0.0,0.0,1.0,1.0); //triangle color

//.js
gl.clearColor(1.0, 1.0, 0.0,1.0); //background color

//vertices
vec2(-0.5,-0.5),
vec2(0.0,0.35),
vec2(0.5,-0.5)

gl.drawArrays(gl.TRIANGLES,0,3);//render function

# data[].attributes.body
Ain Fakhira Putri binti Yusoff
Zahidah binti Md Zakaria Merican

//.html
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 ); //triangle color

//.js
var vertices = [
vec2( -0.5, -0.5 ),
vec2(  0.0,  0.3 ),
vec2(  0.5, -0.5 )
]; //triangle vertices

gl.clearColor( 0.0, 0.0, 1.0, 1.0 ); //canvas color

# data[].attributes.body
Norhazwani binti Zainal Azlin
'Afifah bt Mohd Hasbullah

//.html
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 ); // triangle color

//.js
var vertices = [
vec2( -0.7, -0.5 ),
vec2(  0.0,  0.6 ),
vec2(  0.7, -0.5 )
];   // vertex of triangle

gl.clearColor( 1.0, 0.0, 1.0, 1.0); //canvas color