JS1k 2013 - 1533 - Details - A sunny JavaScript golfing competition

Author:

Erik Skau

Twitter:

GitHub:

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

Compo:

classic

Demo link:

https://js1k.com/2013-spring/demo/1533

Shortlink:

https://js1k.com/1533

Blog post:

please update here!

Bytes:

1020

Chars:

1020

Submission

_='POb.s.overfl`zhidden";W=wd`;w=c.wNWN;h=c.hTHT;D=50;M=Ma;f=floor;n=wm=hPOv i,d,e=[]; k{is.b=is.a=0} q(g,l){e[g][l+=1.2;v pz",j1599>j;jp+=Strg.fromChCode(128+127Kexp(-j/400)*g/mKs(.3455*jKp`(2,(2*l-11)/n##;(new Audio("data:audio/wav;base64,UklGRmQGBXQVZFZm10I$EAQB8$gAZGF0YUAGCA"+btoa(p#).play}	d`n%P=1;IYJXI<mLJ<n	up={P=0};	move%iYdXii<mLd<nL(I!=i||J!=d#I=i,J=d,Pi=-1;i<=m;i{]=Array(n);d=-1;d<=^]=new k}setInterval({.1>Lq(*m),*n#].b+=(--1+++1)/4-+=].b,*=.95cleRect(0,0,w,h)savea.fillSzrgba(0,35,15"+240Kmax(,0#+",.5)"_c(di?@fillSzblue"leWN=5_c(JI?e[I][J@restore},33);;ii<m;idd<^][dfunction*D+D/2,=g.page].arandom;a.	c.onmouse/D);Pa)0,2KPI,1)for(()Lq(I,J)};M.AA=0;++)inf(the[i,a.tyle=W.ner1][d+strokear#))$BAB%=(g){?abs(@closeK*L&&NidO=J=ITeight^n;d_beg`owz="';for(Y=0;$='z`_^TONLK@?%$#	'[Y++];)with(_.split($))_=join(pop());eval(_)

Description

A puddle rippling and playing music as raindrops fall. You can also play in the puddle by clicking and dragging through it. The notes work sort of like a theremin; volume varies vertically, pitch horizontally. The ripples are a basic approximation to the wave equation using finite difference methods. It runs fastest in Chrome, but should still be tolerable in Firefox and Opera. Compression was done using Google's closure compiler and jscrush.

Base64 encoded

Xz0nUE9iLnMbLm92ZXJmbGB6aGlkZGVuIjtXPXcWZGA7dz1jLndOHFdOO2g9Yy5oVBxIVDtEPTUwO009TWEYO2Y9EmZsb29yO249F3cLbT0XaAtQT3YfIGksZCxlPVtdOwMgaxB7GGlzLmI9GGlzLmE9MH0DIHEoZyxsKXtlW2ddW2wGKz0xLjI7D3YfIHB6IixqFDE1OTk+ajtqFXArPVN0chZnLmZyb21DaB9Db2RlKDEyOCsXMTI3S2V4cCgtai80MDApKmcvbUtzFiguMzQ1NSpqS3BgKDIsKDIqbC0xMSkvbiMjOyhuZXcgQXVkaW8oImRhdGE6YXVkaW8vd2F2O2Jhc2U2NCxVa2xHUm1RRxNCWFFWWkZabTEwSSRFQVFCOBMkZ0FaR0YwWVVBRxNDQSIrYnRvYShwIykucGxheRB9CWRgbiVQPTE7SQVZC0oFWAtJPG1MSjxuEQl1cD0DEHtQPTB9Owltb3ZlJWkFWQtkBVgLaRdpPG1MZDxuTChJIT1pfHxKIT1kI0k9aSxKPWQsUBEPaT0tMTtpPD1tO2kVexldPUFycmF5KG4pOw9kPS0xO2Q8PV5dPW5ldyBrfXNldEludGVydmFsKAMQey4xPgdMcSgXByptKSwXBypuIwECXS5iKz0oGS0dLTEGKxkrHSsxBikvNC0CBgECBis9Al0uYiwCBio9Ljk1CGNsZR9SZWN0KDAsMCx3LGgpCHNhdmUQAWEuZmlsbFMbenJnYmEoMCwzNSwxNSIrFzI0MEttYXgoAgYsMCMrIiwuNSkiGl8aH2MoZARpPwIOGkAaZmlsbBAeUxt6Ymx1ZSIIbBZlV049NQhfCB9jKEoEST9lW0ldW0oOCEAeEAhyZXN0b3JlEH0sMzMpOwE7D2kUaTxtO2kVD2QUZDxeGV1bZANmdW5jdGlvbgQqRCtELzIsBT0XZy5wYWdlBl0uYQcScmFuZG9tEAg7YS4JYy5vbm1vdXNlCy9EKTsMUGEYEA4GKQQwLDJLUEksMSkPZm9yKBAoKRFMcShJLEopfTsSTS4TQUEUPTA7FSsrKRZpbhdmKBh0aBllW2kaLGEuG3R5bGUcPVcuFm5lch0xXVtkBisCHghzdHJva2UfYXIjKSkkQhMTQUITJT0DKGcpez8EEmFicyhAY2xvc2UMSyoSTCYmTmlkGE89Sj1JFFRlaWdodF5uO2QVAl9iZWcWDGBvd3o9Iic7Zm9yKFk9MDskPSd6YF9eVE9OTEtAPyUkIx8eHRwbGhkYFxYVFBMSERAPDgwLCQgHBgUEAwIBJ1tZKytdOyl3aXRoKF8uc3BsaXQoJCkpXz1qb2luKHBvcCgpKTtldmFsKF8p

Original source

// start of submission //

P=J=I=0;
b.style.overflow = "hidden";
W=window;
w=c.width = W.innerWidth;
h=c.height = W.innerHeight;
D=50; // natural diameter
M=Math;
//R=2*M.PI;
f=M.floor;
n=f(w/D); //number of columns
m=f(h/D); //number of rows
P=J=I=0; //the column and row the mouse is on
var i, j, t, T=[];
/**
* @constructor
*/
function cell(i,j)
{
	var self = this;
	self.p = 0; //natural position
	self.v = 0; //velocity
}

function E(i,j)
{
	T[i][j].p+=1.2;
	var X="";
	for (var k=0; k<1599; k++)
	{
		X+=String.fromCharCode(128+f(M.exp(-k/400)*i*127/m*M.sin(.3455*k*M.pow(2,(2*j-11)/n))));
	}
	var audio = new Audio('data:audio/wav;base64,UklGRmQGAABXQVZFZm10IBAAAAABAAEAQB8AABAAAAABAAgAZGF0YUAGAACA'+btoa(X));
	//slightly incorrectly encoded header to wav file to get it to work in opera. Should be UklGRmQGAABXQVZFZm10IBAAAAABAAEAQB8AAAAAAAABAAgAZGF0YUAGAACA Not really sure why it works, but it does.
	audio.play();
	return 1;
}

//what to do on mouse click
c.onmousedown = function(e)
{
	P=1;
	I=f(e.pageY/D);
	J=f(e.pageX/D);
	I<m && J<n && E(I,J);
}

//what to do on mouse unclick
c.onmouseup = function(e)
{
	P=0;
}

//what to do when the mouse moves
c.onmousemove=function(e)
{
	i=f(e.pageY/D);
	j=f(e.pageX/D);
	if(i<m && j<n && (I != i || J !=j))
	{
		I=i;
		J=j;
		P && E(I,J);
	}
}


//update the T function
function update()
{
	M.random()<.1 && E(f(M.random()*m),f(M.random()*n));
	//calculate the velocity of a point based on the current velocity and positions of surrounding points
	for(i = 0; i<m; i++)
	{
		for(j=0; j<n; j++)
		{
			T[i][j].v += (T[i-1][j].p+T[i][j-1].p+T[i+1][j].p+T[i][j+1].p)/4-T[i][j].p;
		}
	}
	//update the position of the points based on current position and velocity. 0.95 is a scaling factor to make everything settle down.
	for(i = 0; i <m; i++)
	{
		for(j=0; j < n; j++)
		{
			T[i][j].p += T[i][j].v;
			T[i][j].p *=.95;
		}
	}
	draw(); //draw after the update
}


//draw the T function
function draw()
{
	a.clearRect(0, 0, w, h);
	a.save();
	for(i = 0; i<m;i++)
	{
		for(j=0;j<n;j++)
		{
			a.fillStyle="rgba(0,35,"+15+f(240*M.max(T[i][j].p,0))+",.5)";
			a.beginPath();
			a.arc(j*D+D/2,i*D+D/2,M.abs(T[i][j].p)*D+D/2,0,2*M.PI,1);
			a.closePath();
			a.fill();
		}
	}
	//draw the red circle where the mouse is
	a.strokeStyle="blue";
	a.lineWidth=5;
	a.beginPath();
	a.arc(J*D+D/2,I*D+D/2,M.abs(T[I][J].p)*D+D/2,0,2*M.PI,1);
	a.closePath();
	a.stroke();
	a.restore();
}


main();

function main()
{
for(i = -1; i <=m; i++)
{
	T[i] = new Array(n);
	for(j=-1; j <=n; j++)
	{
		T[i][j]=new cell(i,j);
	}
}

setInterval(update, 33);
}
// end of submission //

JS1k: The JavaScript code golfing competition

2013 - Spring!

Playing in a Puddle