JS1k: The JavaScript code golfing competition

var X,Y,H,J,K,L;i=new Image,u="background",S="style",b[S][u]="#00a",c.width=w=800,c.height=h=599,z=c[S],z[u]="#fff",z.position="absolute",z.top=z.left="50%",z.margin="-300px 0 0 -400px",M=Math,p=M.PI,c.onmousemove=function(a){clearTimeout(L),K=1,H=a.layerX,J=a.layerY,L=setTimeout(function(){K=0},50)},i.src="data:;base64,R0lGODlhCAALAIABAAAApBgTZSH5BAEAAAEALAAAAAAIAAsAAAIUTIBgl8jLnIpKJvruO8tB02hhUAAAOw==",i.onload=function(){function l(b,c){var d=this;d.H=d.I=d.J=b,d.S=d.O=d.N=c,d.E=d.K=0,d.u=function(){K&&(X=H,Y=J);var b=X-d.H,c=Y-d.S,e=M.sqrt(b*b+c*c);d.I=e<f/2?d.H-b:d.J,d.O=e<f/2?d.S-c:d.N,d.E+=(d.I-d.H)*.1,d.E*=.9,d.H+=d.E,d.K+=(d.O-d.S)*.1,d.K*=.9,d.S+=d.K,a.drawImage(i,d.H,d.S,16,22)}}var b=[],d=0,e=p*2/20,f=9,g=.5,j=1,k=10;c.onclick=function(a){f=w/p,j=1};for(y=.1;y<23;y++)for(x=.1;x<40;x++)b.push(new l(x*20,y*26));setInterval(function(){a.clearRect(0,0,w,h);var c=920;while(c--)b[c].u();d==360?d=0:d+=e,X=w/2+M.cos(d)*f,Y=h/2+M.sin(d)*f,f>w/p&&(j=0),f<5&&(j=1,g>3?g=.5:g+=.3),j?f+=g:f-=g},66)}

dmFyIFgsWSxILEosSyxMO2k9bmV3IEltYWdlLHU9ImJhY2tncm91bmQiLFM9InN0eWxlIixiW1NdW3VdPSIjMDBhIixjLndpZHRoPXc9ODAwLGMuaGVpZ2h0PWg9NTk5LHo9Y1tTXSx6W3VdPSIjZmZmIix6LnBvc2l0aW9uPSJhYnNvbHV0ZSIsei50b3A9ei5sZWZ0PSI1MCUiLHoubWFyZ2luPSItMzAwcHggMCAwIC00MDBweCIsTT1NYXRoLHA9TS5QSSxjLm9ubW91c2Vtb3ZlPWZ1bmN0aW9uKGEpe2NsZWFyVGltZW91dChMKSxLPTEsSD1hLmxheWVyWCxKPWEubGF5ZXJZLEw9c2V0VGltZW91dChmdW5jdGlvbigpe0s9MH0sNTApfSxpLnNyYz0iZGF0YTo7YmFzZTY0LFIwbEdPRGxoQ0FBTEFJQUJBQUFBcEJnVFpTSDVCQUVBQUFFQUxBQUFBQUFJQUFzQUFBSVVUSUJnbDhqTG5JcEtKdnJ1Tzh0QjAyaGhVQUFBT3c9PSIsaS5vbmxvYWQ9ZnVuY3Rpb24oKXtmdW5jdGlvbiBsKGIsYyl7dmFyIGQ9dGhpcztkLkg9ZC5JPWQuSj1iLGQuUz1kLk89ZC5OPWMsZC5FPWQuSz0wLGQudT1mdW5jdGlvbigpe0smJihYPUgsWT1KKTt2YXIgYj1YLWQuSCxjPVktZC5TLGU9TS5zcXJ0KGIqYitjKmMpO2QuST1lPGYvMj9kLkgtYjpkLkosZC5PPWU8Zi8yP2QuUy1jOmQuTixkLkUrPShkLkktZC5IKSouMSxkLkUqPS45LGQuSCs9ZC5FLGQuSys9KGQuTy1kLlMpKi4xLGQuSyo9LjksZC5TKz1kLkssYS5kcmF3SW1hZ2UoaSxkLkgsZC5TLDE2LDIyKX19dmFyIGI9W10sZD0wLGU9cCoyLzIwLGY9OSxnPS41LGo9MSxrPTEwO2Mub25jbGljaz1mdW5jdGlvbihhKXtmPXcvcCxqPTF9O2Zvcih5PS4xO3k8MjM7eSsrKWZvcih4PS4xO3g8NDA7eCsrKWIucHVzaChuZXcgbCh4KjIwLHkqMjYpKTtzZXRJbnRlcnZhbChmdW5jdGlvbigpe2EuY2xlYXJSZWN0KDAsMCx3LGgpO3ZhciBjPTkyMDt3aGlsZShjLS0pYltjXS51KCk7ZD09MzYwP2Q9MDpkKz1lLFg9dy8yK00uY29zKGQpKmYsWT1oLzIrTS5zaW4oZCkqZixmPncvcCYmKGo9MCksZjw1JiYoaj0xLGc+Mz9nPS41OmcrPS4zKSxqP2YrPWc6Zi09Z30sNjYpfQ==

// Create global vars
var circleX, // Where the circle drawing is at X
circleY, // Where the circle drawing is at Y
mouseX, // Mouse position X
mouseY, // Mouse position Y
mouseIsMoving, // If the mouse is currently moving
mouseMoveTimeout, // Timeout that is used to set mouseIsMoving
img = new Image, // The image
imageArray = [], // Array to hold each image
circle_angle = 0, // Start angle for circle drawing 
circle_angleIncrement = Math.PI * 2 / 20, // Amount to increment after each full rotation
circle_radius = 9, // Initial circle radius
circle_radiusIncrement = .5, // Amount to increase radius after each full cycle
circle_direction = 1; // Direction of circle drawing -- 1 is clockwise, 0 is counter-clockwise

// Style page and canvas element
b.style.background = "#00a";
c.style.background = "#fff";
c.style.position = "absolute";
c.style.top = c.style.left = "50%";
c.style.margin = "-300px 0 0 -400px";
c.width = canvasWidth = 800;
c.height = canvasHeight = 599;

// On mouse move over the canvas
c.onmousemove = function(e) {
	
	// Clear time out
	clearTimeout(mouseMoveTimeout);
	
	// Set mouse is moving to true
	mouseIsMoving = 1;
	
	// Set mouse X and Y
	mouseX = e.layerX,
	mouseY = e.layerY;
	
	// Set timeout for reverting mouse is moving variable
	mouseMoveTimeout = setTimeout(function(){
		mouseIsMoving = 0;
	},50);
	
};

// Create image -- in the minified version, 'image/gif' is stripped
img.src="data:image/gif;base64,R0lGODlhCAALAIABAAAApBgTZSH5BAEAAAEALAAAAAAIAAsAAAIUTIBgl8jLnIpKJvruO8tB02hhUAAAOw==";

// When the image is loaded
img.onload=function(){
	
	// Create the image objects 23 columns, 40 rows with a bit of padding
	for (var y = .1; y < 23; y++) {
	  for (var x = .1; x < 40; x++) {
			imageArray.push( new Point(x*20, y*26) );
	  }
	}
	
	// OnClick, set the circle radius and direction to the middle of a cycle
	c.onclick = function(e){
		circle_radius = canvasWidth/Math.PI;
		direction=1;
	}

	// The main loop
	setInterval(function(){
		
		// Clear the canvas
		a.clearRect(0, 0, canvasWidth, canvasHeight);
	
		// while(i--) is faster and smaller than for -- 'i' variable is 920 in minified version
		var i = imageArray.length; 
		while(i--){
			
			// Update each image position
			imageArray[i].update();
			
		}
		
		// If the circle has done a full rotation, reset it to 0
		if(circle_angle == 360) circle_angle = 0;
		// Otherwise, increment the angle by the increment
		else circle_angle += circle_angleIncrement;
	
		// Calcualte the X and Y co-ordinates for the circle path
		circleX = canvasWidth/2 + Math.cos(circle_angle) * circle_radius;
		circleY = canvasHeight/2 + Math.sin(circle_angle) * circle_radius;
	
		// If the circle is too big, then change direction
		if(circle_radius > canvasWidth/Math.PI) circle_direction = 0;
	
		// If the circle is too small the change direction
		if(circle_radius < 5) {
			 
			circle_direction=1; 
			
			// If the circle radius increment is getting too big the reset it
			if(circle_radiusIncrement>3) circle_radiusIncrement =.5;
			// Otherwise just increment it -- this makes it get faster and faster
			else circle_radiusIncrement+=.3;
	
		}
	
		// Set direction based on circle_direction variable
		if(circle_direction) circle_radius+=circle_radiusIncrement;
		else circle_radius-=circle_radiusIncrement;

	// Update every 66ms
	},66);

};

// Point object
function Point(x, y) {
	
	// Set initial variables on creation
	this.currentPositionX = this.targetPositionX = this.originalPositionX = x;
	this.currentPositionY = this.targetPositionY = this.originalPositionY = y
	this.velocityX = this.velocityY = .0;

	// update function
	this.update = function(){
	
		// If mouse is moving then override circle drawing position
		if(mouseIsMoving) {
			circleX=mouseX;
			circleY=mouseY;
		}
		
		// Calculate distance from point
		var distanceX = circleX - this.currentPositionX,
		distanceY = circleY - this.currentPositionY,
		distance = Math.sqrt((distanceX * distanceX) + (distanceY * distanceY));
		
		// If the image is not as far away from the point as possible, then go away, otherwise go back
		this.targetPositionX = (distance < circle_radius/2) ? this.currentPositionX - distanceX : this.originalPositionX;
		this.targetPositionY = (distance < circle_radius/2) ? this.currentPositionY - distanceY : this.originalPositionY;

		// Calculate the new X position
		this.velocityX += (this.targetPositionX - this.currentPositionX) * .1;
		this.velocityX *= .8;
		this.currentPositionX += this.velocityX;
		
		// Calculate the new Y position
		this.velocityY += (this.targetPositionY - this.currentPositionY) * .1;
		this.velocityY *= .8;
		this.currentPositionY += this.velocityY;
		
		// Draw the image at the new point
		a.drawImage(img,this.currentPositionX, this.currentPositionY, 16, 22);
	
	};

};