Meandering dots

One of my first js1k experiments.

200 nodes meander around, running a proximity check on their neighbours. If two nodes are within 1/15th of the canvas size (approx) the nodes are connected with a highlighted line.

The meandering logic is simple; on each frame a node either goes hard left or right, and this value affects its current vector direction gradually. This results in smooth random movement.

Compressed code (870 bytes):

var a=innerWidth-20,b=innerHeight-20,c=a>b?a/15:b/15,d=document.getElementById("c");d.style.height=d.height=b;d.style.width=d.width=a;d=d.getContext("2d");var e,f,g=[],h,i;for(e=0;e<200;e++){h={};h.x=Math.random()*a;h.y=Math.random()*b;h.a=Math.random()*1E3;h.b=h.a;g[e]=h}var j,k,l;
setInterval(function(){d.fillStyle="rgba(0, 0, 0, 0.4)";d.fillRect(0,0,a,b);for(e=0;e<200;e++){h=g[e];var m;h.a+=Math.random()>0.5?-1:1;h.b-=(h.b-h.a)*0.01;m=h.b*25;h.x+=1.5*Math.cos(m/180*Math.PI);h.y+=1.5*Math.sin(m/180*Math.PI);if(h.x<0)h.x=a;if(h.x>a)h.x=0;if(h.y<0)h.y=b;if(h.y>b)h.y=0;for(f=e+1;f<200;f++){i=g[f];k=h.x-i.x;l=h.y-i.y;j=Math.sqrt(k*k+l*l);if(j<c){d.strokeStyle="rgba( 255, 100, 255, "+(c-j)/c+" )";d.lineWidth=2;d.lineCap="round";d.beginPath();d.moveTo(h.x,h.y);d.lineTo(i.x,i.y);
d.closePath();d.stroke()}}d.fillStyle="#ffffff";d.fillRect(h.x-1,h.y-1,3,3)}},20);

Expanded code:

var a = innerWidth - 20,
	b = innerHeight - 20,
	c = a > b ? a / 15 : b / 15,
	d = document.getElementById("c");
d.style.height = d.height = b;
d.style.width = d.width = a;
d = d.getContext("2d");
var e,
	f,
	g = [],
	h,
	i;
for (e = 0; e < 200; e++) {
	h = {};
	h.x = Math.random() * a;
	h.y = Math.random() * b;
	h.a = Math.random() * 1e3;
	h.b = h.a;
	g[e] = h;
}
var j, k, l;
setInterval(function () {
	d.fillStyle = "rgba(0, 0, 0, 0.4)";
	d.fillRect(0, 0, a, b);
	for (e = 0; e < 200; e++) {
		h = g[e];
		var m;
		h.a += Math.random() > 0.5 ? -1 : 1;
		h.b -= (h.b - h.a) * 0.01;
		m = h.b * 25;
		h.x += 1.5 * Math.cos((m / 180) * Math.PI);
		h.y += 1.5 * Math.sin((m / 180) * Math.PI);
		if (h.x < 0) h.x = a;
		if (h.x > a) h.x = 0;
		if (h.y < 0) h.y = b;
		if (h.y > b) h.y = 0;
		for (f = e + 1; f < 200; f++) {
			i = g[f];
			k = h.x - i.x;
			l = h.y - i.y;
			j = Math.sqrt(k * k + l * l);
			if (j < c) {
				d.strokeStyle = "rgba( 255, 100, 255, " + (c - j) / c + " )";
				d.lineWidth = 2;
				d.lineCap = "round";
				d.beginPath();
				d.moveTo(h.x, h.y);
				d.lineTo(i.x, i.y);
				d.closePath();
				d.stroke();
			}
		}
		d.fillStyle = "#ffffff";
		d.fillRect(h.x - 1, h.y - 1, 3, 3);
	}
}, 20);

I hope you find this as mesmoring as MrDoob did.

js1k.com/2010-first/demo/114

github.com/raurir/js1k#dots