Kruithne/Fun!

## Fun!
<html>
	<head>
		<title>Wobble Test</title>
		<style>
			#frame
			{
				width: 500px;
				height: 500px;
				background: gray;
				border: 1px solid black;
			}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/JavaScript" src="http://kruithne.net/jsDraw2D.js"></script>
		<script>
			var framerate = 200;
			var angle = 0;
			var opacity = 1;
			var frame;
			var timer;

			function draw()
			{
				if (opacity < 0)
				{
					clearInterval(timer);
					return;
				}
				drawCircle();
				angle += 0.01;
				opacity -= 0.001;
			}

			function drawCircle()
			{
				var r = (255 * Math.sin(angle) + 255) / 4;
				var g = (255 * Math.cos(angle) + 255) / 4;
				var b = (100 + 100 * Math.cos(angle)) / 4;

				var x = 200 + 100 * Math.cos(angle);
				var y = 200 + 100 * Math.sin(angle);
				var width = 100 + 50 * Math.sin(angle);
				var height = 100 + 50 * Math.cos(angle);

				writeDebug('x', x);
				writeDebug('y', y);
				writeDebug('width', width);
				writeDebug('height', height);
				writeDebug('angle', angle);
				writeDebug('opacity', opacity);
				writeDebug('r', r);
				writeDebug('g', g);
				writeDebug('b', b);

				var colour = new jsColor();
				colour.setRGB(r, g, b);
				var circle = $(frame.fillEllipse(colour, new jsPoint(x, y), width, height));
				circle.css({'opacity': Math.max(0, opacity)});
			}

			function writeDebug(type, value)
			{
				$('#' + type).text(type + ': ' + value);
			}

			$(function()
			{
				frame = new jsGraphics($('#frame').get(0));

				drawCircle();
				timer = setInterval(draw, 1000 / framerate);
			});
		</script>
	</head>
	<body>
		<div id="frame"></div>
		<div id="x"></div>
		<div id="y"></div>
		<div id="width"></div>
		<div id="height"></div>
		<div id="angle"></div>
		<div id="opacity"></div>
		<div id="r"></div>
		<div id="g"></div>
		<div id="b"></div>
	</body>
</html>
	<html>
	<head>
	<title>Wobble Test</title>
	<style>
	#frame
	{
	width: 500px;
	height: 500px;
	background: gray;
	border: 1px solid black;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/JavaScript" src="http://kruithne.net/jsDraw2D.js"></script>
	<script>
	var framerate = 200;
	var angle = 0;
	var opacity = 1;
	var frame;
	var timer;

	function draw()
	{
	if (opacity < 0)
	{
	clearInterval(timer);
	return;
	}
	drawCircle();
	angle += 0.01;
	opacity -= 0.001;
	}

	function drawCircle()
	{
	var r = (255 * Math.sin(angle) + 255) / 4;
	var g = (255 * Math.cos(angle) + 255) / 4;
	var b = (100 + 100 * Math.cos(angle)) / 4;

	var x = 200 + 100 * Math.cos(angle);
	var y = 200 + 100 * Math.sin(angle);
	var width = 100 + 50 * Math.sin(angle);
	var height = 100 + 50 * Math.cos(angle);

	writeDebug('x', x);
	writeDebug('y', y);
	writeDebug('width', width);
	writeDebug('height', height);
	writeDebug('angle', angle);
	writeDebug('opacity', opacity);
	writeDebug('r', r);
	writeDebug('g', g);
	writeDebug('b', b);

	var colour = new jsColor();
	colour.setRGB(r, g, b);
	var circle = $(frame.fillEllipse(colour, new jsPoint(x, y), width, height));
	circle.css({'opacity': Math.max(0, opacity)});
	}

	function writeDebug(type, value)
	{
	$('#' + type).text(type + ': ' + value);
	}

	$(function()
	{
	frame = new jsGraphics($('#frame').get(0));

	drawCircle();
	timer = setInterval(draw, 1000 / framerate);
	});
	</script>
	</head>
	<body>
	<div id="frame"></div>
	<div id="x"></div>
	<div id="y"></div>
	<div id="width"></div>
	<div id="height"></div>
	<div id="angle"></div>
	<div id="opacity"></div>
	<div id="r"></div>
	<div id="g"></div>
	<div id="b"></div>
	</body>
	</html>