JS1k, the yearly JS code golfing competition

JS1k: The JavaScript code golfing competition

2013 - Spring!

Home   Rules   Demos   Submit

Stick JS

This script lets you animate a stick figue by json, movements that can be achieved are similar to those of a human, as sequential movements avoiding robot.

Author:
Damian Cipolat
Twitter:
@
GitHub:
Facebook:
Google+:
+
Reddit:
/r/
Pouet:
Website: 
damiancipolat.com.ar
Compo:
classic
Demo link:
https://js1k.com/2013-spring/demo/1417
Shortlink:
https://js1k.com/1417
Blog post:
please update here!
Bytes:
1022
Chars:
1022
Submission
_='var x8h7g6f5e4d3c2b1a",f=2v,v1,z,n,m,w=k=3e=6r=36d=1q=4j={aGe:b:#fG#cGg:d:#hGd},pp,l=2*MatHPI;oSh=set	s(u(b--;b||clearh,pyJ pp==b?v1:0}g%foKt L b)h=b[t],Hc?g(Hc,1):(w+=3*Hr,JoJ.r,8,	pp=b.p;v1=-(2*b.maN1bN2cN3dN4eO5fO6gO7hO8(h)p||(setTimeout(s,w),w=0x{p:b,r:p,m:s}}_%,C,D,E[&)Q()]},&(tC)Q(D,f,E)]}]}$Sa.qbe(c(peaec(shd(u(c.height=480;c.w<720;foKZ L a)a[Z[0]+(Z[6]||Z[2])]=a[Z]qmvatablncrtdreesvq(#Ub(71UsKfont16pt Verdana"sT("Press any key!",8lLeW<9lLeCapround"a(r,24ba(>c#e>gh,eqb@a@q(2-2ac-l,!0Fef,qFab,qsKv127,8,-Rz127,8,RnX63,4,-RmX6,53,4,Ru(onkeydown=	g(vznm,0;function;a.J,p,s1Q0,j.=y(x)	(return);"Q)},q,=a.,j.="(=_(xh,A,B,	g(Interval(k, ){/r*lb5,0-#d,%,,t&{c:[x<idth=>$j.@-10F$(5G:-Hh.J(bKr(LinN+O-Q,xR1S,hU355X5';for(Y=0;$='XUSRQONLKJHGF@><&%#	'[Y++];)with(_.split($))_=join(pop());eval(_)
Description
This script lets you animate a stick figue by json, movements that can be achieved are similar to those of a human, as sequential movements avoiding robot. I recommend that you use a browser with Google Chrome, not 100% compatible with other browsers. Have fun!
Base64 encoded
Xz0ndmFyIHg4E2gONxNnDjYTZg41E2UONBNkDjMTYw4yE2IOMRNhIixmPTIddix2MSx6LG4sbSx3PQVrPTMFZT02BXI9MzYFZD0xBXE9NB1qPXthRxllOhliOiNmRyNjRxlnOhlkOiNoR2R9LHBwLGw9MipNYXRIUEk7Gm9TaD1zZXQYCXMoDHUoDGItLTtifHxjbGVhchhoDyxwDxp5SgsgcHA9PWI/djE6MH0aZyUbZm9LdCBMIGIpaD1iW3RdLEhjP2coSGMsMSk6KHcrPTMqSHIsAUobb0ouciw4LAlwcD1iLnA7djE9LSgyKmIubQZhTjEGYk4yBmNOMwZkTjQGZU81BmZPNgZnTzcGaE84Dw8oaCkMcHx8KHNldFRpbWVvdXQocyx3KSx3PTAPGngDC3twOmIscjpwLG06c319Gl8lLEMsRCxFC1smAylRKBYpXX0sJih0EEMpUShELGYsRSldfV19GiRTYS5xFGIIZSgIYyhwHGUIYRRlCGMocxxoCGQoDxp1KBtjLmhlaWdodD00ODA7Yy53PDcyMDtmb0taIEwgYSlhW1pbMF0rKFpbNl18fFpbMl0pXT1hW1pdAnERbXYCYRF0YQJiEWxuAmMRcnQCZBFyZQJlEXN2AnEoI1ViKDcxBVVzSwhmb250EzE2cHQgVmVyZGFuYSICc1QoIlByZXNzIGFueSBrZXkhIiwZOB5sTGVXPDkCbExlQ2FwE3JvdW5kIgJhKHIsMjQeYmEoPmMSI2U+ZxJoLGUIcRQeYkBhQHEoMgUtMh5hYxQtGRkFbCwhMEZlEmYscUZhEmIscQhzSw92FTEQBDIQBDcsBDgsLVJ6FTEQHzIQHzcsHzgsUm5YBDYQBDMsBDQsLVJtWB82LDUFHzMsHzQsUnUoDG9ua2V5ZG93bj0JZyh2F3oXbhdtLDAPDw8POwFmdW5jdGlvbgI7YS4DSixwLHMEMVEFMCwGDGouBz15KHgIKQIJASgbCxtyZXR1cm4MKTsOIlEPKX0QLHEsET1hLhIsai4TPSIUKAUVPV8oeBZoLEEsQhcsBQlnKBhJbnRlcnZhbCgZaywaASAbKXscL3IqbAhiFB01LB4wCB8tBCNkLCUDLBYsdCZ7YzpbeDxpZHRoPT4MJBRqLkAULTEwHkYMJCg1Ekc6LUhoLkooYktyKExpbk4rB08tB1EseFIxDFMDLGgbVTM1NQhYFR01HSc7Zm9yKFk9MDskPSdYVVNSUU9OTEtKSEdGQD48JiUjHx4dHBsaGRgXFhUUExIREA8ODAsJCAcGBQQDAgEnW1krK107KXdpdGgoXy5zcGxpdCgkKSlfPWpvaW4ocG9wKCkpO2V2YWwoXyk=
Original source
var wait         = 0;

var json = 
{
	"cuerpo":{
			"x":360,
			"y":240,
			"neck":0,
			"leftarm":-30,
			"rightarm":30,
			"lefthand":10,
			"righthand":-10,
			"leftleg":-30,
			"rightleg":30,
			"leftfoot":10,
			"rightfoot":-10,
			"second":0
		}
}

function repetir_num_seg(num,time,fx)
{
	var idtime = setInterval(function()
		     {
			fx();

			num--;

			if (num ==0) clearInterval(idtime);

		     },time);
}


function control(parte,valor,f)
{
	valor = -(valor *f);
	switch (parte)
	{
		case "la": json.cuerpo.leftarm    = json.cuerpo.leftarm   + valor;
			   break;
		case "lh": json.cuerpo.lefthand   = json.cuerpo.lefthand  + valor;
			   break;
		case "ll": json.cuerpo.leftleg    = json.cuerpo.leftleg   + valor;
			   break;
		case "lf": json.cuerpo.leftfoot   = json.cuerpo.leftfoot + valor;
			   break;
		case "ra": json.cuerpo.rightarm   = json.cuerpo.rightarm  + (-valor);
			   break;
		case "rh": json.cuerpo.righthand  = json.cuerpo.righthand + (-valor);
			   break;
		case "rl": json.cuerpo.rightleg   = json.cuerpo.rightleg  + (-valor);
			   break;
		case "rf": json.cuerpo.rightfoot  = json.cuerpo.rightfoot + (-valor);
			   break;
		case "x" : json.cuerpo.x          = json.cuerpo.x         + (-valor);
			   break;
		case "y" : json.cuerpo.y          = json.cuerpo.y         + (-valor);
			   break;
	}

	update();
}


function recorrerArbol(arbol,tmp,end)
{

	for (var i=0; i<arbol.length; i++)
	if (typeof arbol[i].hijos=="undefined")
	{
		wait = wait + (parseInt(arbol[i].rot) *3);
		(function(c){repetir_num_seg(c.rot,8,function(){control(c.parte,c.mov,2);});})(arbol[i]);
	}
	else resultado = recorrerArbol(arbol[i].hijos,1,null);

	if (tmp==0)
	{
		setTimeout(end,wait);
		wait = 0;
	}
}

var a1 = [{"hijos":[{"parte":"la","rot":"45","mov": "1"},{"parte":"lh","rot":"45","mov": "1"}]},{"hijos":[{"parte":"rl","rot":"45","mov": "1"},{"parte":"rf","rot":"25","mov": "-1"}]}];
var a2 = [{"hijos":[{"parte":"la","rot":"45","mov":"-1"},{"parte":"lh","rot":"45","mov":"-1"}]},{"hijos":[{"parte":"rl","rot":"45","mov":"-1"},{"parte":"rf","rot":"25","mov": "1"}]}];
var a3 = [{"hijos":[{"parte":"ra","rot":"55","mov": "1"},{"parte":"rh","rot":"45","mov": "1"}]},{"hijos":[{"parte":"ll","rot":"45","mov": "1"},{"parte":"lf","rot":"25","mov": "-1"}]}];
var a4 = [{"hijos":[{"parte":"ra","rot":"55","mov":"-1"},{"parte":"rh","rot":"50","mov":"-1"}]},{"hijos":[{"parte":"ll","rot":"45","mov": "-1"},{"parte":"lf","rot":"25","mov": "1"}]}];


function draw(context, stickfigure)
{
	context.beginPath();
	context.moveTo(10, 355);
	context.lineTo(710, 355);
	context.stroke();
	context.strokeStyle="black";
	context.font="16pt Verdana";
	
	context.strokeText("Press any key!"  , 30,80);
	context.strokeStyle = "black";
	context.lineWidth   = 9;
	context.lineCap     = "round";
	context.translate(stickfigure.x, stickfigure.y);
	context.beginPath();
	context.moveTo(0,0);
	context.save();
	context.rotate(((stickfigure.leftleg) / 360) * (Math.PI * 2));
	context.lineTo(0, 60);
	context.translate(0,60);
	context.rotate(((stickfigure.leftfoot) / 360) * (Math.PI * 2));
	context.lineTo(0,60);
	context.restore();
	context.save();
	context.moveTo(0,0);
	context.rotate(((stickfigure.rightleg) / 360) * (Math.PI * 2));
	context.lineTo(0, 60);
	context.translate(0,60);
	context.rotate(((stickfigure.rightfoot) / 360) * (Math.PI * 2));
	context.lineTo(0,60);
	context.restore();
	context.moveTo(0,0);
	context.rotate(((stickfigure.neck) / 360) * (Math.PI * 2));
	context.lineTo(0, -100);
	context.translate(0, -100);
	context.moveTo(20,-20);
	context.arc(0, -30, 30, 0, Math.PI*2, true);
	context.moveTo(0,5);
	context.save();
	context.rotate(((stickfigure.rightarm) / 360) * (Math.PI * 2));
	context.lineTo(0,60);
	context.translate(0,60);
	context.rotate(((stickfigure.righthand) / 360) * (Math.PI * 2));
	context.lineTo(0,45);
	context.restore();
	context.moveTo(0,5);
	context.rotate(((stickfigure.leftarm) / 360) * (Math.PI * 2));
	context.lineTo(0,60);
	context.translate(0,60);
	context.rotate(((stickfigure.lefthand) / 360) * (Math.PI * 2));
	context.lineTo(0,45);
	context.restore();
	context.stroke();
}

function update()
{
	c.height=480
	c.width =720
	c.width = c.width;
	draw(a, json.cuerpo);
}

update()

document.onkeydown = function (event)
		     {
				recorrerArbol(a1,0,function(){recorrerArbol(a2,0,function(){recorrerArbol(a3,0,function(){recorrerArbol(a4,0,null)})})});
		     }