EffectHub.com: your best source for gaming

Recommendation

More Effects...

$(function() {
	var canvas = $('#canvas')[0];
	canvas.width = $(window).width();
	canvas.height = $(window).height();
	var ctx = canvas.getContext('2d');

// resize
	$(window).on('resize', function() {
		canvas.width = $(window).width();
		canvas.height = $(window).height();
		ctx.fillStyle = '#000003';
		ctx.fillRect(0, 0, canvas.width, canvas.height);
		center = { x: canvas.width / 2, y: canvas.height / 2 };
	});

// init
	ctx.fillStyle = '#000003';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	// objects
	var listFire = [];
	var listFirework = [];
	var listText = [];
	var listSpecial = [];
	var listSpark = [];
	var lights = [];
	var fireNumber = 10;
	var center = { x: canvas.width / 2, y: canvas.height / 2 };
	var range = 100;
	var fired = 0;
	var onHold = 0;
	var supprise = false;
	var textIndex = 0;
	var actions = [makeDoubleFullCircleFirework, makePlanetCircleFirework, makeFullCircleFirework, makeDoubleCircleFirework, makeHeartFirework, makeCircleFirework, makeRandomFirework];
	for (var i = 0; i < fireNumber; i++) {
		var fire = {
			x: Math.random() * range / 2 - range / 4 + center.x,
			y: Math.random() * range * 2.5 + canvas.height,
			size: Math.random() + 0.5,
			fill: '#ff3',
			vx: Math.random() - 0.5,
			vy: -(Math.random() + 4),
			ax: Math.random() * 0.06 - 0.03,
			delay: Math.round(Math.random() * range) + range * 4,
			hold: false,
			alpha: 1,
			far: Math.random() * range + (center.y - range)
		};
		fire.base = {
			x: fire.x,
			y: fire.y,
			vx: fire.vx,
			vy: fire.vy
		};
		//
		listFire.push(fire);
		// play sound
		playLaunchSound();
	}
	// define array of sound
	var listExpSound = $('audio.exp');
	var listLaunchSound = $('audio.launch');

// define array position of text
	var textString = 'happylunarnewyear2017';
	var textMatrix = [
		4.5, 0, 5.5, 0, 6.5, 0, 7.5, 0, 8.5, 0,
		0, 1, 1, 1, 2, 1, 3, 1, 4, 1, 6, 1, 7, 1, 8, 1, 10, 1, 11, 1, 12, 1, 13, 1,
		5, 2, 6, 2, 7, 2, 8, 2
	]
	var chars = {
		h: [
			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
			1, 3, 2, 3, 3, 3, 4, 3,
			5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
		],
		a: [
			2, 0, 2, 1, 2, 2, 1, 2, 1, 3, 1, 4, 1, 5, 0, 5, 0, 6, 0, 7, 2, 5,
			3, 0, 3, 1, 3, 2, 4, 2, 4, 3, 4, 4, 4, 1, 5, 5, 5, 6, 5, 7, 3, 5
		],
		p: [
			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
			1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4
		],
		y: [
			0, 0, 0, 1, 1, 1, 1, 2, 1, 3, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7,
			3, 2, 3, 3, 4, 1, 4, 2, 5, 0, 5, 1
		],
		l: [
			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
			1, 7, 2, 7, 3, 7, 4, 7, 5, 7
		],
		u: [
			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
			1, 7, 2, 7, 3, 7, 4, 7,
			5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
		],
		n: [
			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
			1, 1, 1, 2, 2, 2, 2, 3, 2, 4, 3, 4, 3, 5, 4, 5, 4, 6,
			5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
		],
		e: [
			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
			1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
			1, 3, 2, 3, 3, 3, 4, 3,
			1, 7, 2, 7, 3, 7, 4, 7, 5, 7
		],
		w: [
			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 1, 6,
			2, 1, 2, 2, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7, 3, 7,
			5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 4, 5, 4, 6
		],
		r: [
			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
			1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4,
			1, 5, 2, 5, 3, 6, 4, 6, 5, 7
		],
		2: [
			0, 1, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 5, 1, 5, 2, 5, 3,
			4, 3, 3, 3, 2, 3, 2, 4, 1, 4, 1, 5,
			0, 5, 0, 6, 0, 7, 1, 7, 2, 7, 3, 7, 4, 7, 5, 7, 5, 6
		],
		0: [
			0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
			1, 0, 2, 0, 3, 0, 4, 0,
			1, 7, 2, 7, 3, 7, 4, 7,
			5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
		],
		1: [
			1, 2, 2, 2, 2, 1, 3, 1, 3, 0,
			4, 0, 4, 1, 4, 2, 4, 3, 4, 4, 4, 5, 4, 6, 4, 7,
			1, 7, 2, 7, 3, 7, 5, 7
		],
		7: [
			0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
			5, 1, 5, 2, 5, 3, 4, 3, 4, 4,
			3, 4, 3, 5, 3, 6, 3, 7
		]
	}

function randColor() {
		var r = Math.floor(Math.random() * 256);
		var g = Math.floor(Math.random() * 256);
		var b = Math.floor(Math.random() * 256);
		var color = 'rgb($r, $g, $b)';
		color = color.replace('$r', r);
		color = color.replace('$g', g);
		color = color.replace('$b', b);
		return color;
	}

function playExpSound() {
		var sound = listExpSound[Math.floor(Math.random() * listExpSound.length)];
		sound.volume = Math.random() * 0.4 + 0.1;
		sound.play();
	}

function playLaunchSound() {
		setTimeout(function() {
			var sound = listLaunchSound[Math.floor(Math.random() * listLaunchSound.length)];
			sound.volume = 0.05;
			sound.play();
		}, 200);
	}

if (Math.random() > 0.9 && parentSpark.chain > 1) {
				// play sound
				playExpSound();
			}
		}
		return color;
	}

(function loop() {
		requestAnimationFrame(loop);
		update();
		draw();
	})();

// update firework logic
		for (var i = listFirework.length - 1; i >= 0; i--) {
			var firework = listFirework[i];
			if (firework) {
				firework.vx *= 0.9;
				firework.vy *= 0.9;
				firework.x += firework.vx;
				firework.y += firework.vy;
				firework.vy += firework.ay;
				firework.alpha = firework.life / firework.base.life;
				firework.size = firework.alpha * firework.base.size;
				firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
				//
				firework.life--;
				if (firework.life <= 0) {
					listFirework.splice(i, 1);
				}
			}
		}

// supprise happy new year!
		if (supprise && onHold == 10) {
			supprise = false;
			setTimeout(initText, 3000);
		}

// update text logic
		for (var i = listText.length - 1; i >= 0; i--) {
			var text = listText[i];
			text.vx *= 0.9;
			text.vy *= 0.9;
			text.direct *= 0.9;
			text.x += text.vx + text.direct;
			text.y += text.vy;
			text.vy += text.ay;
			text.alpha = text.life / text.base.life;
			text.size = text.alpha * text.base.size;
			text.alpha = text.alpha > 0.6 ? 1 : text.alpha;
			//
			text.life--;
			if (text.life <= 0) {
				listText.splice(i, 1);
			}
		}

// update special logic
		for (var i = listSpecial.length - 1; i >= 0; i--) {
			var special = listSpecial[i];
			if (special.y <= special.far) {
				// play sound
				playExpSound();
				// light
				lights.push({ x: special.x, y: special.y, color: special.fill, alpha: 0.02, radius: range * 2 });
				//
				makeSpark(special);
				// remove from list
				listSpecial.splice(i, 1);
			}
			else {
				special.x += special.vx;
				special.y += special.vy;
				special.vx += special.ax;
				special.alpha = (special.y - special.far) / special.far;
			}
		}

// update spark logic
		for (var i = listSpark.length - 1; i >= 0; i--) {
			var spark = listSpark[i];
			if (spark) {
				spark.vx *= 0.9;
				spark.vy *= 0.9;
				spark.x += spark.vx;
				spark.y += spark.vy;
				spark.vy += spark.ay;
				spark.alpha = spark.life / spark.base.life + 0.2;
				//
				spark.life--;
				if (spark.life < spark.base.life * 0.8 && spark.life > 0) {
					//
					spark.chain--;
					chainSpark(spark);
				}
				if (spark.life <= 0) {
					listSpark.splice(i, 1);
				}
			}
		}
	}

function draw() {
		// clear
		ctx.globalCompositeOperation = 'source-over';
		ctx.globalAlpha = 0.2;
		ctx.fillStyle = '#000003';
		ctx.fillRect(0, 0, canvas.width, canvas.height);

// re-draw
		ctx.globalCompositeOperation = 'screen';
		for (var i = 0; i < listFire.length; i++) {
			var fire = listFire[i];
			ctx.globalAlpha = fire.alpha;
			ctx.beginPath();
			ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
			ctx.closePath();
			ctx.fillStyle = fire.fill;
			ctx.fill();
		}

for (var i = 0; i < listFirework.length; i++) {
			var firework = listFirework[i];
			ctx.globalAlpha = firework.alpha;
			ctx.beginPath();
			ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
			ctx.closePath();
			ctx.fillStyle = firework.fill;
			ctx.fill();
		}

for (var i = 0; i < listSpecial.length; i++) {
			var special = listSpecial[i];
			ctx.globalAlpha = special.alpha;
			// ctx.beginPath();
			// ctx.arc(special.x, special.y, special.size, 0, Math.PI * 2);
			// ctx.closePath();
			// ctx.fill();
			ctx.fillStyle = special.fill;
			ctx.fillRect(special.x - special.size, special.y - special.size, special.size * 2, special.size *2);
		}

for (var i = 0; i < listSpark.length; i++) {
			var spark = listSpark[i];
			ctx.globalAlpha = spark.alpha;
			// ctx.beginPath();
			// ctx.arc(spark.x, spark.y, spark.size, 0, Math.PI * 2);
			// ctx.closePath();
			// ctx.fill();
			ctx.fillStyle = spark.fill;
			ctx.fillRect(spark.x - spark.size, spark.y - spark.size, spark.size * 2, spark.size *2);
		}

// light effect
		while (lights.length) {
			var light = lights.pop();
			var gradient = ctx.createRadialGradient(light.x, light.y, 0, light.x, light.y, light.radius);
			gradient.addColorStop(0, '#fff');
			gradient.addColorStop(0.2, light.color);
			gradient.addColorStop(0.8, 'rgba(0, 0, 0, 0)');
			gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
			ctx.globalAlpha = light.alpha ? light.alpha : 0.25;
			ctx.fillStyle = gradient;
			ctx.fillRect(light.x - light.radius, light.y - light.radius, light.radius * 2, light.radius * 2);
		}

// supprise: HAPPY LUNAR NEW YEAR 2017!
		for (var i = 0; i < listText.length; i++) {
			var text = listText[i];
			ctx.globalAlpha = text.alpha;
			ctx.fillStyle = text.fill;
			ctx.fillRect(text.x - text.size, text.y - text.size, text.size * 2, text.size * 2);
		}
	}
})

$(function() {
    var canvas = $('#canvas')[0];
    canvas.width = $(window).width();
    canvas.height = $(window).height();
    var ctx = canvas.getContext('2d');
 
    // resize
    $(window).on('resize', function() {
        canvas.width = $(window).width();
        canvas.height = $(window).height();
        ctx.fillStyle = '#000003';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        center = { x: canvas.width / 2, y: canvas.height / 2 };
    });
 
    // init
    ctx.fillStyle = '#000003';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // objects
    var listFire = [];
    var listFirework = [];
    var listText = [];
    var listSpecial = [];
    var listSpark = [];
    var lights = [];
    var fireNumber = 10;
    var center = { x: canvas.width / 2, y: canvas.height / 2 };
    var range = 100;
    var fired = 0;
    var onHold = 0;
    var supprise = false;
    var textIndex = 0;
    var actions = [makeDoubleFullCircleFirework, makePlanetCircleFirework, makeFullCircleFirework, makeDoubleCircleFirework, makeHeartFirework, makeCircleFirework, makeRandomFirework];
    for (var i = 0; i < fireNumber; i++) {
        var fire = {
            x: Math.random() * range / 2 - range / 4 + center.x,
            y: Math.random() * range * 2.5 + canvas.height,
            size: Math.random() + 0.5,
            fill: '#ff3',
            vx: Math.random() - 0.5,
            vy: -(Math.random() + 4),
            ax: Math.random() * 0.06 - 0.03,
            delay: Math.round(Math.random() * range) + range * 4,
            hold: false,
            alpha: 1,
 
 

CSS

canvas {
  display: block;
}
 
.block-audio {
  display: none;
}
 
 
 

HTML

<canvas id="canvas"></canvas>
<div class="block-audio">
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp1.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp1.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp1.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp2.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp2.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp2.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp3.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp3.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp3.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp4.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp4.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp4.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp5.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp5.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp5.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp6.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp6.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp6.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp7.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp7.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp7.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp8.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp8.mp3" controls="controls"></audio>
  <audio class="exp" src="http://static.dar-studio.com/codepen/audio/firework/exp8.mp3" controls="controls"></audio>
  <audio class="launch" src="http://static.dar-studio.com/codepen/audio/firework/launch1.mp3" controls="controls"></audio>
  <audio class="launch" src="http://static.dar-studio.com/codepen/audio/firework/launch1.mp3" controls="controls"></audio>
  <audio class="launch" src="http://static.dar-studio.com/codepen/audio/firework/launch2.mp3" controls="controls"></audio>
  <audio class="launch" src="http://static.dar-studio.com/codepen/audio/firework/launch2.mp3" controls="controls"></audio>
  <audio class="launch" src="http://static.dar-studio.com/codepen/audio/firework/launch3.mp3" controls="controls"></audio>
  <audio class="launch" src="http://static.dar-studio.com/codepen/audio/firework/launch3.mp3" controls="controls"></audio>
  <audio class="launch" src="http://static.dar-studio.com/codepen/audio/firework/launch4.mp3" controls="controls"></audio>
  <audio class="launch" src="http://static.dar-studio.com/codepen/audio/firework/launch4.mp3" controls="controls"></audio>
  <audio class="launch" src="http://static.dar-studio.com/codepen/audio/firework/launch5.mp3" controls="controls"></audio>
  <audio class="launch" src="http://static.dar-studio.com/codepen/audio/firework/launch5.mp3" controls="controls"></audio>
</div>
 
 

A PHP Error was encountered

A PHP Error was encountered

Recommendation

A PHP Error was encountered

A PHP Error was encountered

Recommendation

Join Effecthub.com