seven-nation-army.js

// GIF Loop Coder Sketch
// https://twitter.com/alterebro/status/669190984014675970 
// http://www.gifloopcoder.com/ 
// short link to this page : http://git.io/vBGBs

function onGLC(glc) {

	// -------------
	// Size Vars
	var W = 600;
	var H = 600;

	// -------------
	// GLC Stuff
	glc.loop();
	
	glc.size(W, H);
	glc.setDuration(1);
	glc.setFPS(60);	
	glc.setMode("single");
	glc.setEasing(true);
	glc.setMaxColors(256);

	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// -------------
	// Config Vars
	var P = [
		[0, 0],
		[width/10, (width/10) + (width/8)],
		[width/2, (width/2) + (width/4)],
		[width*2, (width*2) + (width/2)]
	];				// Key Size Points
	var BX = width/2; 		// Base X
	var BY = height/2 - 30; 	// Base Y


	// -------------------
	// THE BACKGROUND
	// -------------------	
	list.addRect({
		x : 0,
		y : 0,
		w : width,
		h : height,
		drawFromCenter : false,
		fillStyle : '#000'
	});


	// -------------------
	// THE BLOCKS
	// -------------------	
	for ( var i = P.length-1; i > 0; i-- ) {

		var BY1 = BY + (P.length-(i))*50;
		var BY2 = BY + (P.length-(i+1))*50;

		list.addPoly({
			x : BX,
			y : [BY1, BY2],
			radius : [P[i-1][1], P[i][1]],
			sides : 3,
			rotation : 30,
			fill : true,
			fillStyle : [
				color.rgba(255, 255, 255, i/(P.length-1) + 0.2),
				color.rgba(255, 255, 255, i-1/(P.length-1) + 0.2)
			]
		});
		list.addPoly({
			x : BX,
			y : [ (BY1 + (P[i-1][1]-P[i-1][0])/2 + 1 ), (BY2 + (P[i][1]-P[i][0])/2 + 1 )],
			radius : [P[i-1][0], P[i][0]],
			sides : 3,
			rotation : 30,
			fill : true,
			fillStyle : '#000',
		});

			// -------------
			// shadow (reflection)

			list.addPoly({
				x : BX,
				y : [BY1+P[i-1][1], BY2+P[i][1]],
				radius : [P[i-1][1], P[i][1]],
				sides : 3,
				rotation : -30,
				fill : true,
				fillStyle : color.rgba(255, 196, 196, .2),
			});
			list.addPoly({
				x : BX,
				y : [ (BY1+P[i-1][0] + (P[i-1][1]-P[i-1][0])/2 - 1 ), (BY2+P[i][0] + (P[i][1]-P[i][0])/2 - 1)],
				radius : [P[i-1][0], P[i][0]],
				sides : 3,
				rotation : -30,
				fill : true,
				fillStyle : '#000',
			});

	}

}