EffectHub.com: your best source for gaming

Recommendation

More Effects...

// An experiment, lots of values altered explicitly for codepen.
// Needs more work as is quite slow on mobile devices but the theory is there.

// V1.2 - fix to clock, needed a quick math fix. now displays the right time
// Forked from http://codepen.io/superchief/pen/LAuGr
window.onload = function() {
  var canvas = document.getElementById("android");
	var ctx = canvas.getContext("2d");
	var globalTimer = 0; // rotation timer;
	var canvasState = "rendering";
	var rotation = 0.0;
	var doFader = true;

for (var i = 0; i < totalItemsHeight; i++) {
		if (i > 0)
		{
			itemArray.push(new Array());
		}
		for (var x = 0; x < totalItemColumns; x++) {
			itemArray[i].push(new Particle());
		}
	}
  
  function Render(displayModeType) {
		/// <summary>
		/// Main render method
		/// </summary>
		ctx.globalCompositeOperation = "source-over";
		ctx.fillStyle = "black";
		ctx.fillRect(0, 0, windowWidth, windowHeight);

var xPos = 0;
		var yPos = 0;

for (var i = 0; i < totalItemsHeight; i++) {
			for (var x = 0; x < totalItemColumns; x++) {
				ctx.beginPath();
				var dot = itemArray[i][x];
				if (dot.state == "finished")
				{
					dot.Finished();
				} else {
					// case statement here because there will be two modes
					switch (displayModeType) {
						case DisplayType.CIRCLE:
							ctx.arc((itemWidth * 2 * x) + itemWidth + pixelSpacing * 2,
								(itemWidth * 2 * i) + itemWidth + pixelSpacing * 2,
								dot.size,
								Math.PI * 2,
								false)
							break;
					}
					
					//ctx.arc(itemWidth + pixelSpacing, itemWidth + pixelSpacing, itemWidth, Math.PI * 2, false);

switch (dot.state) {
						case "off":
							dot.CalcAlpha();
							break;
						case "fadingIn":
							dot.FadingIn();
							break;
						case "on":
							dot.StayVisible();
							break;
						case "fadingOut":
							dot.FadeOut();
							break;
						default:
							break;
					}
					dot.timer++;
					var colourMod = 165;
					fader = CalcFaderValue(fader);
					fader2 = CalcFaderValue2(fader2);
					if (dot.randomColor) {
						colourMod = dot.colourModifier
					}
					ctx.fillStyle = "rgba(" + Math.floor(fader) + "," + colourMod + "," + Math.floor(fader2) + "," + dot.currentAlpha + ")";
					if (displayModeType == DisplayType.SQUARE) {
						dot.size = itemWidth;
						if (x == 0) {
							xPos = 0;
						} else {
							//xPos = (itemWidth * 2 * x) + itemWidth + pixelSpacing * 2;
							xPos = ((dot.size * 2) * x) + x;
						}
						if (i == 0) {
							yPos = 0;
						} else {
							//yPos = (itemWidth * 2 * i) + itemWidth + (pixelSpacing * 2);
							yPos = ((dot.size * 2) * i) + i;
						}
						ctx.fillRect(xPos,
							yPos,
							dot.size * 2, dot.size * 2);
					} else {
						ctx.fill();
					}				
				}
					
			}
		}
		//DisplayClockr(true);
	}
  
  function CalcFaderValue(initValue) {
		if (initValue <= 0.01) {
			faderDirection = 1;
		}
		if (initValue >= 255) {
			faderDirection = 0;
		}
		if (doFader) {
			return faderDirection == 0 ? initValue -= 0.0001 : initValue += 0.0001;
		} else {
			return initValue;
		}
	}
	function CalcFaderValue2(initValue) {
		if (initValue <= 0.01) {
			faderDirection2 = 1;
		}
		if (initValue >= 255) {
			faderDirection2 = 0;
		}
		if (doFader) {
			return faderDirection2 == 0 ? initValue -= 0.0001 : initValue += 0.0001;
		} else {
			return initValue;
		}
	}
  
  function DisplayClockr(background) {
		var currentTime = new Date();
		var smallDigits = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
		var teenDigits = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
		var largeDigits = ['twenty', 'thirty', 'fourty', 'fifty'];
		ctx.font = "30px Arial";
		
		// the next bit is bad parsing, should be done with regex but meh.

var hour = currentTime.getHours();
		var minutes = currentTime.getMinutes();

var hourString;
		var minuteString;
		//#region Display semi transparent rectangle
		if (background) {
			ctx.fillStyle = "rgba(0,0,0,0.8)";
			ctx.fillRect(0, (windowHeight / 2) - 45, windowWidth, 70);
		}
		if (hour.toString().length == 1) {
			hourString = smallDigits[hour];
		} else {
			if (hour < 20) {
				hourString = teenDigits[parseInt(hour.toString().substr(1, 1))];
			} else {
				hourString = largeDigits[parseInt(hour.toString().substr(0, 1)) - 2] + "" + smallDigits[parseInt(hour.toString().substr(1, 1))];
			}
		}
		//#endregion
		//#region Minute
		if (minutes.toString().length == 1) {
			minuteString = smallDigits[minutes].toUpperCase();
		} else {
			if (minutes < 20) {
				minuteString = teenDigits[parseInt(minutes.toString().substr(1, 1))].toUpperCase();
			} else {
				minuteString = largeDigits[parseInt(minutes.toString().substr(0,1)) - 2].toUpperCase() + "" + smallDigits[parseInt(minutes.toString().substr(1,1))];
			}
		}

ctx.fillStyle = "white";
		//ctx.fillText(hourString + minuteString, windowWidth / 2 - 110, windowHeight / 2);
    	ctx.fillText("EffectHub.com", windowWidth / 2 - 110, windowHeight / 2);
	}
  
  function Particle() {
		this.visibleTime = Math.floor(Math.random() * 600); // random number
		this.alpha = Math.random();
		this.colourModifier = Math.floor(Math.random() * 255);
		this.randomColor = false;
		this.state = "off";
		this.size = 6;
		this.timer = 0;
		this.currentAlpha = 0.00;
		this.CalcAlpha = function () {
			this.timer = 0;
			this.state = "fadingIn";
		}
		this.FadingIn = function () {
			if (this.currentAlpha >= this.alpha) {
				this.state = "on";
			} else {
				this.currentAlpha += 0.01;
			}
		}
		this.StayVisible = function () {
			if (this.timer >= this.visibleTime) {
				this.state = "fadingOut";
				this.timer = 0;
			}
		}
		this.FadeOut = function () {
			if (this.currentAlpha >= 0.01) {
				this.currentAlpha -= 0.01;
			} else {
				this.timer = 0;
				this.currentAlpha = 0;
				this.alpha = 0;
				this.state = "finished";
			}
		}
		this.Finished = function () {
			this.Randomise();
			this.state = "off";
		}
		this.Randomise = function () {
			this.visibleTime = Math.floor(Math.random() * 200); // random number between 1 and 10 seconds
			this.alpha = Math.random();
			/*if (this.alpha < 0.01) {
				this.alpha += 0.1;
			}*/
			this.size = 1 + Math.floor(Math.random() * 6);
			//#region new random mod colour ;)
			if (Math.floor(Math.random() * 10) % 2 == 0) {
				this.randomColor = false;
			} else {
				this.randomColor = false;
			}

//#endregion
		}
	}
  
  function PreRender() {
		var m_canvas = document.createElement('canvas');

}
  
  setInterval(function () { Render(DisplayType.SQUARE); }, 10);
}

CSS

HTML

Recommendation

Join Effecthub.com