//==============::MathUtil::=================
(function (){
window.MathUtil = {};
MathUtil.PI2 = Math.PI * 2;
//return number between 1 and 0
MathUtil.normalize = function(value, min, max){
return (value - min) / (max - min);
};
//map normalized number to values
MathUtil.interpolate = function(normal, min, max){
return min + (max - min) * normal;
};
//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);
};
//https://github.com/gre/smoothstep/blob/master/index.js
MathUtil.smoothstep = function(value, min, max) {
var x = Math.max(0, Math.min(1, (value - min) / (max - min)));
return x * x * (3 - 2 * x);
};
MathUtil.clamp = function(value, min, max){
return Math.max(min, Math.min(value, max));
};
MathUtil.getRandomNumberInRange = function(min, max){
return min + Math.random() * (max - min);
};
}());
//==============::Rectangle::===============
(function (){
window.Rectangle = function(x, y, width, height) {
this.update = function(x, y, width, height){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
};
this.inflate = function(value){
this.update(this.x - value, this.y - value, this.width + value * 2, this.height + value * 2);
};
this.updateToRect = function(rect){
this.update(rect.x, rect.y, rect.width, rect.height);
};
this.right = function(){
return this.x + this.width;
};
this.bottom = function(){
return this.y + this.height;
};
this.centerX = function(){
return this.x + this.width / 2;
};
this.centerY = function(){
return this.y + this.height / 2;
};
this.containsPoint = function(x, y){
return x >= this.x && y >= this.y && x <= this.right() && y <= this.bottom();
};
this.isLandscape = function(){
return this.width > this.height;
};
this.isPortrait = function(){
return !this.isLandscape();
};
this.smallerSide = function(){
return Math.min(this.width, this.height);
};
this.biggerSide = function(){
return Math.max(this.width, this.height);
};
this.toString = function(){
return "Rectangle{x:"+this.x+" , y:"+this.y+" , width:"+this.width+" , height:"+this.height+"}";
};
this.update(isNaN(x) ? 0 : x, isNaN(y) ? 0 : y, isNaN(width) ? 0 : width, isNaN(height) ? 0 : height);
};
}());
//==============::UNIT EASING::===============
(function (){
var halfPi = Math.PI/2;
/*
* From : https://gist.github.com/gre/1650294
* only considering the t value for the range [0, 1] => [0, 1]
*/
window.UnitEasing = {
easeInSine: function (t) { return 1 + Math.sin(halfPi * t - halfPi) },
easeOutSine : function (t) { return Math.sin(halfPi * t) },
easeInOutSine: function (t) { return (1 + Math.sin(Math.PI * t - halfPi)) / 2;},
};
}());
//==============::UNIT ANIMATOR::===============
(function (){
window.UnitAnimator = function() {
//PRIVATE VARIABLES
var _duration,
_animating = true,
_animationStart,
_millisecondsAnimated,
_updateCallBack,
_completeCallBack,
_easingFunction;
//PUBPLIC API
this.start = function(durationMS, updateCallBack, completeCallBack, easingFunction){
_duration = durationMS;
_updateCallBack = updateCallBack;
_completeCallBack = completeCallBack;
_easingFunction = easingFunction || UnitEasing.easeLinear;//optional, sets default
_animating = true;
_animationStart = Date.now();
_millisecondsAnimated = 0;//keeps track of how long the animation has been running
loop();
};
this.stop = function(){
_animating = false;
};
this.isAnimating = function(){
return _animating === true;
};
//PRIVATE METHODS
var dispatchUpdate = function(){
_updateCallBack( _easingFunction(MathUtil.normalize(_millisecondsAnimated, 0, _duration)) );
};
var dispatchComplete = function(){
dispatchUpdate();
if(_completeCallBack){
_completeCallBack();
}
};
var loop = function(){
if(!_animating){
return;
}
_millisecondsAnimated = Date.now() - _animationStart;
if(_millisecondsAnimated >= _duration){
_animating = false;
_millisecondsAnimated = _duration;
dispatchComplete();
return;
}
dispatchUpdate();
requestAnimationFrame(loop);
};
};
}());
(function() {
window.GridArray = function(){
//private properties
var _rows = 0, _cols = 0;
//public properties
this.array = [];
//public API
this.init = function(rows, cols){
this.array.length = 0;
_rows = rows || 10;
_cols = cols || 10;
};
this.getRows = function(){
return _rows;
};
this.getCols = function(){
return _cols;
};
this.getSize = function(){
return _rows * _cols;
};
this.getGridIndex = function(row, col){
return row * _cols + col;
};
this.getRowForIndex = function(index){
return Math.floor(index / _cols);
};
this.getColForIndex = function(index){
return index % _cols;
};
this.isValidCol = function(col){
return col > -1 && col < _cols;
};
this.isValidRow = function(row){
return row > -1 && row < _rows;
};
this.isValidRowCol = function(row, col){
return this.isValidRow(row) && this.isValidCol(col);
};
this.isValidIndex = function(index){
return index > -1 && index < this.getSize();
};
};
}());
(function() {
window.GridArrayScanner = {};
//private variables
var _scanRow = 0,
_scanCol = 0,
_scanRules,
_scanRulesCW = [{x:0, y:1}, {x:-1, y:0},{x:0, y:-1},{x:1, y:0}],
_scanRulesCC = [{x:0, y:-1}, {x:-1, y:0},{x:0, y:1},{x:1, y:0}],
_maxScanOffset = 0;
//public API
GridArrayScanner.searchSurroundingCells = function(gridArray, index, compareFunction, counterClockwise){
_scanRules = counterClockwise ? _scanRulesCC : _scanRulesCW;
_scanRow = gridArray.getRowForIndex(index);
_scanCol = gridArray.getColForIndex(index);
_maxScanOffset = Math.max(
_scanRow,
_scanCol,
gridArray.getRows() - _scanRow,
gridArray.getCols() - _scanCol
);
return surroundSearch(gridArray, index, 2, compareFunction);
};
var surroundSearch = function(grid, index, offset, compareFunction){
if(offset > _maxScanOffset){
console.log("---> boo hoo, didn't find it?", offset);
return -1;
}
_scanRow = grid.getRowForIndex(index);
_scanCol = grid.getColForIndex(index);
var startOffset = Math.floor(offset * .5);
_scanRow -= startOffset * _scanRules[0].y;
_scanCol += startOffset;
var total = offset * 4, scan, i, found;
for(i=0; i < total; i++){
scan = _scanRules[Math.floor(i / offset)];
_scanRow += scan.y;
_scanCol += scan.x;
if(grid.isValidRowCol(_scanRow, _scanCol)){
found = grid.getGridIndex(_scanRow, _scanCol);
if(compareFunction(grid.array[found])){
return grid.array[found];
}
}
}
return surroundSearch(grid, index, offset + 2, compareFunction);
};
}());
(function() {
window.EggFactory = {};
EggFactory.getRandomRadiusEggPoints = function(bounds, numPoints, minRadiusNormal){
minRadiusNormal = minRadiusNormal || .1;
minRadiusNormal = MathUtil.clamp(minRadiusNormal, .1, .99);
var i, topHeight = Math.floor(bounds.height * .666),
bottomHeight = Math.floor(bounds.height - topHeight),
points = [], radian,
increment = MathUtil.PI2 / numPoints,
halfWidth = Math.floor(bounds.width * .5),
center = {x : Math.floor(bounds.centerX()), y: Math.floor(bounds.y + topHeight)},
minXRadius = Math.floor(halfWidth * minRadiusNormal),
maxXRadius = halfWidth - minXRadius,
minYRadius, maxYRadius, radiusNormal;
for(i=0; i < numPoints; i++){
radian = i * increment;
radiusNormal = Math.random();
if(radian < Math.PI) {
minYRadius = bottomHeight * minRadiusNormal;
maxYRadius = bottomHeight;
}else{
minYRadius = topHeight * minRadiusNormal;
maxYRadius = topHeight;
}
points.push(
center.x + Math.cos(radian) * MathUtil.interpolate(radiusNormal, minXRadius, halfWidth),
center.y + Math.sin(radian) * MathUtil.interpolate(radiusNormal, minYRadius, maxYRadius)
);
}
return points;
};
}());
(function() {
window.FluffyCloud = function(){
//private properties
var _canvas,
_context,
_fluff,
_fluffGrid = new GridArray();
//public API
this.init = function(canvas, bounds, rows, cols){
_canvas = canvas;
_context = canvas.getContext("2d");
_fluffGrid.init(rows, cols);
createFluffs(bounds);
}
this.render = function(debug, color){
renderFluff(color);
};
this.getFluff = function(){
return _fluff;
};
this.getFluffGrid = function(){
return _fluffGrid;
};
//private methods
var renderEggPath = function(points, fillColor){
_context.beginPath();
_context.moveTo(points[0], points[1])
for(var i=2; i<points.length; i+=2){
_context.lineTo(points[i], points[i+1]);
}
_context.closePath();
if(fillColor){
_context.fillStyle = fillColor;//"#FFFFFF";//MathUtil.getRandomHexColorString();// ;
_context.fill();
}
};
var createFluffs = function(bounds, rows, cols){
var pointsAlongEgg = Math.round(MathUtil.getRandomNumberInRange(6, 20));
var eggPoints = EggFactory.getRandomRadiusEggPoints(bounds, pointsAlongEgg, .3);
renderEggPath(eggPoints);
_fluff = [];
var x, y,
cellWidth = Math.floor(bounds.width / _fluffGrid.getCols()),
cellHeight = Math.floor(bounds.height / _fluffGrid.getRows()),
halfCellWidth = Math.floor(cellWidth * .5),
halfCellHeight = Math.floor(cellHeight * .5),
radius;
for(var i=0; i<_fluffGrid.getSize(); i++){
x = bounds.x + _fluffGrid.getColForIndex(i) * cellWidth + halfCellWidth;
y = bounds.y + _fluffGrid.getRowForIndex(i) * cellHeight + halfCellHeight;
if(_context.isPointInPath(x, y)){
radius = Math.round(Math.max(halfCellWidth, halfCellHeight) * MathUtil.getRandomNumberInRange(1.6, 2));
_fluffGrid.array[i] = _fluff.length;
_fluff.push(x, y, radius);
}else{
_fluffGrid.array[i] = -1;
}
}
};
var renderFluff = function(color){
_context.beginPath();
_context.fillStyle = color || "#FFFFFF";
for(var i=0; i<_fluff.length; i+=3){
_context.moveTo(_fluff[i], _fluff[i+1]);
_context.arc(_fluff[i], _fluff[i+1], _fluff[i+2], 0, MathUtil.PI2);
}
_context.fill();
};
};
}());
(function() {
window.MorphingFluffyCloud = function(){
//private properties
var _canvas, _context,
_morphData = [],
_morphGrid = new GridArray(),
_fromCloud = new FluffyCloud(),
_toCloud = new FluffyCloud(),
_animator = new UnitAnimator();
//public API
this.init = function(canvas, rows, cols){
_morphGrid.init(rows, cols);
_canvas = canvas;
_context = canvas.getContext("2d");
initCloud(_toCloud);
nextMorph();
};
this.stop = function(){
_animator.stop();
};
//private methods
var getRandomCanvasRect = function(minWidth, maxWidth, minHeight, maxHeight){
var bounds = new Rectangle(
0,0,
MathUtil.getRandomNumberInRange(_canvas.width * (minWidth || .4), _canvas.width * (maxWidth || .9)),
MathUtil.getRandomNumberInRange(_canvas.height * (minHeight || .4), _canvas.height * (maxHeight || .9))
);
bounds.x = _canvas.width * .5 - bounds.width * .5;
bounds.y = _canvas.height * .5 - bounds.height * .5;
return bounds;
};
var initCloud = function(cloud){
cloud.init(_canvas, getRandomCanvasRect(.5, .9, .5, .9), _morphGrid.getRows(), _morphGrid.getCols());
};
var nextMorph = function(){
//swap from and to clouds
var temp = _fromCloud;
_fromCloud = _toCloud;
_toCloud = temp;
initCloud(_toCloud);
_morphData.length = 0;//clear particle system
var i, fromFluff = _fromCloud.getFluff(),
fromFluffGrid = _fromCloud.getFluffGrid(),
toFluff = _toCloud.getFluff(),
toFluffGrid = _toCloud.getFluffGrid(),
fromIndex, toIndex,
fluff = fromFluffGrid.getSize();
//console.log("fromFluff : ", fromFluff.length/3);
//console.log("toFluff : ", toFluff.length/3);
//populate with "fluffs on same grid index" from grids
for(i=0; i < fluff; i++){
_morphGrid.array[i] = -1;
if(fromFluffGrid.array[i] > -1 && toFluffGrid.array[i] > -1){
fromIndex = fromFluffGrid.array[i];
toIndex = toFluffGrid.array[i];
_morphGrid.array[i] = _morphData.length;
_morphData.push(
fromFluff[fromIndex], fromFluff[fromIndex + 1], fromFluff[fromIndex + 2],
toFluff[toIndex], toFluff[toIndex + 1], toFluff[toIndex + 2]
);
}
}
//console.log("matches after merge : ", _morphData.length/6);
var morphIndex = -1;
for(i=0; i < fluff; i++){
if(_morphGrid.array[i] > -1){
continue;
}
//find closest fluff in morphGrid to merge to
fromIndex = fromFluffGrid.array[i];
if(fromIndex > -1){
morphIndex = GridArrayScanner.searchSurroundingCells(_morphGrid, i, gridScanCompare);//, Math.random() > .5);
if(morphIndex > -1 ){
_morphData.push(
fromFluff[fromIndex], fromFluff[fromIndex + 1], fromFluff[fromIndex + 2],
_morphData[morphIndex + 3], _morphData[morphIndex + 4], _morphData[morphIndex + 5]
);
}else{
console.log("WTF WTF WTF : red ", i);
}
}
//find closest fluff in morphGrid to emerge from
toIndex = toFluffGrid.array[i];
if(toIndex > -1){
morphIndex = GridArrayScanner.searchSurroundingCells(_morphGrid, i, gridScanCompare);//, Math.random() > .5);
if(morphIndex > -1 ){
_morphData.push(
_morphData[morphIndex], _morphData[morphIndex + 1], _morphData[morphIndex + 2],
toFluff[toIndex], toFluff[toIndex + 1], toFluff[toIndex + 2]
);
}else{
console.log("WTF WTF WTF : blue ", i);
}
}
}
_animator.start(Math.floor(MathUtil.getRandomNumberInRange(3000, 7000)), updateMorph, nextMorph, UnitEasing.easeInOutSine);
}
var gridScanCompare = function(value){
return value > -1;
};
var updateMorph = function(normal){
//background
_context.fillStyle = "#179ed7";
_context.fillRect(0, 0, _canvas.width, _canvas.height);
//sun
_context.fillStyle = "#ffde25";//ffc000
_context.beginPath();
_context.arc(_canvas.width * .75, _canvas.height * .35, Math.min(_canvas.width, _canvas.height) * .2, 0, MathUtil.PI2);
_context.fill();
//cloud
_context.fillStyle = "#555555";
var fluff = _morphData.length, x, y, radius;
_context.beginPath();
for(var i=0; i<fluff; i+=6){
x = MathUtil.interpolate(normal, _morphData[i], _morphData[i + 3]);
y = MathUtil.interpolate(normal, _morphData[i + 1], _morphData[i + 4]);
radius = MathUtil.interpolate(normal, _morphData[i + 2], _morphData[i + 5]);
_context.moveTo(x, y);
_context.arc(x, y, radius, 0, MathUtil.PI2);
}
_context.fill();
_context.fillStyle = "#FFFFFF";
_context.beginPath();
for(var i=0; i<fluff; i+=6){
x = MathUtil.interpolate(normal, _morphData[i], _morphData[i + 3]);
y = MathUtil.interpolate(normal, _morphData[i + 1], _morphData[i + 4]);
radius = MathUtil.interpolate(normal, _morphData[i + 2], _morphData[i + 5]) * .8;
_context.moveTo(x, y);
_context.arc(x, y, radius, 0, MathUtil.PI2);
}
_context.fill();
};
};
}());
var canvas = document.getElementById("renderCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var cloud = new MorphingFluffyCloud();
cloud.init(canvas);
!
