December 29, 2010

Gifted the benefit of R&D time at work, at the end of 2010 I submitted an entry to the Christmas JS1k contest along with my fellow POPsters. I got to geek out and spend work time creating something cutting-edge that I’m pretty proud of: a canvas drawing app!

My goals were to:

• Learn enough native JS to complete an entry(!)
• Use canvas
• Keep usability in mind since it tends to go out the window when shaving off bytes: cursors, tip text, etc.

To see what I ended up with (as well as a super fancy jQuery version that was my starting point), you can play with a demo here.

What is JS1k, you ask? From the source: “the object of this competition is to create a cool JavaScript “application” no larger than 1k. Starting out as a joke, the first version ended with a serious amount of submissions, prizes and quality.”

View my uncompressed JS1k entry

<script type="text/javascript">
	var c = document.getElementsByTagName('canvas')[0];
	var b = document.body;
	var a = c.getContext('2d');
	</script> 
	<script type="text/javascript">
	d=document;
	
	h=d.createElement('h1');
	h.innerHTML='Draw.';
	b.insertBefore(h, c);
	
	// context abbreviation loop
	for($ in a){
		a[$[0]+($[6]||$[2])]=a[$];
	}
	
	// commonly used integers
	x=150;
	y=120;
	
	c.width=c.height=x*2;
	k='background:#';
	z=c.style;
	z.cssText=k+"416012";
	
	// pen color array
	A=['000','0e943a','C0C0C0','C5B358'];
	co = '#'+A[0];
	
	//create color squares
	for(i=0;i<4;i++){
	  sqr(A[i]);
	}
	// not overlapping circle
	oLp = 0;
	// not drawing
	drw = 0;
	
	onmousemove=function(e){
	
		// get mouse/canvas properties
		gTs(e,c)
		
		// mouse intersects circle
		if(dI(eX-oL, eY-oT)){
			
			z.cursor='crosshair';
			oLp = 1;
			// if the mouse is down, leave a mark
			if (drw == 1) {
			with(a){
	                ln(eX-oL, eY-oT); // lineTo
	                strokeStyle = co;
	                sr() // stroke
	            }
            }
		}
		// mouse off circle
		else {
			z.cursor='default';
			oLp = 0;
			drw = 0
		}
	};
    onmouseup=function(){ drw = 0}
    onmousedown=function(e){
    	// if overlapping
		if(oLp) {
			gTs(e,e.target)
			drw = 1;
			with(a){
				ba(); // beginPath
				lineWidth=3;
				mv(eX-oL, eY-oT) // moveTo
			}
        }
	}
	// get target values
	function gTs(e,t){
		eX=e.pageX;
		eY=e.pageY;
		oL=t.offsetLeft;
		oT=t.offsetTop;
	}
	// create square: k='background:#', v=color from array
	function sqr(v){
		n=d.createElement('a');
		n.id=v;
		n.style.cssText=k + v +';cursor:pointer;height:15px;float:left;margin:0 8px 0 0;width:15px';
		n.onclick=function(e){co='#'+e.target.id}
		b.appendChild(n)
	}
	// does intersect: a=pageX, b=pageY, x=circleX/circleY, y=circleRadius
	function dI(a,b) {
	    f = a-x;
	    g = b-x;
	    return f*f+g*g <= y*y
	}
	// create sphere
	with(a){
		g=cR(x,y,0,x,y,200); // createRadialGradient
		g.addColorStop(0,'#f00');
		g.addColorStop(1,'#600');
		ba(); // beginPath
		fillStyle=g;
		ac(x, x, y, 0, Math.PI*2,false); // arc
		ca(); // closePath
		fl() // fill
	}
	</script>