Splatter Class for MooTools

Thursday, 20 January 2011

There are many things I could be working on at the moment, like roll out all the fixes for the Websvn bridge for Joomla! (which is pretty much entirely ready), or finishing up the alpha for my monster of a tool I've been putting together for a while, GrownCSS.

Instead I've decided to produce yet another random tool which allows you to generate splatters. Yes, you heard me!

It's a MooTools class with a lot of options, read the entire article for an example and the code (you need CSS3 support) ; hit this link for the SVN.

splatter

Click on one of the links below to choose your Splatter 'type'

Simple Splatter is selected by default. As you can see in the script below, pressing left click down will determine the beginning of the splash, whilst releasing it will determine the end ; this works anywhere on the page.

Simple Splatter Cool Splatter Sticks Splatter

window.addEvent('domready', function()
{
	//a basic splatter
	var mySplatter = new Splatter($(document.body));
 
	//a splatter with a background image
	var myCoolSplatter = new Splatter($(document.body),
	{
		min_radius: 2,
		max_radius: 50,
		min_splats: 1,
		max_splats: 30,
		delay: 10,
		spacing: 50,
		style: 'cool_splat',
		onRender: function(element, properties)
		{
			var left = 0 - properties.left;
			var top = 0 - properties.top;
 
			element.setStyle('background-position', left + 'px ' + top + 'px');
		}
	});
 
	//a sticks splatter
	var myStickSplatter = new Splatter($(document.body),
	{
		min_splats: 1,
		max_splats: 30,
		style: 'stick_splat',
		onRender: function(element, properties)
		{
			var angle = Math.atan2(properties.top - mouse_position.y, properties.left - mouse_position.x) / Math.PI * 180 + 180;
 
			element.setStyles(
			{
				'height': Math.round(properties.height / 10),
				'-moz-transform': 'rotate(' + angle + 'deg)',
				'-webkit-transform': 'rotate(' + angle + 'deg)'
			});
		}
	});
 
	var mouse_position = {x: 0, y: 0};
 
	var current_splatter = mySplatter;
 
	$('simple_splatter').addEvent('click', function(e)
	{
		e.stop();
 
		current_splatter = mySplatter;
	});
 
	$('cool_splatter').addEvent('click', function(e)
	{
		e.stop();
 
		current_splatter = myCoolSplatter;
	});
 
	$('stick_splatter').addEvent('click', function(e)
	{
		e.stop();
 
		current_splatter = myStickSplatter;
	});
 
	window.addEvents(
	{
		'mousedown': function(e)
		{
			mouse_position = e.page;
		},
		'mouseup': function(e)
		{
			current_splatter.start(mouse_position, e.page);
		}
	});
});