From 1ef133c52d12daf3fdad1d979e5a71cb39fa0d2e Mon Sep 17 00:00:00 2001 From: Yann Granjon Date: Wed, 5 Jun 2013 16:13:15 +0200 Subject: Initial Commit --- js/loading.js | 308 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 308 insertions(+) create mode 100644 js/loading.js (limited to 'js/loading.js') diff --git a/js/loading.js b/js/loading.js new file mode 100644 index 0000000..e8a0510 --- /dev/null +++ b/js/loading.js @@ -0,0 +1,308 @@ +// ECMAScript 5 strict mode +/* jshint globalstrict: true*/ +/* global THREE, $, document, window, console */ +/* global onLoaded, LOADING_BAR_SCALE,ROWS,COLS,PIECE_SIZE, BOARD_SIZE, FLOOR_SIZE, WIREFRAME, DEBUG, Cell, WHITE, BLACK, FEEDBACK, SHADOW */ +"use strict"; + +var geometries = {}; +var textures = {}; + + +(function() { + + var $bar,$tips; + var glow; + + function loadResources () { + // counter + var loaded = 0; + // list of all mesh and texture + var resources = [ + '3D/json/knight.json', + '3D/json/king.json', + '3D/json/queen.json', + '3D/json/bishop.json', + '3D/json/rook.json', + '3D/json/pawn.json', + '3D/json/board.json', + '3D/json/innerBoard.json', + 'texture/wood-0.jpg', + 'texture/wood-1.jpg', + 'texture/wood_N.jpg', + 'texture/wood_S.jpg', + 'texture/knight-ao.jpg', + 'texture/rook-ao.jpg', + 'texture/king-ao.jpg', + 'texture/bishop-ao.jpg', + 'texture/queen-ao.jpg', + 'texture/pawn-ao.jpg', + 'texture/floor.jpg', + 'texture/floor_N.jpg', + 'texture/floor_S.jpg', + 'texture/fakeShadow.jpg' + ]; + + // for loading mesh + function loadJSON (url) { + var loader = new THREE.JSONLoader(); + loader.load(url, function(geometry) { + + geometries[url] = geometry; + + loaded++; + checkLoad(); + }); + } + + // for loading texture + function loadImage(url) { + THREE.ImageUtils.loadTexture( + url, + THREE.UVMapping(), + function(texture) { + textures[url] = texture; + loaded++; + checkLoad(); + } + ); + } + + // load all the resources from the list + resources.forEach(function(url) { + switch ( url.split('.').pop() ) { + case 'json' : + loadJSON(url); + break; + case 'jpg' : + loadImage(url); + break; + default: + throw 'invalid resource'; + } + }); + + // control the progressBar + // and fire the onLoaded call back on completion + function checkLoad () { + $bar.update(loaded/resources.length); + if (loaded === resources.length) { + setTimeout(onLoaded,0.1); + } + } + + } + + function initGlow() { + // create and set the green glow in the background + var size = window.innerWidth*LOADING_BAR_SCALE*1.8; + glow = document.createElement('canvas'); + glow.width = size; + glow.height = size; + document.body.appendChild(glow); + var ctx = glow.getContext('2d'); + + // make it oval + glow.style.width = size + "px"; + glow.style.height = Math.round(size/2) + "px"; + + + var requestId; + function animate() { + var dt = getDelta(); + update(dt); + requestId = window.requestAnimationFrame(animate); + } + + function update(dt) { + + ctx.clearRect(0,0,size,size); + + // for the pulse effect + var cycle = Math.cos(Date.now()/1000 * Math.PI); + var maxRadius = size/2.5; + + function lerp(a,b,p) { + return a + (b-a)*p; + } + + var amplitude = maxRadius * 0.015; + var sizeOffset = cycle*amplitude; + var radius = maxRadius - amplitude + sizeOffset; + var saturation = lerp(70,100,(cycle+1)/2); + + + var grd = ctx.createRadialGradient(size/2, size/2, 0, size/2, size/2, radius); + // fake a non linear gradient + grd.addColorStop(0, 'hsla(90,'+saturation+'%,50%,0.5)'); + grd.addColorStop(0.125,'hsla(90,'+saturation+'%,50%,0.3828125)'); + grd.addColorStop(0.25, 'hsla(90,'+saturation+'%,50%,0.28125)'); + grd.addColorStop(0.375,'hsla(90,'+saturation+'%,50%,0.1953125)'); + grd.addColorStop(0.5, 'hsla(90,'+saturation+'%,50%,0.125)'); + grd.addColorStop(0.75, 'hsla(90,'+saturation+'%,50%,0.03125)'); + grd.addColorStop(1, 'hsla(90,'+saturation+'%,50%,0.0)'); + + // draw the gradient + ctx.rect(0,0,size,size); + ctx.fillStyle = grd; + ctx.fill(); + } + + glow.remove = function() { + window.cancelAnimationFrame(requestId); + this.parentNode.removeChild(this); + }; + + var oldTime; + function getDelta() { + var now = Date.now(); + if (oldTime === undefined) { + oldTime = now; + } + var delta = (now - oldTime)/1000; + oldTime = now; + return delta; + } + + animate(); + } + + + function initTips() { + // list of tips + var tips = [ + "Aggregating wood fibers", + "Generating pieces census report", + "Testing board resistance", + "Generating Matrix 8x8", + "Answering Queen's request", + "Carving a princess for the knight", + "Sanding the Bishop", + "Enrolling Pawns", + "Generating cheat sheet", + "Mating the king", + "Planting virtual trees", + "Asking Deep Blue for advice", + "Nominating Bishops", + "Dubbing Knights", + "Crowning the King", + "Waxing chessboard", + "Evaluating the idea of an hexagonal board, and rejecting it", + "Gathering extra vertices (just in case)", + "Trimming edges", + "Intimidating opponent", + "Learning the rules" + ]; + + //jQuery object for tips + $tips = $('
') + .attr("id","tips") + .css("color","white") + .appendTo($('body')); + + // how often tips changes (in ms) + var tipTiming = 5000; + + + $tips.update = function() { + var self = this; + if( tips.length > 0 ) { + var index = Math.floor(Math.random() * tips.length); + + var sentence = tips[index]; + tips.splice(index,1); + $(this).text(sentence+"..."); + } + this.timer = setTimeout(function(){self.update();},tipTiming); + }; + + // this little ugliness is just to clear the timer + // automagically on .remove() + var tipsRemove = $tips.remove; + $tips.remove = function() { + clearTimeout(this.timer); + tipsRemove.call(this); + }; + $tips.update(); + + } + + function initBar() { + // jQuery progress bar + $bar = $('
') + .attr("id","progressbar") + .css("width",(LOADING_BAR_SCALE*100)+"%") + .appendTo($('body')); + + // jQuery progress bar label + var $label = $('
') + .attr("id","progress-label") + .appendTo($bar); + + // setting up the progressbar + $bar.progressbar({ + value:false, + change: function() { + $label.text($bar.progressbar("value") + "%"); + } + }); + + // avoid rounded corners + $bar.removeClass('ui-corner-all'); + $bar.children().removeClass('ui-corner-all'); + $bar.children().removeClass('ui-corner-left'); + + + // that's where the progression happens + $bar.update = function(p) { + p = Math.round(p*100); + $bar.progressbar( "value", p ); + // somehow need to constantly remove it + $bar.children().removeClass('ui-corner-right'); + }; + + $bar.update(0); + + } + + function centering() { + $bar.position({ + of:window, + my:"center center", + at:"center center" + }); + $tips.position({ + of:$bar, + my:"center bottom", + at:"center top-10" + }); + $(glow).position({ + of:window, + my:"center center", + at:"center center" + }); + + window.addEventListener('resize',centering ); + } + + function removeLoader() { + $bar.remove(); + $tips.remove(); + glow.remove(); + window.removeEventListener('resize',centering ); + + } + + window.onload = function () { + // the page is loaded + // start the resource loader + initGlow(); + initTips(); + initBar(); + centering(); + + loadResources(); + //$bar.update(1); + }; + + window.removeLoader = removeLoader; +})(); \ No newline at end of file -- cgit v1.2.3