/*Global graphics variables*/
var jsgl;
var canvas;
var spin = 0;
var cullOn = true;
var Red = new Array( 1.0, 0.0, 0.0, 1.0 );
var Blue = new Array( 0.0, 0.0, 1.0, 1.0 );
var Cyan = new Array( 0.0, 1.0, 1.0, 1.0 );
var Green = new Array( 0.0, 1.0, 0.0, 1.0 );
var Magenta = new Array( 1.0, 0.0, 1.0, 1.0 );
var Yellow = new Array( 1.0, 1.0, 0.0, 1.0 );
var mat_diffuse1 = Green;
var mat_diffuse2 = Red;
/*Global performance variables*/
var elapsed = 0;
var frame_count_start
var frame_count_current;
var frame_count = 0;
var seconds = 0;
var total_frame_count = 0;
var fps_label;
/*JavaScript specific variables*/
var ctx;
var armed;
var cube_one_select;
var cube_two_select;
function init() {
canvas = document.getElementById('cube_canvas');
try{
jsgl = new JSGL(canvas);
}
catch(TypeError) {
alert(TypeError.message);
}
if (canvas.getContext)
ctx = canvas.getContext('2d');
armed = false;
cube_one_select = document.getElementById('cube_one_color');
cube_two_select = document.getElementById('cube_two_color');
jsgl.jsglClearColor(1, 1, 1);
var mat_ambient = new Array( 0.2, 0.2, 0.2, 1.0 );
var mat_specular = new Array( 0.0, 0.0, 0.0, 1.0 );
var mat_emission = new Array( 0.0, 0.0, 0.0, 1.0 );
var shininess = new Array();
shininess[0] = 0.0;
jsgl.jsglMaterialfv(null, JSGL.JSGL_AMBIENT, mat_ambient);
jsgl.jsglMaterialfv(null, JSGL.JSGL_SPECULAR, mat_specular);
jsgl.jsglMaterialfv(null, JSGL.JSGL_EMISSION, mat_emission);
jsgl.jsglMaterialfv(null, JSGL.JSGL_SHININESS, shininess);
var light_amb = new Array( 0.0, 0.0, 0.0, 1.0 );
var light_diff = new Array( 1.0, 1.0, 1.0, 1.0 );
var light_spec = new Array( 1.0, 1.0, 1.0, 1.0 );
var light_position = new Array( 0.0, 0.0, 1.0, 0.0 );
jsgl.jsglLightfv(JSGL.JSGL_LIGHT0, JSGL.JSGL_AMBIENT, light_amb);
jsgl.jsglLightfv(JSGL.JSGL_LIGHT0, JSGL.JSGL_DIFFUSE, light_diff);
jsgl.jsglLightfv(JSGL.JSGL_LIGHT0, JSGL.JSGL_SPECULAR, light_spec);
jsgl.jsglLightfv(JSGL.JSGL_LIGHT0, JSGL.JSGL_POSITION, light_position);
jsgl.jsglEnable(JSGL.JSGL_LIGHTING);
jsgl.jsglEnable(JSGL.JSGL_LIGHT0);
jsgl.jsglEnable(JSGL.JSGL_NORMALIZE);
jsgl.jsglEnable(JSGL.JSGL_CULL_FACE);
jsgl.jsglShadeModel(JSGL.JSGL_FLAT);
var global_amb = new Array( 0.2, 0.2, 0.2, 1.0);
jsgl.jsglLightModelfv(JSGL.JSGL_LIGHT_MODEL_AMBIENT, global_amb);
jsgl.jsglLightModeli(JSGL.JSGL_LIGHT_MODEL_LOCAL_VIEWER, JSGL.JSGL_FALSE);
fps_label = document.getElementById('cube_fps');
frame_count_start = (new Date()).getTime();
reshape();
setInterval("idle();", 0);
}
function cube() {
//front
jsgl.jsglBegin(JSGL.JSGL_POLYGON);
jsgl.jsglNormal3f(0.0, 0.0, 1.0);
jsgl.jsglVertex3f(-1.0, -1.0, 0.0);
jsgl.jsglVertex3f(0.0, -1.0, 0.0);
jsgl.jsglVertex3f(0.0, 0.0, 0.0);
jsgl.jsglVertex3f(-1.0, 0.0, 0.0);
jsgl.jsglEnd();
//right
jsgl.jsglBegin(JSGL.JSGL_POLYGON);
jsgl.jsglNormal3f(1.0, 0.0, 0.0);
jsgl.jsglVertex3f(0.0, -1.0, 0.0);
jsgl.jsglVertex3f(0.0, -1.0, -1.0);
jsgl.jsglVertex3f(0.0, 0.0, -1.0);
jsgl.jsglVertex3f(0.0, 0.0, 0.0);
jsgl.jsglEnd();
//bottom
jsgl.jsglBegin(JSGL.JSGL_POLYGON);
jsgl.jsglNormal3f(0.0, -1.0, 0.0);
jsgl.jsglVertex3f(-1.0, -1.0, 0.0);
jsgl.jsglVertex3f(-1.0, -1.0, -1.0);
jsgl.jsglVertex3f(0.0, -1.0, -1.0);
jsgl.jsglVertex3f(0.0, -1.0, 0.0);
jsgl.jsglEnd();
//left
jsgl.jsglBegin(JSGL.JSGL_POLYGON);
jsgl.jsglNormal3f(-1.0, 0.0, 0.0);
jsgl.jsglVertex3f(-1.0, -1.0, 0.0);
jsgl.jsglVertex3f(-1.0, 0.0, 0.0);
jsgl.jsglVertex3f(-1.0, 0.0, -1.0);
jsgl.jsglVertex3f(-1.0, -1.0, -1.0);
jsgl.jsglEnd();
//top
jsgl.jsglBegin(JSGL.JSGL_POLYGON);
jsgl.jsglNormal3f(0.0, 1.0, 0.0);
jsgl.jsglVertex3f(-1.0, 0.0, 0.0);
jsgl.jsglVertex3f(0.0, 0.0, 0.0);
jsgl.jsglVertex3f(0.0, 0.0, -1.0);
jsgl.jsglVertex3f(-1.0, 0.0, -1.0);
jsgl.jsglEnd();
//back
jsgl.jsglBegin(JSGL.JSGL_POLYGON);
jsgl.jsglNormal3f(0.0, 0.0, -1.0);
jsgl.jsglVertex3f(-1.0, -1.0, -1.0);
jsgl.jsglVertex3f(-1.0, 0.0, -1.0);
jsgl.jsglVertex3f(0.0, 0.0, -1.0);
jsgl.jsglVertex3f(0.0, -1.0, -1.0);
jsgl.jsglEnd();
}
function display() {
frame_count++;
jsgl.jsglClear(JSGL.JSGL_COLOR_BUFFER_BIT);
jsgl.jsglMatrixMode(JSGL.JSGL_MODELVIEW);
jsgl.jsglLoadIdentity();
jsgl.jsglLookAt(0, 0, 5, 0, 0, 0, 0, 1, 0);
if(spin >= 360)
spin = 0;
spin++;
jsgl.jsglPushMatrix();
jsgl.jsglRotatef(spin*2, 0, 1, 0);
jsgl.jsglMaterialfv(null, JSGL.JSGL_DIFFUSE, mat_diffuse1);
cube();
jsgl.jsglPopMatrix();
jsgl.jsglPushMatrix();
jsgl.jsglRotatef(spin, 1, 0, 0);
jsgl.jsglTranslatef(.5, -.5, -1.5);
jsgl.jsglMaterialfv(null, JSGL.JSGL_DIFFUSE, mat_diffuse2);
cube();
jsgl.jsglPopMatrix();
//draw the triangle at the bottom left corner.
ctx.fillStyle = "rgb(0,0,0)";
ctx.beginPath();
ctx.moveTo(canvas.width-10,canvas.height);
ctx.lineTo(canvas.width,canvas.height-10);
ctx.lineTo(canvas.width,canvas.height);
ctx.fill();
}
function reshape() {
jsgl.jsglViewport(0, 0, canvas.width, canvas.height);
jsgl.jsglMatrixMode(JSGL.JSGL_PROJECTION);
jsgl.jsglLoadIdentity();
jsgl.jsglPerspective(65.0, canvas.height/canvas.width, 1, 100);
}
function idle() {
//If a second has gone by then restart the frame count
frame_count_current = (new Date()).getTime();
elapsed = frame_count_current - frame_count_start;
if(elapsed >= 1000) {
seconds += Math.round(elapsed/1000.0);
total_frame_count += frame_count;
fps_label.innerHTML = "
Seconds: " + seconds +
"
Average FPS: " + (total_frame_count/seconds) + ""
frame_count = 0;
frame_count_start = frame_count_current;
}
display();
}
function toggleCull() {
if(cullOn){
jsgl.jsglDisable(JSGL.JSGL_CULL_FACE);
cullOn = false;
}else{
jsgl.jsglEnable(JSGL.JSGL_CULL_FACE);
cullOn = true;
}
}
function arm(event) {
//The user has pressed the left button
if(event.button == 0) {
//if the user clicks within epsilon pixels
//of the bottom corner then perform the drag.
var epsilon = 10;
var deltaX = Math.abs(canvas.width-event.clientX);
var deltaY = Math.abs(canvas.height-event.clientY);
if(deltaX <= epsilon && deltaY <= epsilon) {
armed = true;
}
}
}
function disarm() {
armed = false;
}
function resize(event) {
if(armed) {
canvas.width=event.clientX;
canvas.height=event.clientY;
reshape();
}
}
function changeCubeOneColor(value) {
switch(value) {
case 'Green':
mat_diffuse1 = Green;
break;
case 'Yellow':
mat_diffuse1 = Yellow;
break;
case 'Magenta':
mat_diffuse1 = Magenta;
break;
}
}
function changeCubeTwoColor(value) {
switch(value) {
case 'Red':
mat_diffuse2 = Red;
break;
case 'Blue':
mat_diffuse2 = Blue;
break;
case 'Cyan':
mat_diffuse2 = Cyan;;
break;
}
}
function checkkey(e) {
var keycode;
if (window.event)
keycode = window.event.keyCode;
else if (e)
keycode = e.which;
if (keycode == 67 || keycode == 99)
toggleCull();
}