JS1k: The JavaScript code golfing competition

b.bgColor&=function n(){h=a.height^=0;w=a.width;d=(Date.now()-t)/99;c.translate(w/2,h/2);c.scale(s=Math.min(w,h)/600,s);f=c.createRadialGradient(0,0,0,0,0,99);f.addColorStop(0,"#fff");f.addColorStop(.1,"hsla("+(d%360+80)+",50%,70%,.2)");f.addColorStop(1,"hsla("+(d%360+120)+",50%,50%,0)");c.fillStyle = f;for(i=121;--i;c.restore())z=i&1?90:60,c.save(),c.scale(s=1/(Math.cos(i)+2),s),c.translate(Math.cos((i/10+(i&1||3))*d/z)*500,Math.cos((i/10+2)*d/z)*500),c.fillRect(-99,-99,198,198);f=c.createRadialGradient(0,0,0,0,0,99);f.addColorStop(0,"hsla("+(d%360)+",50%,70%,1)");f.addColorStop(1,"hsla("+(d%360+60)+",50%,50%,0)");for(c.fillStyle=f;i<30;i++)c.fillRect(-99, -99, 198, 198),c.translate(Math.sin(i*i+d/4)*10,-30),c.scale(.9,.9),c.globalAlpha*=.8+Math.sin(d/10)*.1;requestAnimationFrame(n)}(t=Date.now())

Yi5iZ0NvbG9yJj1mdW5jdGlvbiBuKCl7aD1hLmhlaWdodF49MDt3PWEud2lkdGg7ZD0oRGF0ZS5ub3coKS10KS85OTtjLnRyYW5zbGF0ZSh3LzIsaC8yKTtjLnNjYWxlKHM9TWF0aC5taW4odyxoKS82MDAscyk7Zj1jLmNyZWF0ZVJhZGlhbEdyYWRpZW50KDAsMCwwLDAsMCw5OSk7Zi5hZGRDb2xvclN0b3AoMCwiI2ZmZiIpO2YuYWRkQ29sb3JTdG9wKC4xLCJoc2xhKCIrKGQlMzYwKzgwKSsiLDUwJSw3MCUsLjIpIik7Zi5hZGRDb2xvclN0b3AoMSwiaHNsYSgiKyhkJTM2MCsxMjApKyIsNTAlLDUwJSwwKSIpO2MuZmlsbFN0eWxlID0gZjtmb3IoaT0xMjE7LS1pO2MucmVzdG9yZSgpKXo9aSYxPzkwOjYwLGMuc2F2ZSgpLGMuc2NhbGUocz0xLyhNYXRoLmNvcyhpKSsyKSxzKSxjLnRyYW5zbGF0ZShNYXRoLmNvcygoaS8xMCsoaSYxfHwzKSkqZC96KSo1MDAsTWF0aC5jb3MoKGkvMTArMikqZC96KSo1MDApLGMuZmlsbFJlY3QoLTk5LC05OSwxOTgsMTk4KTtmPWMuY3JlYXRlUmFkaWFsR3JhZGllbnQoMCwwLDAsMCwwLDk5KTtmLmFkZENvbG9yU3RvcCgwLCJoc2xhKCIrKGQlMzYwKSsiLDUwJSw3MCUsMSkiKTtmLmFkZENvbG9yU3RvcCgxLCJoc2xhKCIrKGQlMzYwKzYwKSsiLDUwJSw1MCUsMCkiKTtmb3IoYy5maWxsU3R5bGU9ZjtpPDMwO2krKyljLmZpbGxSZWN0KC05OSwgLTk5LCAxOTgsIDE5OCksYy50cmFuc2xhdGUoTWF0aC5zaW4oaSppK2QvNCkqMTAsLTMwKSxjLnNjYWxlKC45LC45KSxjLmdsb2JhbEFscGhhKj0uOCtNYXRoLnNpbihkLzEwKSouMTtyZXF1ZXN0QW5pbWF0aW9uRnJhbWUobil9KHQ9RGF0ZS5ub3coKSk=

/**
 * Energy within
 * A JS1K'16 "eleMental" demo
 * @author subzey
 * @license WTFPL
 */

// Start time of the demo
var startDate = Date.now();
// Set bg color to black
b.bgColor=0;

(function frame(){
	// Re-set the canvas entirely by touching its width
	// The actual width is not changed, but the setter call is enough
	a.width ^= 0;

	// Calculate the current time delta value
	var delta = (Date.now() - startDate) / 99;
	
	// Scale & center
	c.translate(a.width / 2, a.height / 2);
	var scale = Math.min(a.width, a.height) / 600;
	c.scale(scale, scale);
	
	// Create the radial gradient for the flyng particles
	// Its color depends on the time delta
	var gradient = c.createRadialGradient(
		0, 0, // x/y
		0, // radius
		0, 0, // x/y
		99 // radius
	);

	// The very center glows white
	gradient.addColorStop(0,"#fff");
	// Inner part is slightly opaque
	gradient.addColorStop(0.1,"hsla(" + (delta % 360 + 80) + ", 50%, 70%, .2)");
	// Outer part is transaparent. The hue slightly differs so the gradient looks less dull
	gradient.addColorStop(1,"hsla(" + (delta % 360 + 120) + ",50%, 50%, 0)");

	// Set it
	c.fillStyle = gradient;

	// For each particle...
	for (var i=121; --i;) {
		// The coefficients differs for even and odd particles
		// Creating two visible streams
		var c1 = i & 1 || 3;
		var dc = i & 1 ? 90 : 60;
		
		// Save the canvas state (transformation matrix)
		c.save();

		// Calculate coordiantes.
		// Particles trajectories are Lissajous-like
		var x = Math.cos((i / 10 + c1) * delta / dc) * 500;
		var y = Math.cos((i / 10 + 2) * delta / dc) * 500;

		// Set the scale depending on index.
		// More or less pseudo-random
		var scale = 1 / (Math.cos(i) + 2);
		c.scale(scale, scale);

		// Now translate the canvas. Less scaled particles are translated less as well.
		c.translate(x, y);

		// Fill the rectangle with the gradient.
		c.fillRect(-99, -99, 198, 198);

		// Restore state
		c.restore();
	}


	// Now creating the gradient for flame. Same sizes
	var gradient = c.createRadialGradient(0,0,0,0,0,99);
	gradient.addColorStop(0,"hsla(" + (delta % 360) + ", 50%, 70%, 1)");
	// Again, the outer part hue is shifted
	gradient.addColorStop(1,"hsla(" + (delta % 360 + 60) + ", 50%, 50%, 0)");
 
	// and set it.
	c.fillStyle = gradient;

	// 30 times we'll fill the exactly same rect shape
	for (var i=0; i < 30; i++){
		// Fill the gradient blob
		c.fillRect(-99, -99, 198, 198);

		// Due to the Firefox bug, we should fillRect 30 times.
		// See https://jsfiddle.net/subzey/p5dLgk1c/

		// Translate up by 30 (scaled!) pixels
		// Translate horizontally depending on delta and i squared
		// So farther we're in the loop, more bobbly it becomes
		c.translate(Math.sin(i * i + delta / 4) * 10, -30);
		// Scale 90%, so all the following blobs (and their offsets) become smaller
		c.scale(.9, .9);
		// Compensate the gradient brightness. Again, based on time delta
		c.globalAlpha *= .8 + Math.sin(delta/10) * .1;
	}


	// And, that's it.

	// Call the next frame
	requestAnimationFrame(frame);
})(); // And draw the first one