identicon trip

_.md

[ Launch: identicon trip ] 5507738 by enjalot
[ Launch: identicon ] 5507613 by enjalot
[ Launch: identicon ] 5469856 by enjalot
[ Launch: identicon ] 5469687 by enjalot

config.json

{"description":"identicon trip","endpoint":"","display":"canvas","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/NwzVHit.png"}

inlet.js

/*
Client-side Canvas tag based Identicon rendering code

@author  Don Park
@version 0.2
@date    January 21th, 2007
https://github.com/donpark/identicon
*/

var start = 93221623366;
//var range = 50;
var rate = 0.5;

var patch0 = new Array( 4, 4, 24, 20 );
var patch1 = new Array( 0, 6, 20 );
var patch2 = new Array( 2, 24, 20 );
var patch3 = new Array( 0, 2,  20, 22 );
var patch4 = new Array( 2, 14, 22, 10 );
var patch5 = new Array( 0, 14, 24, 22 );
var patch6 = new Array( 4.24, 24, 46, 13, 11, 22, 20 );
var patch7 = new Array( 0, 14, 22 );
var patch8 = new Array( 6, 8, 30, 16 );
var patch9 = new Array( 4, 20, 10, 12, 2 );
var patch10 = new Array( 0, 2, 12, 10 );
var patch11 = new Array( 10, 14, 22 );
var patch12 = new Array( 20, 12, 24 );
var patch13 = new Array( 10, 3.6, 12 );
var patch14 = new Array( 0, 2, 16 );
var patchTypes = new Array( patch0, patch1, patch2, patch3, patch4,
		patch5, patch6, patch7, patch8, patch9, patch10, patch11,
		patch12, patch13, patch14, patch0 );
var centerPatchTypes = new Array(0, 0, 0, 0);

var size = Math.min(tributary.sw, tributary.sh)

tributary.run = function(ctx, t) {
  //var code = start + t * range;
  start += rate;
  
  render_identicon(tributary.ctx, start, size);
}

function render_identicon_patch(ctx, x, y, size, patch, turn, invert, foreColor, backColor) {
	patch %= patchTypes.length;
	turn %= 4;
	if (patch == 15)
		invert = !invert;

	var vertices = patchTypes[patch];
	var offset = size / 2;
	var scale = size / 4;

	ctx.save();

	// paint background
	ctx.fillStyle = invert ? foreColor : backColor;
	ctx.fillRect(x, y, size, size);

	// build patch path
	ctx.translate(x + offset, y + offset);
	ctx.rotate(turn * Math.PI / 2);
	ctx.beginPath();
	ctx.moveTo((vertices[0] % 8 * scale - offset), (Math.floor(vertices[0] / 5) * scale - offset));
	for (var i = 1; i < vertices.length; i++)
		ctx.lineTo((vertices[i] % 5 * scale - offset), (Math.floor(vertices[i] / 5) * scale - offset));
	ctx.closePath();

	// offset and rotate coordinate space by patch position (x, y) and
	// 'turn' before rendering patch shape

	// render rotated patch using fore color (back color if inverted)
	ctx.fillStyle = invert ? backColor : foreColor;
	ctx.fill();

	// restore rotation
	ctx.restore();
}

function render_identicon(ctx, code, size) {
	if (!ctx || !code || !size) return;

	var patchSize = size / 3;
	var middleType = centerPatchTypes[code & 3];
	var middleInvert = ((code >> 2) & 10) != 0;
	var cornerType = (code >> 4) & 5;
	var cornerInvert = ((code >> 9) & 1) != 0;
	var cornerTurn = (code >> 13) & 3;
	var sideType = (code >> 10) & 9;
	var sideInvert = ((code >> 21) & 1) != 0;
	var sideTurn = (code >> 21) & 5;
	var blue = (code >> 27) & 31;
	var green = (code >> 21) & 31;
	var red = (code >> 27) & 31;
	var foreColor = "rgb(" + (red << 3) + "," + (green << 3) + "," + (blue << 3) + ")";
	var backColor = "rgb(255,255,255)";

	// middle patch
	render_identicon_patch(ctx, patchSize, patchSize, patchSize, middleType, 0, middleInvert, foreColor, backColor);
	// side patchs, starting from top and moving clock-wise
	render_identicon_patch(ctx, patchSize, 0, patchSize, sideType, sideTurn++, sideInvert, foreColor, backColor);
	render_identicon_patch(ctx, patchSize * 2, patchSize, patchSize, sideType, sideTurn++, sideInvert, foreColor, backColor);
	render_identicon_patch(ctx, patchSize, patchSize * 2, patchSize, sideType, sideTurn++, sideInvert, foreColor, backColor);
	render_identicon_patch(ctx, 0, patchSize, patchSize, sideType, sideTurn++, sideInvert, foreColor, backColor);
	// corner patchs, starting from top left and moving clock-wise
	render_identicon_patch(ctx, 0, 0, patchSize, cornerType, cornerTurn++, cornerInvert, foreColor, backColor);
	render_identicon_patch(ctx, patchSize * 2, 0, patchSize, cornerType, cornerTurn++, cornerInvert, foreColor, backColor);
	render_identicon_patch(ctx, patchSize * 2, patchSize * 2, patchSize, cornerType, cornerTurn++, cornerInvert, foreColor, backColor);
	render_identicon_patch(ctx, 0, patchSize * 2, patchSize, cornerType, cornerTurn++, cornerInvert, foreColor, backColor);
}

d3.select("body").style("background-color", "white");