JS1k, the yearly JS code golfing competition

JS1k: The JavaScript code golfing competition

2010 - The Original

Home   Rules   Demos   Submit

Randomly generates color boxes. Each click on canvas uses the x and y position to determine rgb color range of the boxes and background.

Author:
Noah Larsen
Twitter:
@
GitHub:
Facebook:
Google+:
+
Reddit:
/r/
Pouet:
Website: 
mentalx.com
Compo:
classic
Demo link:
https://js1k.com/2010-first/demo/483
Shortlink:
https://js1k.com/483
Blog post:
please update here!
Bytes:
763
Chars:
763
Submission
var z=document.getElementById("c");z.width=640;z.height=400;var t=z.getContext("2d"),j=30,k=50,l=255,m=0,n=30,o=200;
function d(){z.onmousemove=function(e){x=e.pageX;y=e.pageY};var a=t.createLinearGradient(0,0,0,400);a.addColorStop(0,"white");a.addColorStop(1,"rgba("+m+","+n+","+o+",1)");t.fillStyle=a;t.fillRect(0,0,640,400);for(r=0;r<=50;r++){a=0;var b=Math.floor(Math.random()*40+80),f=Math.floor(Math.random()*600-20),g=Math.floor(Math.random()*400-20);for(i=0;i<=8;i++){t.fillStyle="rgba("+Math.floor(Math.random()*j+3)+", "+Math.floor(Math.random()*k+3)+", "+Math.floor(Math.random()*l+3)+", "+a+")";t.fillRect(f,
g,b,b);a+=0.1;b*=0.8;f+=b/8;g+=b/8}}}z.onclick=function(){t.clearRect(0,0,800,600);j=x-200;k=x-150;l=y-100;m=x-200;n=x-150;o=y-100;d()};d();
Description
Randomly generates color boxes. Each click on canvas uses the x and y position to determine rgb color range of the boxes and background.
Base64 encoded
dmFyIHo9ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImMiKTt6LndpZHRoPTY0MDt6LmhlaWdodD00MDA7dmFyIHQ9ei5nZXRDb250ZXh0KCIyZCIpLGo9MzAsaz01MCxsPTI1NSxtPTAsbj0zMCxvPTIwMDsNCmZ1bmN0aW9uIGQoKXt6Lm9ubW91c2Vtb3ZlPWZ1bmN0aW9uKGUpe3g9ZS5wYWdlWDt5PWUucGFnZVl9O3ZhciBhPXQuY3JlYXRlTGluZWFyR3JhZGllbnQoMCwwLDAsNDAwKTthLmFkZENvbG9yU3RvcCgwLCJ3aGl0ZSIpO2EuYWRkQ29sb3JTdG9wKDEsInJnYmEoIittKyIsIituKyIsIitvKyIsMSkiKTt0LmZpbGxTdHlsZT1hO3QuZmlsbFJlY3QoMCwwLDY0MCw0MDApO2ZvcihyPTA7cjw9NTA7cisrKXthPTA7dmFyIGI9TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpKjQwKzgwKSxmPU1hdGguZmxvb3IoTWF0aC5yYW5kb20oKSo2MDAtMjApLGc9TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpKjQwMC0yMCk7Zm9yKGk9MDtpPD04O2krKyl7dC5maWxsU3R5bGU9InJnYmEoIitNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkqaiszKSsiLCAiK01hdGguZmxvb3IoTWF0aC5yYW5kb20oKSprKzMpKyIsICIrTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpKmwrMykrIiwgIithKyIpIjt0LmZpbGxSZWN0KGYsDQpnLGIsYik7YSs9MC4xO2IqPTAuODtmKz1iLzg7Zys9Yi84fX19ei5vbmNsaWNrPWZ1bmN0aW9uKCl7dC5jbGVhclJlY3QoMCwwLDgwMCw2MDApO2o9eC0yMDA7az14LTE1MDtsPXktMTAwO209eC0yMDA7bj14LTE1MDtvPXktMTAwO2QoKX07ZCgpOw==
Original source
var canvas = document.getElementById("c");
canvas.width = 640;
canvas.height = 400;
var context = canvas.getContext("2d");
var color_01a = 30;
var color_01b = 50;
var color_01c = 255;
var gradient_c01 = 0;
var gradient_c02 = 30;
var gradient_c03 = 200;

function draw_b() {
canvas.onmousemove = function(e){
	x=e.pageX;
	y=e.pageY;
}
	var g = context.createLinearGradient(0, 0, 0, 400);
g.addColorStop(0, "white");
g.addColorStop(1, "rgba("+gradient_c01+","+gradient_c02+","+gradient_c03+",1)");
context.fillStyle = g;
context.fillRect(0, 0, 640, 400);
	for (var r=0;r<50;r++)
	{
			var square_alpha = 0;
			var square_size_01 = Math.floor(Math.random() * (120 - 80 + 1) + 80);
			var square_x = Math.floor(Math.random() * (600 - 0 + 1) - 20);
			var square_y = Math.floor(Math.random() * (400 - 0 + 1) - 20);
			for (var i=0;i<8;i++)
			{	
				var color_01 = Math.floor(Math.random() * (color_01a) + 3);
					var color_02 = Math.floor(Math.random() * (color_01b) + 3);
					var color_03 = Math.floor(Math.random() * (color_01c) + 3);
					context.fillStyle = "rgba("+color_01+", "+color_02+", "+color_03+", "+square_alpha+")";
					context.fillRect(square_x, square_y, square_size_01, square_size_01);
					square_alpha = square_alpha+0.1;
					square_size_01 = square_size_01*.8;
					square_x = square_x+(square_size_01/8);
					square_y = square_y+(square_size_01/8);
			}
	}
	}
	
	canvas.onclick = function() {
		context.clearRect(0,0,800,600);
		color_01a = x-200;
		color_01b = x-150;
		color_01c = y-100;
		gradient_c01 = x-200;
		gradient_c02 = x-150;
		gradient_c03 = y-100;
		draw_b();
	}
	
	draw_b();