/* * * @author: Geoffrey LEVENEZ * @contact: geoffreylevenez@gmail.com * @license: For personnal use only - Please don't just copy paste this code and put your name on it =) * @date: march 2017 * @version: 1.0 * @phase: beta * */ //Valued variables | constantes //Variables||Constantes for log||errors settings var errorLog = true; //Switch ON/OFF error logs var traceLog = false; //Switch ON/OFF info logs //Variables||Constantes for general settings var wallId = "pWall"; //Handle the canvas //Variables||Constantes for sound effects var backGroundMusic = new Audio( "" ); var sndPanel = new Audio( "http://s1download-universal-soundbank.com/wav/4975.wav" ); //Panel sound sndPanel.volume = 0; //Volume is mute at first var sndPanelVolume = 0.2; //Volume level when it's play //Variables||Constantes for wall pieces var regRGBAChecker = /(rgba)?$? ?([0-9]+\.?([0-9]+)?) ?\, ?([0-9]+\.?([0-9]+)?) ?\, ?([0-9]+\.?([0-9]+)?) ?\, ?(([0-9])\.?([0-9]+)?) ?$?/; //Match with RGBa code color var wallPiecesAmount = null || Math.floor( 30 + ( Math.random() * 50 ) * 2 ); //Fixed or randomNumber (For random amount, edit fix value by 'null') - Yes you can play with =) //Variables||Constantes for animations var acceleration = 2; //Transform speed * acceleration var trail = true; //Display a trail while panels are animated > Switch on: [/]]] ] ] ] or Switch off: [/] var triggered = false; //Animation is in progress or not (Default: false) //Unvalued variables | constantes var //General settings body, //Handle the body winWidth, //Window width winHeight, //Window height pWall, //Handle the canvas wall2D, //Handle canvas 2D context context support, //Detect computer or mobile/tablet //Panels settings theme, //dark OR light panelColor, //rgba panelStrokeColor, //rgba panelShadowColor, //rgba wallPiecesStore, //Stock pieces inside a multidimensional array rowsNumber, //number | Automaticly defined by the script columnsNumber, //number | Automaticly defined by the script wallWidthInit, //Initial size computed wallHeightInit, //Initial size computed //Animations settings stackAnimationsQueue, //Contain animations queue //Performance settings targetedFramerate, //Frame Per Second transformSteps, //Number of step to animate 1 panel shadowBlur, //Canvas shadowblur affected on panels animationRefresher, //in millisecond - Automaticly calculate depending on "targetedFramerate", stageEvents; //Collect all active events //Variables||Constantes for F.P.S handling var fpsHandler = { targetedFramerate: function () { return 30; }, transformStepsAutoPerf: function () { return Math.floor( 3 + ( 6 - ( ( 4048 - ( winWidth / 2 ) ) / 1000 ) ) ); }, shadowBlurAutoPerf: function () { return ( wallPiecesAmount > 10 ) ? 0 : 60; }, animationRefresherAutoPerf: function () { return 1000 / targetedFramerate; } }; //Variables||Constantes for logs localizations var logTemplate = { //Prefix/Suffix log part log001: "Error /!\\ ", log0010: " has throw the following message:\n", log002: "Trace >> ", //Error type log011: "The type can't be define", log021: "Context 2D can't be established!", log031: "Type error", log041: "Action is not defined", log051: "Ease is not defined", log061: "Can't erase the animation, see below more details:\n", //Info type log012: "Context 2D catch!", log022: "Shape color defined has : " }; ( function start() { $( document ).ready( function () { //Start audio document.addEventListener( "click", function startSound() { //backGroundMusic.play(); sndPanel.play(); sndPanel.loop = true; document.removeEventListener( "click", startSound ); } ); //Provide a different animation depending on the support getSupport(); //Define the current animations array stageEvents = [ ]; //Define the queue of animations array stackAnimationsQueue = [ ]; //Initialize the wall window.requestAnimationFrame( initWall ); $( window ).resize( function () { //Have to rewrite this part, Sololearn trigger the script before the script is really ready to start an resize the window many times which trigger several time the resize function //--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //window.requestAnimationFrame( initWall ); //document.getElementById( "pWall" ).getContext( "2d" ).scale( 1, 10 ); } ); $( "button" ).on( 'click', function () { switchTheme( this.name ); window.requestAnimationFrame( drawNewWall ); } ); //$( button ).on( 'click', switchTheme( this.text() ) ); } ); } )(); /* * @params {string} | type |> Message type (Error, Trace, Warning,...) * {string} | message |> The message to display in the browser's console * @returns {void} */ function logMessage( type, message ) { console.log( "%c" + type + "%c" + message, 'color: #AAA;', 'color: darkblue;' ); } /* * @params {string} | message * @returns {void} */ function throwTrace( message ) { if ( traceLog ) { logMessage( logTemplate.log002, message ); } } /* * @params {string} | message * @returns {void} */ function throwError( message ) { if ( errorLog ) { logMessage( logTemplate.log001, message ); } } /* * @params none * @returns {string} | support */ function getSupport() { //Check if mobile or computer to flange the animation complexity //Thank you Michael Zaporozhets for that one at http://stackoverflow.com/a/11381730/4865791 var check = false; ( function ( a ) { if ( /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test( a ) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( a.substr( 0, 4 ) ) ) check = true; } )( navigator.userAgent || navigator.vendor || window.opera ); ( check === true ) ? support = "mobile" : support = "computer"; } /* * @params none * @returns {void} */ function handleFPS() { if ( support === "mobile" && wallPiecesAmount > 60 ) { //Force to turn off logs traceError = false; traceLog = false; //Limit panels - Force the limit of panels to prevent a big slow down on mobile :s wallPiecesAmount = 60; } targetedFramerate = fpsHandler.targetedFramerate(); throwTrace( "Targeted FPS defined as " + targetedFramerate + " fps" ); animationRefresher = fpsHandler.animationRefresherAutoPerf(); throwTrace( "FramerateRefresher defined as " + animationRefresher + " millisecond(s)" ); shadowBlur = fpsHandler.shadowBlurAutoPerf(); throwTrace( "Shadow blur automaticly set as: " + shadowBlur ); transformSteps = fpsHandler.transformStepsAutoPerf(); throwTrace( "Animation steps rate automaticly set as: " + transformSteps ); if ( support === "mobile" ) { //Turn off the shadowBlur shadowBlur = 0; } } /* * @params {array} | Coordinate of the start point on the grid from the left top corner * @returns {matrix} | Coordinates */ var alphabet = { get: { A: function ( anchorCoordinates ) { var x = alphabet.match( anchorCoordinates ).x; var y = alphabet.match( anchorCoordinates ).y; return [ [ 3, 5 ], //width, height ( in panel counting) [ [ x + 1, y ], [ x, y + 1 ], [ x + 2, y + 1 ], [ x, y + 2 ], [ x + 2, y + 2 ], [ x, y + 3 ], [ x + 1, y + 3 ], [ x + 2, y + 3 ], [ x, y + 4 ], [ x + 2, y + 4 ] ] ]; }, H: function ( anchorCoordinates ) { var x = alphabet.match( anchorCoordinates ).x; var y = alphabet.match( anchorCoordinates ).y; return [ [ 3, 5 ], //width, height ( in panel counting) [ [ x, y ], [ x + 2, y ], [ x, y + 1 ], [ x + 2, y + 1 ], [ x, y + 2 ], [ x + 1, y + 2 ], [ x + 2, y + 2 ], [ x, y + 3 ], [ x + 2, y + 3 ], [ x, y + 4 ], [ x + 2, y + 4 ] ] ]; }, I: function ( anchorCoordinates ) { var x = alphabet.match( anchorCoordinates ).x; var y = alphabet.match( anchorCoordinates ).y; return [ [ 1, 5 ], //width, height ( in panel counting) [ [ x, y ], [ x, y + 2 ], [ x, y + 3 ], [ x, y + 4 ] ] ]; } }, match: function ( anchorCoordinates ) { return {x: anchorCoordinates[0], y: anchorCoordinates[1]}; } }; /* * @params {string} | theme > Dark or Light * @returns {void} */ function switchTheme( theme ) { throwTrace( "Received " + theme ); switch ( theme ) { case "Light": panelColor = "240, 240, 240, 1"; panelStrokeColor = "125, 125, 125, 0.8"; panelShadowColor = "200, 200, 200, 0.5"; theme = "Light"; break; case "Dark": panelColor = "40, 40, 40, 1"; panelStrokeColor = "5, 5, 5, 0.8"; panelShadowColor = "25, 25, 25, 0.5"; theme = "Dark"; break; default: throwTrace( theme ); var randTheme = Math.random(); var randThemeChoice = null; ( randTheme < 0.5 ) ? randThemeChoice = "Dark" : randThemeChoice = "Light"; theme = randThemeChoice; switchTheme( randThemeChoice ); } } /* * @description Initialize the whole script after jQuery detect the "Ready" state for the document * @returns {void} */ function initWall() { cleanAllAnimations(); throwTrace( "Window\n" + "\\ width = " + ( winWidth = $( window ).width() ) + "px\n" + "\\ height = " + ( winHeight = $( window ).height() - $( "header" ).height() ) + "px\n" + "= End initial state =\n\n" + "= Start to write logs =\n" + "=======================\n\n" + "Body catch!" ); handleFPS(); throwTrace( "= Initial state =" ); throwTrace( "Support detection" ); throwTrace( "Support: " + support ); //Get body body = $( "body" ); //Get staged canvas pWall = document.getElementById( wallId ); pWall.width = winWidth; pWall.height = winHeight; //Start 2D context wall2D = pWall.getContext( '2d' ); //Check 2D context if it correctly started ( !wall2D ) ? throwError( "Function 'initWall'" + logTemplate.log0010 + logTemplate.log021 ) : throwTrace( logTemplate.log012 ); switchTheme( theme ); resetWall(); drawNewWall(); throwTrace( "\n" + "=======================\n" + "= End to write logs =\n" + "= Activate on resize event =\n" ); } /* * @params none * @returns {void} */ function cleanAllAnimations() { var eventSize = stageEvents.length; if ( eventSize > 0 ) { for ( var event = 0; event < eventSize; event++ ) { try { stageEvents[event] = null; } catch ( e ) { throwError( "Function 'cleanAllAnimation'" + logTemplate.log061 + e ); } } } stageEvents = [ ]; } /* * @params none * @returns {void} */ function resetWall( x = 0, y = 0, width = winWidth, height = winWidth ) { // wall2D.save(); //Clear stage //wall2D.clearRect( x, y, width, height ); wall2D.clearRect( x, y, width, height ); // // Set default color // wall2D.setShapeFill(); // // // Edit canvas size // wall2D.fillRect( 0, 0, winWidth, winHeight ); // wall2D.restore(); } /* * @params none * @returns {void} */ function drawNewWall() { var pieceSideSize = getPieceSideSize(); // throwTrace( "1x Piece width = " + pieceSideSize + "px height = " + pieceSideSize + "px" ); rowsNumber = getRowsNumber(); columnsNumber = getColumnsNumber(); // throwTrace( "With " + wallPiecesAmount + " pieces, canvas content will be\n\\" + columnsNumber + " columns\n\\" + rowsNumber + " rows." ); wallPiecesStore = [ ]; //Store rows for ( var row = 0; row < rowsNumber; row++ ) { wallPiecesStore[row] = [ ]; for ( var column = 0; column < columnsNumber; column++ ) { wallPiecesStore[row][column] = new setWallPiece( ); //Store rect and draw them wallPiecesStore[row][column].x = wallPiecesStore[row][column].xInit = Math.ceil( column * pieceSideSize ); wallPiecesStore[row][column].y = wallPiecesStore[row][column].yInit = Math.ceil( row * pieceSideSize ); wallPiecesStore[row][column].width = wallWidthInit = pieceSideSize; wallPiecesStore[row][column].height = wallHeightInit = pieceSideSize; wallPiecesStore[row][column].row = row; wallPiecesStore[row][column].column = column; var randColorOffset = Math.floor( Number( Math.random() * 25 ) ); if ( theme == "Dark" ) { randColorOffset *= -1; } wallPiecesStore[row][column].backgroundColorR = Math.abs( Number( panelColor.split( "," )[0] ) - randColorOffset ); wallPiecesStore[row][column].backgroundColorG = Math.abs( Number( panelColor.split( "," )[1] ) - randColorOffset ); wallPiecesStore[row][column].backgroundColorB = Math.abs( Number( panelColor.split( "," )[2] ) - randColorOffset ); wallPiecesStore[row][column].backgroundColorA = Number( panelColor.split( "," )[3] ); wallPiecesStore[row][column].shadowColorR = Number( panelShadowColor.split( "," )[0] ); wallPiecesStore[row][column].shadowColorG = Number( panelShadowColor.split( "," )[1] ); wallPiecesStore[row][column].shadowColorB = Number( panelShadowColor.split( "," )[2] ); wallPiecesStore[row][column].shadowColorA = Number( panelShadowColor.split( "," )[3] ); wallPiecesStore[row][column].animeState = "close"; } } wall2D.createPieces(); //On click or keypress destroy #splashScreen, load the background and start to animate the wall body.toggleClass( "magicBackground" ); body.on( "click", function () { $( "#splashScreen" ).toggleClass( "opacity0" ).queue( function () { var countdown = setTimeout( function () { window.requestAnimationFrame( animateWall ); $( "#splashScreen" ).remove( ); stageEvents['countdown'] = null; clearTimeout( countdown ); }, 1000 ); stageEvents['countdown'] = countdown; } ).dequeue(); body.off( "click" ); } ); } /* * @params none * @returns {void} */ function animationQueue( ) { if ( !triggered ) { //triggered become true, which means that even the function is call, the function will continue it's works without being bothered and repeat simultaneously triggered = true; var i = 0; var fctTriggered, animation; var queue = setInterval( function () { if ( stackAnimationsQueue[i][0].inprogress == false ) { animation = stackAnimationsQueue[i][0].functionName; stackAnimationsQueue[i][0].inprogress = true; fctTriggered = new stackAnimationsQueue[i][0].functionName.anime( stackAnimationsQueue[i][0].action ); } if ( fctTriggered.state() == true ) { stackAnimationsQueue[i][0].inprogress = false; stackAnimationsQueue[i][0].ended = true; i++; if ( i == stackAnimationsQueue.length ) { triggered = false; clearInterval( queue ); } } }, targetedFramerate ); } } /* * @params {function} | animationPreset * {boolean} | startAfterPrevious - Wait for the previous animation return a finished state before start the animation (Default is true) * {number} | startAt - if startAfterPrevious is false, that's possible to define a specific time in millisecond * @returns {void} */ function stackAnimation( animationPreset, action, startAt = - 1, startAfterPrevious = true, inprogress = false, ended = false ) { stackAnimationsQueue.push( [ {functionName: animationPreset, action: action, startA: startAfterPrevious, startAP: startAt, inprogress: inprogress, ended: ended} ] ); //Alert animationQueue that it has some work to do :D animationQueue(); } /* * @params none * @returns {boolean} | Animation state */ Object.prototype.opencloseAll1by1TopLeft = new function () { this.anime = function ( action, row = 0, column = 0 ) { var self = this; self.action = action || "open"; self.row = row; self.column = column; var executed = 0; self.status = false; var openPanelOneByOne = setInterval( function ( ) { if ( row >= rowsNumber - 1 && column >= columnsNumber - 1 ) { clearInterval( openPanelOneByOne ); } wallPiecesStore[row][column].innerAnimate = new opencloseWall( action, [ row, column ] ); if ( column == ( columnsNumber - 1 ) ) { row++; column = 0; } else { column++; } executed++; if ( row >= rowsNumber - 1 && column >= columnsNumber - 1 ) { self.ended(); } } , animationRefresher * 2.5 ); self.state = function ( ) { return self.status; }; //To declare the animation finished and return it at caller self.ended = function () { self.status = true; return self.state(); }; }; }(); /* * @params none * @returns {boolean} | Animation state */ Object.prototype.writeText = new function () { this.anime = function ( action = action || "close", textToWrite = ["H", "I"], row = 0, column = 0 ) { var self = this; self.status = false; var symbolSize; //Number of panel to draw the symbol var currentPanel; var i = 0; var inprogress = false; var write = setInterval( function () { { if ( !inprogress ) { inprogress = true; var row = 0; var column = 0; var symbolDatas = alphabet.get[textToWrite[i]]( [ ( ( Math.floor( columnsNumber / 2 ) - ( textToWrite.length ) ) + ( i * 4 ) ), 1 ] ); var symbolPanel = symbolDatas[1]; throwTrace( symbolPanel ); var executed = 0; symbolSize = symbolPanel.length; var symPanelOneByOne = setInterval( function () { if ( executed == ( symbolSize - 1 ) && i >= ( textToWrite.length - 1 ) ) { throwTrace( "End end!" ); clearInterval( symPanelOneByOne ); clearInterval( write ); self.ended(); } else if ( executed > ( symbolSize - 1 ) ) { throwTrace( "End!" ); inprogress = false; executed = 0; i++; } currentPanel = symbolPanel[executed]; throwTrace( "Execute remaining: " + ( symbolSize - executed ) + " row: " + typeof ( currentPanel[1] ) + " column: " + currentPanel[0] ); wallPiecesStore[currentPanel[1]][currentPanel[0]].innerAnimate = new opencloseWall( "close", [ currentPanel[1], currentPanel[0] ] ); executed++; } , animationRefresher ); } } } ); self.state = function ( ) { return self.status; }; //To declare the animation finished and return it at caller self.ended = function () { self.status = true; return self.state(); }; }; }(); /* * @params none * @returns {boolean} | Animation state */ Object.prototype.circleWaves = new function () { this.anime = function ( action = action || "close", textToWrite = ["H", "I"], row = 0, column = 0 ) { var self = this; self.status = false; var symbolSize; //Number of panel to draw the symbol var currentPanel; var i = 0; var inprogress = false; var write = setInterval( function () { { if ( !inprogress ) { inprogress = true; var row = 0; var column = 0; var symbolDatas = alphabet.get[textToWrite[i]]( [ ( ( Math.floor( columnsNumber / 2 ) - ( textToWrite.length ) ) + ( i * 4 ) ), 1 ] ); var symbolPanel = symbolDatas[1]; throwTrace( symbolPanel ); var executed = 0; symbolSize = symbolPanel.length; var symPanelOneByOne = setInterval( function () { if ( executed == ( symbolSize - 1 ) && i >= ( textToWrite.length - 1 ) ) { throwTrace( "End end!" ); clearInterval( symPanelOneByOne ); clearInterval( write ); self.ended(); } else if ( executed > ( symbolSize - 1 ) ) { throwTrace( "End!" ); inprogress = false; executed = 0; i++; } currentPanel = symbolPanel[executed]; throwTrace( "Execute remaining: " + ( symbolSize - executed ) + " row: " + typeof ( currentPanel[1] ) + " column: " + currentPanel[0] ); wallPiecesStore[currentPanel[1]][currentPanel[0]].innerAnimate = new opencloseWall( "close", [ currentPanel[1], currentPanel[0] ] ); executed++; } , animationRefresher ); } } } ); self.state = function ( ) { return self.status; }; //To declare the animation finished and return it at caller self.ended = function () { self.status = true; return self.state(); }; }; }(); /* * @params none * @returns {void} */ function animateWall( ) { stackAnimation( opencloseAll1by1TopLeft, "open" ); stackAnimation( writeText, "close" ); stackAnimation( opencloseAll1by1TopLeft, "close" ); var loopAnime = setTimeout( function () { window.requestAnimationFrame( animateWall ); stageEvents['loopAnime'] = null; clearTimeout( loopAnime ); }, targetedFramerate * wallPiecesAmount * 7 ); stageEvents['loopAnime'] = loopAnime; } /* * @params none * @returns {number} | wallArea */ function getWallArea() { return winWidth * winHeight; } /* * @params none * @returns {number} | pieceSideSize */ function getPieceSideSize() { return Number( Math.ceil( Math.sqrt( getWallArea() / wallPiecesAmount ) ) ); } /* * @params none * @returns {number} | columnsNumber */ function getColumnsNumber() { return Math.ceil( winWidth / getPieceSideSize() ); } /* * @params none * @returns {number} | rowsNumber */ function getRowsNumber() { return Math.ceil( winHeight / getPieceSideSize() ); } /* * Extends Object for canvas context object * @params {number} | r, g, b, a |> 0.0, 0.0, 0.0, 0.0 (RGBa) * @returns {void} */ Object.prototype.setShapeFill = function ( r = 100.0, g = 179.0, b = 237.0, a = 0 ) { var mathReg = null; //throwTrace( "Type of R: " + ( typeof r ) + " value => " + r ); if ( // ( typeof r != "number" && typeof r != "string" ) || // ( typeof g != "number" && typeof g != "string" ) || // ( typeof b != "number" && typeof b != "string" ) || // ( typeof a != "number" && typeof a != "string" ) typeof r != "number" && typeof r != "string" ) { // throwError( "Function 'setShapeFill'" + logTemplate.log0010 + logTemplate.log031 ); return false; } else if ( typeof r == "string" && ( mathReg = r.match( regRGBAChecker ) ) != null ) { r = Number( mathReg[0].split( "," )[0] ); g = Number( mathReg[0].split( "," )[1] ); b = Number( mathReg[0].split( "," )[2] ); a = Number( mathReg[0].split( "," )[3] ); } else { } var val = "rgba(" + r + ", " + g + ", " + b + ", " + a + ")"; this.fillStyle = val; }; /* * @description Extends Object for canvas context object * @params none * @returns {object} | x, y, width, height, id, anchorX, anchorY,... */ Object.prototype.setWallPiece = function ( x, y, width, height, row, column, backgroundColorR, backgroundColorG, backgroundColorB, backgroundColorA, X_scale = 1, X_skew = 0, Y_skew = 0, Y_scale = 1, opacity = 1, innerAnimate, shadowColorR, shadowColorG, shadowColorB, shadowColorA, strokeLine = 0.5, animeState ) { return { X_scale: this.X_scale, X_skew: this.X_skew, Y_skew: this.Y_skew, Y_scale: this.Y_scale, dx: this.dx = 0, dy: this.dy = 0, strokeLine: this.strokeLine = strokeLine, row: this.row = row, column: this.column = column, x: this.x = x, xInit: this.xInit = this.x, y: this.y = y, yInit: this.yInit = this.y, width: this.width = width, height: this.height = height, anchorX: this.anchorX = this.width / 2, anchorY: this.anchorY = this.height / 2, backgroundColorR: this.backgroundColorR = backgroundColorR, backgroundColorG: this.backgroundColorG = backgroundColorG, backgroundColorB: this.backgroundColorB = backgroundColorB, backgroundColorA: this.backgroundColorA = backgroundColorA, shadowColorR: this.shadowColorR = shadowColorR, shadowColorG: this.shadowColorG = shadowColorG, shadowColorB: this.shadowColorB = shadowColorB, shadowColorA: this.shadowColorA = shadowColorA, innerAnimate: this.innerAnimate = innerAnimate, animeState: this.animeState = animeState }; }; /* * @description Extends Object for canvas context object * @params none * @returns {void} */ Object.prototype.createPieces = function () { if ( !trail ) { resetWall(); } for ( var row = 0; row < rowsNumber; row++ ) { for ( var column = 0; column < columnsNumber; column++ ) { if ( trail ) { resetWall( wallPiecesStore[row][column].x, wallPiecesStore[row][column].y, wallPiecesStore[row][column].width, wallPiecesStore[row][column].height ); } wall2D.beginPath(); wall2D.rect( wallPiecesStore[row][column].x, wallPiecesStore[row][column].y, wallPiecesStore[row][column].width, wallPiecesStore[row][column].height ); wall2D.setShapeFill( wallPiecesStore[row][column].backgroundColorR, wallPiecesStore[row][column].backgroundColorG, wallPiecesStore[row][column].backgroundColorB, wallPiecesStore[row][column].backgroundColorA ); wall2D.shadowBlur = shadowBlur; wall2D.shadowColor = "rgba(" + panelShadowColor + ")"; wall2D.fill(); wall2D.lineWidth = wallPiecesStore[row][column].strokeLine; wall2D.strokeStyle = "rgba(" + panelStrokeColor + ")"; wall2D.stroke(); } } }; /* * @description Convert coordinate into instance number * row: 0 | column: 0 => 1st item * row: 0 | column: 1 => 2nd item * row: 0 | column: 2 => 3rd item * ... * row: 10 | column: 3 => Xth item * @params {array} | panelCoordinate |> [row, column] * @returns {integer} | position inside an array */ function getPositionNumber( panelCoordinate ) { // var position = (rowsNumber * panelCoordinate[0]) + (columnsNumber * panelCoordinate[0]); // // throwTrace( "Position: " + position ); return [ Number( ( rowsNumber * panelCoordinate[0] ) + ( columnsNumber * panelCoordinate[0] ) ) ]; } /* * @params {string} | "open" (default) or "close" * {array} | [row, column] - First is zero * @returns {boolean} | The action is finished or not */ Object.prototype.opencloseWall = function ( action = "close", panelCoordinates ) { sndPanel.currentTime = 0.5; sndPanel.volume = sndPanelVolume; sndPanel.playbackRate = 4; //sndPanel.play(); var finalState, targetedX, targetWidth; var stateWidth = false; var stateX = false; var progressState = "inprogress|" + action; var progressStateInverted = "inprogress|" + ( action == "close" ) ? "open" : "close"; var panelStart = panelCoordinates || [ 0 ]; var panelAmount = ( panelCoordinates != null ) ? [ Number( panelCoordinates[0] + 1 ), Number( panelCoordinates[1] + 1 ) ] : [ rowsNumber, columnsNumber ]; var animationOpenCloseWall = setInterval( function ( ) { for ( var row = panelStart[0]; row < panelAmount[0]; row++ ) { for ( var column = panelStart[1]; column < panelAmount[1]; column++ ) { // throwTrace( "Row " + row + " Column " + column + " State " + wallPiecesStore[row][column].animeState + " Action " + action ); if ( wallPiecesStore[row][column].animeState != action || wallPiecesStore[row][column].animeState != progressStateInverted ) { // throwTrace( wallPiecesStore[row][column].animeState ); //To 0 width switch ( action ) { case "open": // throwTrace( "Function 'opencloseWall' > Action = " + action ); targetedWidth = 0; targetedX1 = Math.ceil( wallPiecesStore[row][column].xInit + ( wallWidthInit / 2 ) ); targetedX2 = Math.ceil( wallPiecesStore[row][column].xInit + wallWidthInit ); finalState = "open"; break; case "close": // throwTrace( "Function 'opencloseWall' > Action = " + action ); targetedWidth = 0; targetedX1 = Math.ceil( wallPiecesStore[row][column].xInit + ( wallWidthInit / 2 ) ); targetedX2 = Math.ceil( wallPiecesStore[row][column].xInit ); finalState = "close"; break; default: throwError( "Function 'opencloseWall'" + logTemplate.log041 ); } wallPiecesStore[row][column].animeState = progressState; //Width // throwTrace( "Initial conditions : width = " + wallPiecesStore[row][column].width + "px x = " + wallPiecesStore[row][column].x + " " + ( wallPiecesStore[row][column].width < 0 ) ); var resizeWidth = Math.floor( ( ( wallWidthInit / transformSteps ) * ( ( 1 + ease( "curveS", wallWidthInit, wallPiecesStore[row][column].width, targetedWidth ) * acceleration ) ) ) * 2 ); if ( ( wallPiecesStore[row][column].width > 0 && action == "open" ) || ( wallPiecesStore[row][column].width < 0 && action == "close" ) ) { // throwTrace( "1-1 w:" + wallPiecesStore[row][column].width ); // wallPiecesStore[row][column].strokeLine += 5; // throwTrace( "Before width " + wallPiecesStore[row][column].width ); ( action == "open" ) ? wallPiecesStore[row][column].width -= resizeWidth : wallPiecesStore[row][column].width += resizeWidth; // throwTrace( "Remove " + resizeWidth + " to width" ); // throwTrace( "After position " + wallPiecesStore[row][column].width ); if ( ( wallPiecesStore[row][column].width <= 0 && action == "open" ) || ( ( wallPiecesStore[row][column].width >= 0 ) && ( action == "close" ) ) ) { // throwTrace( "1-2 w:" + wallPiecesStore[row][column].width ); wallPiecesStore[row][column].width = 0; ( action == "open" ) ? wallPiecesStore[row][column].backgroundColorA = 0 : wallPiecesStore[row][column].backgroundColorA = 1; wallPiecesStore[row][column].strokeLine = 0; } } else if ( ( wallPiecesStore[row][column].width <= 0 && action == "open" ) || ( ( wallPiecesStore[row][column].width >= 0 ) && ( action == "close" ) ) ) { // throwTrace( "1-3 w:" + wallPiecesStore[row][column].width ); ( action == "open" ) ? wallPiecesStore[row][column].width -= resizeWidth : wallPiecesStore[row][column].width += resizeWidth; // wallPiecesStore[row][column].strokeLine += 5; if ( ( ( wallPiecesStore[row][column].width <= ( -wallWidthInit ) ) && ( action == "open" ) ) || ( ( wallPiecesStore[row][column].width >= wallWidthInit ) && ( action == "close" ) ) ) { // throwTrace( "1-4 w:" + wallPiecesStore[row][column].width ); ( action == "open" ) ? wallPiecesStore[row][column].width = ( -wallWidthInit ) : wallPiecesStore[row][column].width = wallWidthInit; wallPiecesStore[row][column].strokeLine = 0.5; stateWidth = true; } } //Move var translation = Math.floor( wallWidthInit / transformSteps ) * ( ( 1 + ease( "curveS", wallPiecesStore[row][column].xInit, wallPiecesStore[row][column].x, targetedX1 ) * acceleration ) ); if ( ( wallPiecesStore[row][column].x < targetedX1 && wallPiecesStore[row][column].width > 0 && action == "open" ) || ( wallPiecesStore[row][column].x < targetedX1 && wallPiecesStore[row][column].width < 0 && action == "close" ) ) { // throwTrace( "2-1" ); // throwTrace( "Before position " + wallPiecesStore[row][column].x ); ( action == "open" ) ? wallPiecesStore[row][column].x += translation : wallPiecesStore[row][column].x -= translation; // throwTrace( "Add " + translation + " to X position" ); // throwTrace( "After position " + wallPiecesStore[row][column].x ); if ( ( wallPiecesStore[row][column].x >= targetedX1 && action == "open" ) || ( wallPiecesStore[row][column].x <= targetedX1 && action == "close" ) ) { // throwTrace( "2-2" ); wallPiecesStore[row][column].x = targetedX1; } } else { // throwTrace( "2-3" ); // throwTrace( "X: " + wallPiecesStore[row][column].x + " TargetX2: " + targetedX2 ); if ( ( wallPiecesStore[row][column].x <= targetedX2 && action == "open" ) || ( wallPiecesStore[row][column].x >= targetedX2 && action == "close" ) ) { //throwTrace( "2-4 " + ( wallPiecesStore[row][column].x < targetedX2 && action == "close" ) ); ( action == "open" ) ? wallPiecesStore[row][column].x -= translation : wallPiecesStore[row][column].x -= translation; //throwTrace( "2-4\" " + ( wallPiecesStore[row][column].x < targetedX2 && action == "close" ) ); if ( ( wallPiecesStore[row][column].x <= targetedX2 && action == "open" ) || ( wallPiecesStore[row][column].x <= targetedX2 && action == "close" ) ) { // throwTrace( "2-5" ); wallPiecesStore[row][column].x = targetedX2; stateX = true; } } } wall2D.createPieces(); if ( stateX == true && stateWidth == true ) { sndPanel.volume = 0; wallPiecesStore[row][column].animeState = finalState; // throwTrace( "Anime 'opencloseWall' completed" ); clearInterval( animationOpenCloseWall ); break; } } } } }, animationRefresher ); //wall2D.createPieces(); stageEvents['animationOpenCloseWall'] = new Array( animationOpenCloseWall ); }; /* * @params {string} | Type of easing - curveS | ... * {number} | start point * {number} | current point * {number} | end point * @returns {number} | value */ function ease( type = "curveS", start, current, end ) { var value = null; var progress = getProgress( start, current, end ) / 100; switch ( type ) { case "curveS": value = Math.sin( progress ) / 100; break; default: throwError( "Function 'ease'" + logTemplate.log051 ); } return value; } /* * @params {number} | start point * {number} | current point * {number} | end point * @returns {number} | percent of progress */ function getProgress( start, current, end ) { //----^---->--^ //---300--25--0 //----0%-75%-100% //===[------]-- //=====275===-- return ( Math.abs( end - start ) - Math.abs( end - current ) * 100 ) / Math.abs( end - start ); }

Portal 2 | Wall of Panels [Work in progress]