[really off topic] I also really like colorful circles moving around randomly!

If my server is still up -> Liquid Particles

liquid-particles.js

/**
*   Liquid particles canvas experiment
*   ©2010 spielzeugz.de 
*/

var PI_2        = Math.PI * 2;

var canvasW     = 8;
var canvasH     = 8;
var numMovers   = 1024;
var friction    = 0.96;
var movers      = [];

var canvas = null;
var ctx = null;

var mouseX;
var mouseY;
var mouseVX;
var mouseVY;
var prevMouseX;
var prevMouseY;
var isMouseDown;

function init(){
	canvas = document.getElementById("mainCanvas");
	
	canvasW = canvas.width;
	canvasH = canvas.height;
	numMovers = (canvasW + canvasH);
	
	if ( canvas.getContext ){
		setup();
		setInterval( run , 33 );
		trace("interact with the mouse, occasionally click or hold down the mousebutton");
	}
	else{
		trace("Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet Explorer 9.");
	}
}
   
function setup(){
	ctx       = canvas.getContext("2d");
	
	var i = numMovers;
	while ( i-- ){
		var m = new Mover();
		m.x   = canvasW * 0.5;
		m.y   = canvasH * 0.5;
		m.vX  = Math.cos(i) * Math.random() * 34;
		m.vY  = Math.sin(i) * Math.random() * 34;
		movers[i] = m;
	}
	
	mouseX = prevMouseX = canvasW * 0.5;
	mouseY = prevMouseY = canvasH * 0.5;
}

function run(){
	ctx.globalCompositeOperation = "source-over";
	ctx.fillStyle = "rgba(8,8,12,0.65)";
	ctx.fillRect( 0 , 0 , canvasW , canvasH );
	ctx.globalCompositeOperation = "lighter";
	
	mouseVX    = mouseX - prevMouseX;
	mouseVY    = mouseY - prevMouseY;
	prevMouseX = mouseX;
	prevMouseY = mouseY;
	
	var toDist   = canvasW * 0.86;
	var stirDist = canvasW * 0.125;
	var blowDist = canvasW * 0.5;
	
	var Mrnd = Math.random;
	var Mabs = Math.abs;
	
	var i = numMovers;
	while ( i-- ){
		var m  = movers[i];
		var x  = m.x;
		var y  = m.y;
		var vX = m.vX;
		var vY = m.vY;
		
		var dX = x - mouseX;
		var dY = y - mouseY; 
		var d  = Math.sqrt( dX * dX + dY * dY ) || 0.001;
		dX /= d;
		dY /= d;
		
		if ( isMouseDown ){
			if ( d < blowDist ){
				var blowAcc = ( 1 - ( d / blowDist ) ) * 14;
				vX += dX * blowAcc + 0.5 - Mrnd();
				vY += dY * blowAcc + 0.5 - Mrnd();
			}
		}
		
		if ( d < toDist ){
			var toAcc = ( 1 - ( d / toDist ) ) * canvasW * 0.0014;
			vX -= dX * toAcc;
			vY -= dY * toAcc;			
		}
		
		if ( d < stirDist ){
			var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * 0.00026;
			vX += mouseVX * mAcc;
			vY += mouseVY * mAcc;			
		}
		
		vX *= friction;
		vY *= friction;
		
		var avgVX = Mabs( vX );
		var avgVY = Mabs( vY );
		var avgV  = ( avgVX + avgVY ) * 0.5;
		
		if( avgVX < .1 ) vX *= Mrnd() * 3;
		if( avgVY < .1 ) vY *= Mrnd() * 3;
		
		var sc = avgV * 0.45;
		sc = Math.max( Math.min( sc , 3.5 ) , 0.4 );
		
		var nextX = x + vX;
		var nextY = y + vY;
		
		if ( nextX > canvasW ){
			nextX = canvasW;
			vX *= -1;
		}
		else if ( nextX < 0 ){
			nextX = 0;
			vX *= -1;
		}
		
		if ( nextY > canvasH ){
			nextY = canvasH;
			vY *= -1;
		}
		else if ( nextY < 0 ){
			nextY = 0;
			vY *= -1;
		}
		
		m.vX = vX;
		m.vY = vY;
		m.x  = nextX;
		m.y  = nextY;
		
		ctx.fillStyle = m.color;
		ctx.beginPath();
		ctx.arc( nextX , nextY , sc , 0 , PI_2 , true );
		ctx.closePath();
		ctx.fill();		
	}
}

function onDocMouseMove( e ){
	var ev = e ? e : window.event;
	mouseX = ev.clientX - canvas.offsetLeft;
	mouseY = ev.clientY - canvas.offsetTop;
}

function onDocMouseDown( e ){
	isMouseDown = true;
	return false;
}

function onDocMouseUp( e ){
	isMouseDown = false;
	return false;
}

function Mover(){
	this.color = "rgb(" + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + ")";
	this.y     = 0;
	this.x     = 0;
	this.vX    = 0;
	this.vY    = 0;
	this.size  = 1; 
}

function rect( context , x , y , w , h ){
	context.beginPath();
	context.rect( x , y , w , h );
	context.closePath();
	context.fill();
}

function trace( str ){
	console.log(str);
}

lp.html

<html>
	<head>
		<title>Automatic Liquid Particles</title>
		
		<style>
			body
			{
				background-color: black;
			}
			
			canvas
			{
				border: 1px dotted white;
			}
		</style>
		
		<script src="liquid-particles.js"></script>
		<script>
			var mousepos = [0, 0, 1, 1];
			var lasttime = 0;
			
			function fakemove()
			{
				var dateobjc = new Date();
				var prestime = (dateobjc.getTime() / 1000);
				
				if ((canvasW > 8) && (canvasH > 8) && (canvas != null))
				{
					onDocMouseDown(null);
					
					if ((prestime - lasttime) >= 1)
					{
						mousepos[2] = parseInt(Math.random() * 2);
						mousepos[3] = parseInt(Math.random() * 2);
						
						if (mousepos[2] == 0) { mousepos[2] = -1; }
						if (mousepos[3] == 0) { mousepos[3] = -1; }
						
						lasttime = prestime;
					}
					
					mousepos[0] = Math.min(canvasW, Math.max(0, mousepos[0] + (16 * mousepos[2])));
					mousepos[1] = Math.min(canvasH, Math.max(0, mousepos[1] + (16 * mousepos[3])));
					
					var mouseeve = {"clientX":(mousepos[0] + canvas.offsetLeft), "clientY":(mousepos[1] + canvas.offsetTop)};
					
					onDocMouseMove(mouseeve);
				}
				
				setTimeout("fakemove();", 32);
			}
			
			function prepinit()
			{
				document.body.innerHTML = ("<center><canvas id='mainCanvas' width='" + (document.body.offsetWidth - 32) + "' height='" + (document.body.offsetHeight - 32) + "'></canvas></center>");
				init();
				fakemove();
			}
		</script>
	</head>
	
	<body onload="prepinit();"></body>
</html>
Advertisements
[really off topic] I also really like colorful circles moving around randomly!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s