JS1k 2010 - 110 - Details - A ground breaking JavaScript golfing competition

Author:

Michael McDaid

Twitter:

GitHub:

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

mcdaid.eu

Compo:

classic

Demo link:

https://js1k.com/2010-first/demo/110

Shortlink:

https://js1k.com/110

Blog post:

please update here!

Bytes:

651

Chars:

651

Submission

var f=window,w=f.innerWidth,h=f.innerHeight,el=document.getElementById("c"),c=el.getContext("2d"),a=10,r=0,s=0.001,x=0,y=1,lim=500,ang=Math.PI/a;el.width=w;el.height=h;c.lineWidth=w/4;el.onmousemove=function(e){x=e.clientX-w/2;y=e.clientY/h};el.onclick=function(e){a=a>1?a-1:10};var p=function(){c.fillStyle="rgba(255,255,255,"+y+")";c.fillRect(0,0,w,h);c.fillStyle="#000";c.save();c.translate(w/2,h/2);c.rotate(0.02*r);r+=x/10;c.scale(s,s);s*=1.05;if(s>lim)s=0.005;for(var i=0;i<30;i++){for(var j=0;j<a;j++){c.beginPath();c.arc(0,0,w,0,-ang,true);c.stroke();c.closePath();c.rotate(ang*2)}c.rotate(ang);c.scale(0.8,0.8)}c.restore()};setInterval(p,50);

Description

A 3D chequered tunnel like effect. Use mouse to create different effects, x axis changes rotations speed, y axis changes how quickly image fades away. Click the canvas removes a square/arc, making the animation run smoother/faster.

Base64 encoded

dmFyIGY9d2luZG93LHc9Zi5pbm5lcldpZHRoLGg9Zi5pbm5lckhlaWdodCxlbD1kb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiYyIpLGM9ZWwuZ2V0Q29udGV4dCgiMmQiKSxhPTEwLHI9MCxzPTAuMDAxLHg9MCx5PTEsbGltPTUwMCxhbmc9TWF0aC5QSS9hO2VsLndpZHRoPXc7ZWwuaGVpZ2h0PWg7Yy5saW5lV2lkdGg9dy80O2VsLm9ubW91c2Vtb3ZlPWZ1bmN0aW9uKGUpe3g9ZS5jbGllbnRYLXcvMjt5PWUuY2xpZW50WS9ofTtlbC5vbmNsaWNrPWZ1bmN0aW9uKGUpe2E9YT4xP2EtMToxMH07dmFyIHA9ZnVuY3Rpb24oKXtjLmZpbGxTdHlsZT0icmdiYSgyNTUsMjU1LDI1NSwiK3krIikiO2MuZmlsbFJlY3QoMCwwLHcsaCk7Yy5maWxsU3R5bGU9IiMwMDAiO2Muc2F2ZSgpO2MudHJhbnNsYXRlKHcvMixoLzIpO2Mucm90YXRlKDAuMDIqcik7cis9eC8xMDtjLnNjYWxlKHMscyk7cyo9MS4wNTtpZihzPmxpbSlzPTAuMDA1O2Zvcih2YXIgaT0wO2k8MzA7aSsrKXtmb3IodmFyIGo9MDtqPGE7aisrKXtjLmJlZ2luUGF0aCgpO2MuYXJjKDAsMCx3LDAsLWFuZyx0cnVlKTtjLnN0cm9rZSgpO2MuY2xvc2VQYXRoKCk7Yy5yb3RhdGUoYW5nKjIpfWMucm90YXRlKGFuZyk7Yy5zY2FsZSgwLjgsMC44KX1jLnJlc3RvcmUoKX07c2V0SW50ZXJ2YWwocCw1MCk7

Original source

// s is the scale factor, starts off very small to shrink the tunnel
// lim limit when the scale factor is reset to very small
// a is the number of divisions (arcs), clicking the canvas reduces this by one each time
 
var f=window,w=f.innerWidth,h=f.innerHeight,el=document.getElementById("c"), c=el.getContext("2d"),a=10,r=0,s=0.001,x=0,y=1,lim=500,ang=Math.PI/a;
 
 el.width=w;
 el.height=h;


  // this is what sets the width of the squares/arcs
  c.lineWidth=w/4;
 
	el.onmousemove=function(e){
	 x=e.clientX-w/2;
	 y=e.clientY/h;
	};
	
	el.onclick=function(e){
		a=a>1?a-1:10;
	};
 
 var p=function(){
	
	// y value (mouse y axis) changes how quickly previous image is fading out
	c.fillStyle="rgba(255,255,255,"+y+")";
	
	c.fillRect(0,0,w,h);
	c.fillStyle="#000";
	

	c.save();
	
	
	c.translate(w/2,h/2);
	
	// overall rotation of canvas
	c.rotate(0.02*r);
	r+=x/10;
	
	// overall scale factor of canvas
	c.scale(s,s);
	
	s*=1.05;
	
	// reset to small
	if (s>lim)
		s=0.005;


	// works backwards creating the largest ring first and then reducing in size
	for (var i=0;i<30;i++)
	{
		// draw arcs for one ring
		for (var j=0;j<a;j++)
		{
			c.beginPath();
			c.arc(0, 0, w, 0, -ang,true);
			c.stroke();
			c.closePath();
			c.rotate(ang*2);	
		}
	
		c.rotate(ang);
		c.scale(0.8,0.8);
	}
	
	c.restore();
};

setInterval(p,50);

JS1k: The JavaScript code golfing competition

2010 - The Original