EffectHub.com: your best source for gaming

Recommendation

More Effects...

//A "from scratch" approach to building a Canvas Isometric effect
//a bit harsh on the cpu :(

(function (window){

var MathUtil = {};

//used for radiansToDegrees and degreesToRadians
	MathUtil.PI_180 = Math.PI/180;
	MathUtil.ONE80_PI = 180/Math.PI;
	
	//precalculations for values of 90, 270 and 360 in radians
	MathUtil.PI2 = Math.PI*2;
	MathUtil.HALF_PI = Math.PI/2;
	MathUtil.PI_AND_HALF = Math.PI+ Math.PI/2;
	MathUtil.NEGATIVE_HALF_PI = -Math.PI/2;

//keep degrees between 0 and 360
    MathUtil.constrainDegreeTo360 = function(degree){
        return (360 + degree % 360) % 360;//hmmm... looks a bit weird?!
    };

MathUtil.constrainRadianTo2PI = function(rad){
        return (MathUtil.PI2 + rad % MathUtil.PI2) % MathUtil.PI2;//equally so...
    };

MathUtil.radiansToDegrees = function(rad){
        return rad*MathUtil.ONE80_PI;
    };

MathUtil.degreesToRadians = function(degree){
        return degree * MathUtil.PI_180;
    };

//return number between 1 and 0
	MathUtil.normalize = function(value, minimum, maximum){
		return (value - minimum) / (maximum - minimum);
	};

//map normalized number to values
	MathUtil.interpolate = function(normValue, minimum, maximum){
		return minimum + (maximum - minimum) * normValue;
	};

//map a value from one set to another
	MathUtil.map = function(value, min1, max1, min2, max2){
		return MathUtil.interpolate( MathUtil.normalize(value, min1, max1), min2, max2);
	};

MathUtil.clamp = function(min,max,value){
        if(value < min){
            return min;
        }
        if(value > max){
            return max;
        }
        return value;
    };

MathUtil.clampRGB = function(value){
        return MathUtil.clamp(0, 255, Math.round(value));
    };

MathUtil.getRandomNumberInRange = function(min, max){
		return min + Math.random() * (max - min);
	};

//from : http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
    MathUtil.getRandomHexColorString = function() {
        return MathUtil.rgbToHex(Math.floor(Math.random()*255), Math.floor(Math.random()*255), Math.floor(Math.random()*255));
    }

//from : http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
    MathUtil.rgbToHex = function(r, g, b) {
        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }

MathUtil.hexToRgb = function(hex) {
        // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
        var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, function(m, r, g, b) {
            return r + r + g + g + b + b;
        });

var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }

window.MathUtil = MathUtil;
	
}(window));

//has a dependency on MathUtil

(function (window){

var Geom = {};

//==================================================
    //=====================::POINT::====================
    //==================================================

Geom.Point = function (x,y){
        this.x = isNaN(x) ? 0 : x;
        this.y = isNaN(y) ? 0 : y;
    };

Geom.Point.prototype.clone = function(){
        return new Geom.Point(this.x,this.y);
    };

Geom.Point.prototype.update = function(x, y){
        this.x = isNaN(x) ? this.x : x;
        this.y = isNaN(y) ? this.y : y;
    };

Geom.Point.prototype.add = function(x, y){
        this.x += isNaN(x) ? 0 : x;
        this.y += isNaN(y) ? 0 : y;
    };

Geom.Point.prototype.equals = function(point){
        return this.x==point.x && this.y==point.y;
    };

Geom.Point.prototype.toString = function(){
        return "{x:"+this.x+" , y:"+this.y+"}";
    };

Geom.Point.interpolate = function(pointA, pointB, normal){
        return new Geom.Point(Sakri.MathUtil.interpolate(normal, pointA.x, pointB.x) , Sakri.MathUtil.interpolate(normal, pointA.y, pointB.y));
    };

Geom.Point.distanceBetweenTwoPoints = function( point1, point2 ){
        //console.log("Math.pow(point2.x - point1.x,2) : ",Math.pow(point2.x - point1.x,2));
        return Math.sqrt( Math.pow(point2.x - point1.x,2) + Math.pow(point2.y - point1.y,2) );
    };

Geom.Point.angleBetweenTwoPoints = function(p1,p2){
        return Math.atan2(p1.y-p2.y, p1.x-p2.x);
    };

//==================================================
	//===================::RECTANGLE::==================
	//==================================================

Geom.Rectangle = function (x, y, width, height){
		this.update(x, y, width, height);
	};
	
	Geom.Rectangle.prototype.update = function(x, y, width, height){
		this.x = isNaN(x) ? 0 : x;
		this.y = isNaN(y) ? 0 : y;
		this.width = isNaN(width) ? 0 : width;
		this.height = isNaN(height) ? 0 : height;
	};
	
	Geom.Rectangle.prototype.updateToRect = function(rect){
		this.x = rect.x;
		this.y = rect.y;
		this.width = rect.width;
		this.height = rect.height;
	};
	
	Geom.Rectangle.prototype.scaleX = function(scaleBy){
		this.width *= scaleBy;
	};
	
	Geom.Rectangle.prototype.scaleY = function(scaleBy){
		this.height *= scaleBy;
	};
	
	Geom.Rectangle.prototype.scale = function(scaleBy){
		this.scaleX(scaleBy);
		this.scaleY(scaleBy);
	};

Geom.Rectangle.prototype.getRight = function(){
		return this.x + this.width;
	};
	
	Geom.Rectangle.prototype.getBottom = function(){
		return this.y + this.height;
	};

Geom.Rectangle.prototype.getCenter = function(){
        return new Geom.Point(this.getCenterX(), this.getCenterY());
    };

Geom.Rectangle.prototype.getCenterX = function(){
        return this.x + this.width/2;
    };

Geom.Rectangle.prototype.getCenterY=function(){
        return this.y + this.height/2;
    };

Geom.Rectangle.prototype.containsPoint = function(x, y){
        return x >= this.x && y >= this.y && x <= this.getRight() && y <= this.getBottom();
    };
    Geom.Rectangle.prototype.containsRect = function(rect){
        return this.containsPoint(rect.x, rect.y) && this.containsPoint(rect.getRight(), rect.getBottom());
    };

Geom.Rectangle.prototype.clone = function(){
		return new Geom.Rectangle(this.x, this.y, this.width, this.height);
	};
	
	Geom.Rectangle.prototype.toString = function(){
		return "Rectangle{x:"+this.x+" , y:"+this.y+" , width:"+this.width+" , height:"+this.height+"}";
	};

//==================================================
    //=====================::Point3d::====================
    //==================================================

Geom.Point3d = function (x,y, z){
        this.x = isNaN(x) ? 0 : x;
        this.y = isNaN(y) ? 0 : y;
        this.z = isNaN(z) ? 0 : z;
    };

Geom.Point3d.prototype.clone = function(){
        return new Geom.Point3d(this.x, this.y, this.z);
    };

Geom.Point3d.prototype.copyValuesTo = function(point3d){
        point3d.x = this.x;
        point3d.y = this.y;
        point3d.z = this.z;
    };

Geom.Point3d.prototype.updateValues = function(x,y,z){
        this.x = x;
        this.y = y;
        this.z = z;
    };

Geom.Point3d.prototype.equals = function(point){
        return this.x==point.x && this.y==point.y && this.z==point.z;
    };

Geom.Point3d.prototype.toString = function(){
        return "{x:"+this.x+" , y:"+this.y+" , z:"+this.z+"}";
    };

window.Geom = Geom;
    
}(window));

//=========================::UNIT ANIMATOR::===============================

//animates a number from 0-1 (with optional easing) for a given duration and a framerate
//this is used to animate or tweeen visuals which are set up using interpolation

(function (window){

};

//t is "time" this.millisecondsAnimated
	//b is the "beginning" value
	//c is "change" or the difference of end-start value
	//d is this.duration
	
	//classic Robert Penner easing functions
	//http://www.robertpenner.com/easing/
	
	
	UnitAnimator.easeLinear = function(t, b, c, d){
		return c * (t / d) + b;
	};
	
	//SINE
	UnitAnimator.easeInSine = function (t, b, c, d){
		return -c * Math.cos(t/d * MathUtil.HALF_PI) + c + b;
	};
	UnitAnimator.easeOutSine = function (t, b, c, d){
		return c * Math.sin(t/d * MathUtil.HALF_PI) + b;
	};
	UnitAnimator.easeInOutSine = function (t, b, c, d){
		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
	};
	
	UnitAnimator.easingFunctions = [UnitAnimator.easeLinear,
                                    UnitAnimator.easeInSine, UnitAnimator.easeOutSine, UnitAnimator.easeInOutSine];
	
	UnitAnimator.getRandomEasingFunction = function(){
		return UnitAnimator.easingFunctions[Math.floor( Math.random()*UnitAnimator.easingFunctions.length )];
	};
	
	UnitAnimator.prototype.setRandomEasingFunction = function(){
		this.easingFunction = UnitAnimator.getRandomEasingFunction();
	};
	
	UnitAnimator.prototype.setEasingFunction = function(easingFunction){
		if(UnitAnimator.easingFunctions.indexOf(easingFunction) > -1){
			this.easingFunction = easingFunction;
		}
	};
	
	//easing (t, b, c, d)
	//@t is the current time (or position) of the tween. This can be seconds or frames, steps, seconds, ms, whatever � as long as the unit is the same as is used for the total time [3].
	//@b is the beginning value of the property.
	//@c is the change between the beginning and destination value of the property.
	//@d is the total time of the tween.
	UnitAnimator.prototype.getAnimationPercent = function(){
		return this.easingFunction(MathUtil.normalize(this.millisecondsAnimated, 0, this.duration), 0, 1, 1);
	};
	
	UnitAnimator.prototype.reset = function(duration, canvas, updateCallBack, completeCallBack){
		this.duration = duration;
        this.canvas = canvas;
		this.updateCallBack = updateCallBack;
		this.completeCallBack = completeCallBack;
	};
	
	UnitAnimator.prototype.start = function(easingFunction){
		//console.log("UnitAnimator.start()");
		if(easingFunction){
			this.setEasingFunction(easingFunction);
		}
        this.animating = true;
        this.animationStart = Date.now();
        this.millisecondsAnimated = 0;//keeps track of how long the animation has been running
		this.loop();
	};

UnitAnimator.prototype.loop = function(){
        if(!this.animating){
            return;
        }
        this.update();
        window.requestAnimationFrame(this.loopFunction, canvas);
    }

UnitAnimator.prototype.pause = function(){
		this.animating = false;
	};

UnitAnimator.prototype.stop = function(){
        this.pause();
    };

//refactor, make private
	UnitAnimator.prototype.update = function(){
		//console.log("UnitAnimator.update()",this.getAnimationPercent());
		this.millisecondsAnimated = Date.now() - this.animationStart;
		if(this.millisecondsAnimated >= this.duration){
			//console.log("UnitAnimator.update() animation complete");
			this.pause();
			this.millisecondsAnimated = this.duration;
			this.dispatchUpdate();
			this.dispatchComplete();
			return;
		}
		this.dispatchUpdate();
	};
	
	UnitAnimator.prototype.dispatchUpdate = function(){
		if(this.updateCallBack){
			//console.log("UnitAnimator.dispatchUpdate()",this.getAnimationPercent());
			this.updateCallBack();
		}
	};
	UnitAnimator.prototype.dispatchComplete = function(){
		if(this.completeCallBack){
			this.completeCallBack();
		}
	};

window.UnitAnimator = UnitAnimator;
	
}(window));

/**
 * Created by sakri on 07-04-14.
 */

(function (window){

//=========================::ABSTRACT ISOMETRIC SPACE::============================

var AbstractIsometricSpace = function(stageWidth, stageHeight, width, height, depth) {
        //console.log("AbstractIsometricSpace.constructor()",stageWidth, stageHeight, width, height, depth);
        this.frontLeftTop = new Geom.Point();
        this.frontLeftBottom = new Geom.Point();
        this.backLeftTop = new Geom.Point();
        this.backLeftBottom = new Geom.Point();
        this.frontRightTop = new Geom.Point();
        this.frontRightBottom = new Geom.Point();
        this.backRightTop = new Geom.Point();
        this.backRightBottom = new Geom.Point();
        this.stageWidth = stageWidth;
        this.stageHeight = stageHeight;
        this.width = width;
        this.height = height;
        this.depth = depth;
        this.updatePoints();
    };

AbstractIsometricSpace.prototype.updateStage = function (stageWidth, stageHeight) {
        this.stageWidth = stageWidth;
        this.stageHeight = stageHeight;
        this.updatePoints();
    };

AbstractIsometricSpace.prototype.updateSpaceContainer = function (width, height, depth) {
        this.width = width;
        this.height = height;
        this.depth = depth;
        this.updatePoints();
    };

AbstractIsometricSpace.prototype.updatePoints = function () {
        console.error("AbstractIsometricSpace.updatePoints() ERROR : subclasses must override this method");
    };

//only used to for calculation in the project method
    AbstractIsometricSpace.prototype.frontLeft = new Geom.Point();
    AbstractIsometricSpace.prototype.backLeft = new Geom.Point();
    AbstractIsometricSpace.prototype.frontRight = new Geom.Point();
    AbstractIsometricSpace.prototype.backRight = new Geom.Point();
    AbstractIsometricSpace.prototype.leftZ = new Geom.Point();
    AbstractIsometricSpace.prototype.rightZ = new Geom.Point();

AbstractIsometricSpace.prototype.project = function (point3d, point) {
        //console.log("AbstractIsometricSpace.project() point3d:" + point3d + " , point : " + point);
        this.frontLeft.x = this.frontLeftBottom.x;
        this.frontLeft.y = MathUtil.interpolate(point3d.y, this.frontLeftBottom.y, this.frontLeftTop.y);
        //console.log("\tfrontLeft:" + this.frontLeft);
        this.backLeft.x = this.backLeftBottom.x;
        this.backLeft.y = MathUtil.interpolate(point3d.y, this.backLeftBottom.y, this.backLeftTop.y);
        //console.log("\tthis.backLeft:" + this.backLeft);
        this.frontRight.x = this.frontRightBottom.x;
        this.frontRight.y = MathUtil.interpolate(point3d.y, this.frontRightBottom.y, this.frontRightTop.y);
        //console.log("\tthis.frontRight:" + this.frontRight);
        this.backRight.x = this.backRightBottom.x;
        this.backRight.y = MathUtil.interpolate(point3d.y, this.backRightBottom.y, this.backRightTop.y);
        //console.log("\tthis.backRight:" + this.backRight);
        this.leftZ.x = MathUtil.interpolate(point3d.z, this.frontLeft.x, this.backLeft.x);
        this.leftZ.y = MathUtil.interpolate(point3d.z, this.frontLeft.y, this.backLeft.y);
        //console.log("\tthis.leftZ:" + this.leftZ);
        this.rightZ.x = MathUtil.interpolate(point3d.z, this.frontRight.x, this.backRight.x);
        this.rightZ.y = MathUtil.interpolate(point3d.z, this.frontRight.y, this.backRight.y);
        //console.log("\tthis.rightZ:" + this.rightZ);
        point.x = MathUtil.interpolate(point3d.x, this.leftZ.x, this.rightZ.x);
        point.y = MathUtil.interpolate(point3d.x, this.leftZ.y, this.rightZ.y);
        //console.log("\tpoint:" + point);
    };

AbstractIsometricSpace.prototype.renderWireframe = function (context, strokeStyle) {
        context.strokeStyle = strokeStyle==undefined ?  SimpleGeometry.getRgbaStyleString(0xFF,0x00,0x00,.3) : strokeStyle;
        context.lineWidth = 1;
        context.beginPath();
        context.moveTo(this.frontLeftTop.x, this.frontLeftTop.y);
        context.lineTo(this.frontLeftBottom.x, this.frontLeftBottom.y);
        context.lineTo(this.backLeftBottom.x, this.backLeftBottom.y);
        context.lineTo(this.backLeftTop.x, this.backLeftTop.y);
        context.lineTo(this.frontLeftTop.x, this.frontLeftTop.y);
        context.closePath();
        context.stroke();
        context.beginPath();
        context.moveTo(this.frontRightTop.x, this.frontRightTop.y);
        context.lineTo(this.frontRightBottom.x, this.frontRightBottom.y);
        context.lineTo(this.backRightBottom.x, this.backRightBottom.y);
        context.lineTo(this.backRightTop.x, this.backRightTop.y);
        context.lineTo(this.frontRightTop.x, this.frontRightTop.y);
        context.stroke();
        context.closePath();
        context.moveTo(this.backLeftTop.x,this.backLeftTop.y);
        context.lineTo(this.backRightTop.x,this.backRightTop.y);
        context.stroke();
        context.moveTo(this.backLeftBottom.x,this.backLeftBottom.y);
        context.lineTo(this.backRightBottom.x,this.backRightBottom.y);
        context.stroke();
        context.moveTo(this.frontLeftTop.x,this.frontLeftTop.y);
        context.lineTo(this.frontRightTop.x,this.frontRightTop.y);
        context.stroke();
        context.moveTo(this.frontLeftBottom.x,this.frontLeftBottom.y);
        context.lineTo(this.frontRightBottom.x,this.frontRightBottom.y);
        context.stroke();
    };

window.AbstractIsometricSpace = AbstractIsometricSpace;

//=========================::ISOMETRIC SPACE LEFT::============================

var IsometricSpaceLeft = function (stageWidth, stageHeight, width, height, depth) {
        AbstractIsometricSpace.call(this, stageWidth, stageHeight, width, height, depth); //call super constructor.
        //console.log("IsometricSpaceLeft constructor", stageWidth, stageHeight, width, height, depth);
    };

//subclass extends superclass
    IsometricSpaceLeft.prototype = Object.create(AbstractIsometricSpace.prototype);
    IsometricSpaceLeft.prototype.constructor = AbstractIsometricSpace;

IsometricSpaceLeft.prototype.updatePoints = function () {
        var middle = MathUtil.map(this.depth, 0, (this.width + this.depth), 0, this.stageWidth);
        var isometricFrontLength = -middle / Math.cos(MathUtil.degreesToRadians(150));
        var isometricMappingUnit = MathUtil.map(1, 0, this.depth, 0, isometricFrontLength);
        var isometricHeightLength = isometricMappingUnit * this.height;
        var isometricSideLength = isometricMappingUnit * this.width;
        this.backLeftTop.x = middle;
        this.backLeftTop.y = 0;
        this.backLeftBottom.x = middle;
        this.backLeftBottom.y = isometricHeightLength;
        this.frontLeftTop.x = 0;
        this.frontLeftTop.y = isometricFrontLength * Math.sin(MathUtil.degreesToRadians(150));
        this.frontLeftBottom.x = 0;
        this.frontLeftBottom.y = this.frontLeftTop.y + isometricHeightLength;
        this.backRightTop.x = middle + isometricSideLength * Math.cos(MathUtil.degreesToRadians(30));
        this.backRightTop.y = isometricSideLength * Math.sin(MathUtil.degreesToRadians(30));
        this.backRightBottom.x = this.backRightTop.x;
        this.backRightBottom.y = this.backRightTop.y + isometricHeightLength;
        this.frontRightTop.x = isometricSideLength * Math.cos(MathUtil.degreesToRadians(30));
        this.frontRightTop.y = this.frontLeftTop.y + isometricSideLength * Math.sin(MathUtil.degreesToRadians(30));
        this.frontRightBottom.x = this.frontRightTop.x;
        this.frontRightBottom.y = this.frontRightTop.y + isometricHeightLength;
    };

window.IsometricSpaceLeft = IsometricSpaceLeft;

//=========================::ISOMETRIC PLANE::============================

IsometricPlane.prototype.setStyles = function (fillColor, fillAlpha, lineColor, lineWeight, lineAlpha) {
        if (typeof fillAlpha === "undefined") { fillAlpha = 1; }
        if (typeof lineColor === "undefined") { lineColor = "#000000"; }
        if (typeof lineWeight === "undefined") { lineWeight = 1; }
        if (typeof lineAlpha === "undefined") { lineAlpha = 1; }
        this.fillColor = fillColor;
        this.fillAlpha = fillAlpha;
        this.lineColor = lineColor;
        this.lineWeight = lineWeight;
        this.lineAlpha = lineAlpha;
    };

IsometricPlane.renderPoint = new Geom.Point();//only used inside render(), optimization rather than creating a local variable everytime

IsometricPlane.prototype.render = function () {
        this.prepareRender();

this.context.beginPath();
        for(var i=0;i<4;i++){
            this.space.project(this.points[i], IsometricPlane.renderPoint);
            //console.log("\tIsometricPlane.renderPoint : " + IsometricPlane.renderPoint);
            if(i==0){
                this.context.moveTo(IsometricPlane.renderPoint.x, IsometricPlane.renderPoint.y);
            }else{
                this.context.lineTo(IsometricPlane.renderPoint.x, IsometricPlane.renderPoint.y);
            }
        }
        this.context.closePath();
        this.context.fill();
        this.context.stroke();
    };

IsometricPlane.prototype.prepareRender = function () {
        if(this.fillAlpha > 0) {
            this.context.fillStyle = this.fillColor;
        }
        if(this.lineAlpha > 0) {
            this.context.strokeStyle = this.lineColor;
            this.context.lineWidth = this.lineWeight;
        }
    };

window.IsometricPlane = IsometricPlane;

//=========================::ISOMETRIC SQUARE::============================

var IsometricSquare = function(context, space, x, y, z, width, height, depth){
        this.context = context;
        this.space = space;
        this.x = x;
        this.y = y;
        this.z = z;
        this.width = width;
        this.height = height;
        this.depth = depth;
        this.planeLeft = new IsometricPlane(context, space);
        this.planeRight = new IsometricPlane(context, space);
        this.planeTop = new IsometricPlane(context, space);
        this.updatePlanes();
    };

IsometricSquare.prototype.updatePlanes = function(){
        this.planeLeft.pointA.updateValues(this.x, this.y, this.z);
        this.planeLeft.pointB.updateValues(this.x+this.width, this.y, this.z);
        this.planeLeft.pointC.updateValues(this.x+this.width, this.y+this.height, this.z);
        this.planeLeft.pointD.updateValues(this.x, this.y+this.height, this.z);

this.planeRight.pointA.updateValues(this.x+this.width, this.y, this.z);
        this.planeRight.pointB.updateValues(this.x+this.width, this.y, this.z+this.depth);
        this.planeRight.pointC.updateValues(this.x+this.width, this.y+this.height, this.z+this.depth);
        this.planeRight.pointD.updateValues(this.x+this.width, this.y+this.height, this.z);

this.planeTop.pointA.updateValues(this.x, this.y+this.height, this.z);
        this.planeTop.pointB.updateValues(this.x, this.y+this.height, this.z+this.depth);
        this.planeTop.pointC.updateValues(this.x+this.width, this.y+this.height, this.z+this.depth);
        this.planeTop.pointD.updateValues(this.x+this.width, this.y+this.height, this.z);

}

IsometricSquare.prototype.setLeftPlaneStyle = function (fillColor, fillAlpha, lineColor, lineWeight, lineAlpha) {
        this.planeLeft.setStyles(fillColor, fillAlpha, lineColor, lineWeight, lineAlpha);
    };
    IsometricSquare.prototype.setRightPlaneStyle = function (fillColor, fillAlpha, lineColor, lineWeight, lineAlpha) {
        this.planeRight.setStyles(fillColor, fillAlpha, lineColor, lineWeight, lineAlpha);
    };
    IsometricSquare.prototype.setTopPlaneStyle = function (fillColor, fillAlpha, lineColor, lineWeight, lineAlpha) {
        this.planeTop.setStyles(fillColor, fillAlpha, lineColor, lineWeight, lineAlpha);
    };

IsometricSquare.prototype.setHeight = function(value){
        this.height = value;
        this.updatePlanes();
    }

IsometricSquare.prototype.render = function(){
        this.planeLeft.render();
        this.planeRight.render();
        this.planeTop.render();
    };

window.IsometricSquare = IsometricSquare;

}(window));

var readyStateCheckInterval = setInterval( function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        init();
    }
}, 10);

//========================
//general properties for demo set up
//========================

var canvas;
var context;
var canvasContainer;
var htmlBounds;
var bounds;
var minimumStageWidth = 250;
var minimumStageHeight = 250;
var maxStageWidth = 310;
var maxStageHeight = 310;
var resizeTimeoutId = -1;

function init(){
    canvasContainer = document.getElementById("canvasContainer");
    window.onresize = resizeHandler;
    commitResize();
}

function getWidth( element ){return Math.max(element.scrollWidth,element.offsetWidth,element.clientWidth );}
function getHeight( element ){return Math.max(element.scrollHeight,element.offsetHeight,element.clientHeight );}

//avoid running resize scripts repeatedly if a browser window is being resized by dragging
function resizeHandler(){
    context.clearRect(0,0,canvas.width, canvas.height);
    clearTimeout(resizeTimeoutId);
    clearTimeoutsAndIntervals();
    resizeTimeoutId = setTimeout(commitResize, 300 );
}

function commitResize(){
    if(canvas){
        canvasContainer.removeChild(canvas);
    }
    canvas = document.createElement('canvas');
    canvas.style.position = "absolute";
    context = canvas.getContext("2d");
    canvasContainer.appendChild(canvas);

htmlBounds = new Geom.Rectangle(0,0, getWidth(canvasContainer) , getHeight(canvasContainer));
    if(htmlBounds.width >= maxStageWidth){
        canvas.width = maxStageWidth;
        canvas.style.left = htmlBounds.getCenterX() - (maxStageWidth/2)+"px";
    }else{
        canvas.width = htmlBounds.width;
        canvas.style.left ="0px";
    }
    if(htmlBounds.height > maxStageHeight){
        canvas.height = maxStageHeight;
        canvas.style.top = htmlBounds.getCenterY() - (maxStageHeight/2)+"px";
    }else{
        canvas.height = htmlBounds.height;
        canvas.style.top ="0px";
    }
    bounds = new Geom.Rectangle(0,0, canvas.width, canvas.height);
    context.clearRect(0,0,canvas.width, canvas.height);

if(bounds.width<minimumStageWidth || bounds.height<minimumStageHeight){
        stageTooSmallHandler();
        return;
    }

startDemo();
}

function stageTooSmallHandler(){
    var warning = "Sorry, bigger screen required :(";
    context.font = "bold normal 24px sans-serif";
    context.fillText(warning, bounds.getCenterX() - context.measureText(warning).width/2, bounds.getCenterY()-12);
}

//========================
//Demo specific properties
//========================

var logoPixels = [  1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                    1, 0, 0, 0, 0, 0, 0, 0, 1, 1,
                    1, 0, 1, 1, 1, 1, 1, 0, 1, 1,
                    1, 1, 0, 0, 0, 0, 0, 1, 1, 1,
                    1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                    1, 1, 1, 0, 0, 1, 1, 0, 1, 1,
                    1, 1, 0, 1, 1, 0, 1, 1, 0, 1,
                    1, 1, 0, 1, 1, 0, 1, 1, 0, 1,
                    1, 1, 1, 0, 1, 1, 0, 0, 1, 1,
                    1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var green = "#157b0f";
var lightGreen = "#77fd6f";
var orange = "#ff342e";
var squares, space, animator, radian;

var animating = false;

function clearTimeoutsAndIntervals(){
    animator.pause();
}

function startDemo(){

space = new IsometricSpaceLeft(canvas.width, canvas.height, 200, 140, 200);

squares = [];
    var square, n, i, j;

for(i=0;i<10;i++){
        for(j=0;j<10;j++){
            square = new IsometricSquare(context, space, i *.1, 0, .9 - j *.1, .1, Math.random(), .1);
            n = (i * 4) * 10 + j * 4;
            square.setLeftPlaneStyle(green, 1, undefined, 1, 1);
            square.setRightPlaneStyle(green, 1, undefined, 1, 1);
            square.setTopPlaneStyle(logoPixels[i*10+j] ? lightGreen : orange, 1, undefined, 1, 1);
            squares.push(square);
        }
    }

animator = new UnitAnimator();
    radian = 0;
    reStartWave();
}

function reStartWave(){
      animator.pause();
    animator.reset(1000+Math.random()*1000, canvas, animationUpdate, reStartWave);
    animator.start();
}

CSS

HTML

Recommendation

Join Effecthub.com