Recently I decided to build part of a game that used an isometric projection for displaying the game board using HTML5.
Dirty plagiarist that I am, I found an excellent (albeit very old) tutorial by Danko Kozar for doing this. However it was written in Actionscript. No bother – I just modified the code to work in HTML5. This meant I could more or less ignore the theory of how isometric projection works and just get down to the business of doing it. Porting the code was easy. As it says in the tutorial:

These tutorials can be used for programming an isometric game in many programming languages not just in Flash. They are more about game programming than about Flash programming.

// isometric transformations
// author: Danko Kozar, DKOZAR.COM

// transforms x,y,z coordinates into Flash x coordinate
xFla = function (x, y, z) {
	// cartesian coordinates
	xCart = (x-z)*Math.cos(0.46365);
	// flash coordinates
	xI = xCart+xOrigin;
	return (xI);
};

// transforms x,y,z coordinates into Flash y coordinate
yFla = function (x, y, z) {
	// cartesian coordinates
	yCart = y+(x+z)*Math.sin(0.46365);
	// flash coordinates
	yI = -yCart+yOrigin;
	return (yI);
};

// --- drawing functions --------------------------------
style = function (a, b, c) {
	// a: line width
	// b: line color
	// c: line alpha
	lineStyle(a, b, c);

};

plot = function (x, y, z) {
	moveTo(xFla(x, y, z), yFla(x, y, z));
};

draw = function (x, y, z) {
	lineTo(xFla(x, y, z), yFla(x, y, z));
};





boxFilled = function (x, y, z, a, b, c, color, fill) {
	beginFill(fill);
	style(1, color, 100);
	plot(x, y, z);
	draw(x+a, y, z);
	draw(x+a, y+b, z);
	draw(x, y+b, z);
	draw(x, y, z);
	plot(x, y+b, z);
	draw(x+a, y+b, z);
	draw(x+a, y+b, z+c);
	draw(x, y+b, z+c);
	draw(x, y+b, z);
	plot(x, y, z);
	draw(x, y+b, z);
	draw(x, y+b, z+c);
	draw(x, y, z+c);
	draw(x, y, z);
	endFill();
};












// --- initialisation --------------------------------
xScreenSize = 400;
yScreenSize = 300;
xOrigin = xScreenSize/2;
yOrigin = yScreenSize-30;



// --- main ------------------------------------------
// left wall
boxFilled(0, 0, 200, 200, 80, 0, "0xEE0000", "0xAA0000");
// right wall
boxFilled(200, 0, 0, 0, 80, 200, "0xEE0000", "0xAA0000");
// floor
boxFilled(0, 0, 0, 200, 0, 200, "0x00BB00", "0x00BB00");
// left door
boxFilled(80, 0, 200, 40, 60, 0, "0xCCCCCC", "0x999999");
// right door
boxFilled(200, 0, 80, 0, 60, 40, "0xCCCCCC", "0x000000");
// blue box
boxFilled(100, 0, 130, 30, 60, 30, "0x0000FF", "0x0000AA");
// grey box
boxFilled(80, 0, 80, 30, 30, 30, "0xAAAAAA", "0x555555");
// yellow box
boxFilled(60, 0, 70, 20, 20, 20, "0xFFFF00", "0xAAAA00");
// purple box
boxFilled(60, 0, 20, 30, 20, 40, "0xFF00FF", "0xAA00AA");

// isometric transformations
// author: Christo, mightystuff.net

// transforms x,y,z coordinates into canvas x coordinate
xFla = function (x, y, z) {
	// cartesian coordinates
	xCart = ( x - z ) * Math.cos(0.46365);
	// canvas coordinates
	xI = xCart + xOrigin;
	return (xI);
};

// transforms x,y,z coordinates into canvas y coordinate
yFla = function (x, y, z) {
	// cartesian coordinates
	yCart = y + ( x + z) * Math.sin(0.46365);
	// canvas coordinates
	yI = -yCart + yOrigin;
	return (yI);
};

// --- drawing functions --------------------------------
style = function (a, b, c) {
	// a: line width
	// b: line color
	// c: line alpha
	context.lineWidth = a;
	context.strokeStyle = b;
};

plot = function (x, y, z) {
	move(xFla(x, y, z), yFla(x, y, z));
};

draw = function (x, y, z) {
	line(xFla(x, y, z), yFla(x, y, z));
};

line = function(x,y) {
	context.lineTo(x, y);
}

boxFilled = function (x, y, z, a, b, c, strokeColour, fillColour) {
	context.strokeStyle = strokeColour;
	context.fillStyle = fillColour;
	context.beginPath();
	plot(x, y, z);
	draw(x + a, y, z);
	draw(x + a, y + b, z);
	draw(x, y + b, z);
	draw(x, y, z);
	context.closePath();
	context.stroke();
	context.fill();
	context.beginPath();
	plot(x, y + b, z);
	draw(x + a, y + b, z);
	draw(x + a, y + b, z + c);
	draw(x, y + b, z + c);
	draw(x, y + b, z);
	context.closePath();
	context.stroke();
	context.fill();
	context.beginPath();
	plot(x, y, z);
	draw(x, y + b, z);
	draw(x, y + b, z + c);
	draw(x, y, z + c);
	draw(x, y, z);
	context.closePath();
	context.stroke();
	context.fill();
};

// --- initialisation --------------------------------
var xScreenSize = 400;				// isometric grid parameters
var yScreenSize = 300;
var xOrigin = xScreenSize/2;
var yOrigin = yScreenSize-30;

function drawElements() {

	// --- main ------------------------------------------
	// left wall
	boxFilled(0, 0, 200, 200, 80, 0, "#EE0000", "#AA0000");
	// right wall
	boxFilled(200, 0, 0, 0, 80, 200, "#EE0000", "#AA0000");
	// floor
	boxFilled(0, 0, 0, 200, 0, 200, "#00BB00", "#00BB00");
	// left door
	boxFilled(80, 0, 200, 40, 60, 0, "#CCCCCC", "#999999");
	// right door
	boxFilled(200, 0, 80, 0, 60, 40, "#CCCCCC", "#000000");
	// blue box
	boxFilled(100, 0, 130, 30, 60, 30, "#0000FF", "#0000AA");
	// grey box
	boxFilled(80, 0, 80, 30, 30, 30, "#AAAAAA", "#555555");
	// yellow box
	boxFilled(60, 0, 70, 20, 20, 20, "#FFFF00", "#AAAA00");
	// purple box
	boxFilled(60, 0, 20, 30, 20, 40, "#FF00FF", "#AA00AA");
}

jQuery(document).ready(function($) {
	init();
});

var canvas;                         // Reference to the canvas element
var context;

function init() {
	canvas = document.getElementById("canvas");
	context = canvas.getContext('2d');

	drawElements();
}

Pretty similar huh? This is just the tip of the iceberg and not everything is as easy as this when porting from Flash to HTML 5 (specifically the canvas element). In my (so far limited) experience the canvas element is a bitch to hook up events to, handy libraries notwithstanding.

As usual, other people have already thought about these things in depth: tackling the essentials of drawing and benchmarking the differences between flash and html5.

So you want to create a dynamic leaderboard that changes on the fly using jQuery? Well do ya?

Here’s the scenario: you have some cool (to you at least) data that you want to put up on a webpage/kiosk/touchscreen/smartphone that animates beautifully in real time to update the results.

Here’s an example of what I’m talking about:

You’ll notice that when a record updates, it will re-order the list depending on where a change has happened, in real time, without you having to do anything. This is ace for games, ops screens and anything else where you want to show off the timely prescience of your data which has a rating or score driving the reason behind its presentation.

All I’m going to talk about here is the front end – specifically how we can create a simple web page that will poll a server for any changes in the data. It’s up to you how you create your back end. However, the ajax poll expects a response in JSON – see step 2 below about what this needs to look like.

Step 1: the leaderboard

<ul id="leaderboard"></ul>

It’s an empty unordered list that will get populated by our jQuery ajax method in step 2…

Step 2: the poll

When the page loads, it will fire off poll() which will recursively call itself every 3 seconds.

The first thing it does is request the most up to date data from your server in a JSON format. For the sake of this example, it needs to look like this:

[ { "facebook_id" : "606970183",
"id" : "3",
"score" : "269",
"username" : "Ant"
},
{ "facebook_id" : "627180753",
"id" : "4",
"score" : "268",
"username" : "Stuart"
},
etc...
]

The poll method iterates through the JSON data. If an li already exists with a reference to the id in the data it contains it will update the li with the new count. If the li doesn’t exist with the id of the record you’re bringing back (probably because it’s a new entry in the results), it will append to the unordered list you have.

	function poll() {
		$.ajax({
			url: '/ajax/sort-leaderboard', // needs to return a JSON array of items having the following properties: id, score, facebook_id, username
			dataType: 'json',
			success: function(o) {
				for(i=0;i<o.length;i++) {
					if ($('#user-'+o[i].id).length == 0) {
						// this id doesn't exist, so add it to our list.
						$("#leaderboard").append('<li><h1 style="display:inline" id="user-' + o[i].id + '">' + o[i].score + '</h1> <img style="height:50px" src="http://graph.facebook.com/' + o[i].facebook_id + '/picture"/> ' + o[i].username + '</li>');
					} else {
						// this id does exist, so update 'score' count in the h1 tag in the list item.
						$('#user-'+o[i].id).html(o[i].score);
					}
				}
				sort();
			},
		});	

		// play it again, sam
		t=setTimeout("poll()",3000);
	}

Step 3: the sorting

After the list gets updates the poll() method calls the sort() method.

I wasn’t clever enough to figure this out, so I nicked the excellent animated sorting example from http://tinysort.sjeiti.com/.

It will sort the results that have been updated in step 2 in a groovy way. Tinysort doesn’t animate itself, but it will sort your data and then use regular jQuery to animate it. The key things to remember is that you want to target the contents of the h1 which contains the score itself, so the first parameter for tsort is ’h1:eq(0)’ and the dude with the highest score goes on top, so the second parameter is setting the option of your sort order, like this: {order:’desc’}.

	function sort() {
		var $Ul = $('ul#leaderboard');
		$Ul.css({position:'relative',height:$Ul.height(),display:'block'});
		var iLnH;
		var $Li = $('ul#leaderboard>li');
		$Li.each(function(i,el){
			var iY = $(el).position().top;
			$.data(el,'h',iY);
			if (i===1) iLnH = iY;
		});
		$Li.tsort('h1:eq(0)',{order:'desc'}).each(function(i,el){
			var $El = $(el);
			var iFr = $.data(el,'h');
			var iTo = i*iLnH;
			$El.css({position:'absolute',top:iFr}).animate({top:iTo},500);
		});
	}

Once it starts animating, the poll() method creates a timeout to call itself again so it can do this all over again.

As I mentioned, the back end is up to you, but here’s how it’s done for this example using the Zend Framework with php:

	$sql = "SELECT id,score,username,facebook_id FROM leaderboard_users ORDER BY score DESC";               
	$results = $this->db->query($sql)->fetchAll();               
	$table = new Zend_Db_Table("leaderboard_users");       
	$table->update(array("score"=>$results[count($results)-1]['score'] + 2),'id='.$results[count($results)-1]['id']);                           
	echo Zend_Json::encode($results);

You can download the html and jQuery code for this here.

Go forth and dynamically leaderboard things.

Here’s some linux tricks I use in my line of work. I find them useful, you may not. You decide.

Delete all files and folders recursively, including hidden ones

The example below will remove all folders called .svn within the current directory

find . -name ".svn" -type d -exec rm -rf {} \;

Rename file extensions within a folder

The example will rename files with a .jpg extension to .png within the current directory

for f in *.jpg; do mv ./"$f" "${f%jpg}png"; done

Disk space usage per directory

Returns human-readable (ie. mb, kb, gb instead of a long number) total bytes for the current directory

du -ch | grep total

Download all files of a certain type from a website

The example will download all .flv files from [URL]

wget [URL] -r -l2 -A.flv -H -nd

I’ll update this with anything new I think is useful. In 4 years I haven’t found anything further that’s useful to me so don’t check back with any vigour.

Turn your Facebook profile picture into a photomosaic made up of your friends profile pictures.

Create line or bar charts and graphs within php. They can be output directly or image files created.

Create line or bar charts and graphs within php. They can be output directly or image files created.

Usage

Simple bar chart

<?php
require_once 'Chart.php';
$bars = array(41,52,53,12,85,61,53,8,79,10,92,36);
$graph = new Chart();
$graph->addBars($bars, 'ff0000');
$graph->output();
?>

To output the chart to an image instead of directly to the browser:

$graph->output('filename.png');

Add X labels

<?php
require_once('Chart.php');
$bars = array(41,52,53,12,85,61,53,8,79,10,92,36);
$dates = array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
$graph = new Chart(); $graph->addBars($bars, 'ff0000');
$graph->addXLabels($dates, '000000');
$graph->output();
?>

Add Y scale

<?php
require_once('Chart.php');
$bars = array(41,52,53,12,85,61,53,8,79,10,92,36);
$dates = array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
$graph = new Chart();
$graph->addBars($bars, 'ff0000');
$graph->addXLabels($dates, '000000');
$graph->addYScale('000000');
$graph->output();
?>

Combine another bar graph

<?php
require_once('Chart.php');
$bars1 = array(41,52,53,12,85,61,53,8,79,10,92,36);
$bars2 = array(61,22,83,42,95,21,67,3,19,99,11,64);
$dates = array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
$graph = new Chart();$graph->addBars($bars1, 'ff0000');
$graph->addBars($bars2, '0000ff');
$graph->addXLabels($dates, '000000');
$graph->addYScale('000000');
$graph->output();
?>

Style with gradients

<?php
require_once('Chart.php');
$bars1 = array(41,52,53,12,85,61,53,8,79,10,92,36);
$bars2 = array(61,22,83,42,95,21,67,3,19,99,11,64);
$dates = array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
$graph = new Chart();
$graph->gradient = true;
$graph->addBars($bars1, 'ff0000');
$graph->addBars($bars2, '0000ff');
$graph->addXLabels($dates, '000000');
$graph->addYScale('000000');
$graph->output();?>

Add a line graph

<?php
require_once('Chart.php');
$bars1 = array(41,52,53,12,85,61,53,8,79,10,92,36);
$bars2 = array(61,22,83,42,95,21,67,3,19,99,11,64);

// create line data based on sine waves
$lines = array();
for($i=0; $i < 36; $i+=5) {
 $x = $i + 5;
 $y1 = 1.5 + sin($i*0.2);
 $y2 = 3.0 * (1.5 + sin($i * 0.2));
 $lines[] = $y1*20; $lines[] = $y2*20;
}
$dates = array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
$graph = new Chart();
$graph->
gradient = true;
$graph->addBars($bars1, 'ff0000');
$graph->addBars($bars2, '0000ff');
$graph->addLines($lines, 'ffcc00');
$graph->addXLabels($dates, '000000');
$graph->addYScale('000000');
$graph->output();
?>

Requires:

PHP 5.0 / GD Library

Installation:

The script should work with GD version 2, PHP 5.0 and Linux and Windows servers
Licensed under the GNU Lesser General Public License as published by the Free Software Foundation.
Copyright © 2007 Chris Tomlinson.

Download

Download chart.php v0.2

Version Changes

Changes:
0.1 – first release
0.2 – added most default values

Create your own drawing

Create your own drawing…

A collection of many spontaneous drawings generated with Flash

Over a thousand random drawings created since 2003.

Create your own drawing:

Once you click submit, your drawing will be visible on the drawing gallery

• A
• B
• C
• D
• E
• F
• G
• H
• I
• J
• K
• L
• K
• M
• N
• O
• P
• Q
• R
• S
• T
• U
• V
• W
• X
• Y
• Z

A script for converting images to different sizes inline, with support for server caching.

Very useful for creating multiple sizes of image urls from single images. Creates a thumbnail image depending on variables passed to it via get.

Images are cached on the server, so server processing overhead is only needed for the first time the script runs on a particular image.

Usage:

<img src="thumb.php?file=FILE&size=SIZE"> - to size the thumbnail  to fit a square

<img src="thumb.php?file=FILE&sizex=SIZEX&sizey=SIZEY"> - to  size the thumbnail to fit a rectangle

<img src="thumb.php?file=FILE&size=SIZE&quality=QUALITY&nocache=NOCACHE"> -  to set a thumbnails quality 

Where:

• FILE = the file to retrieve
• SIZE = the maximum size of the thumbnail in pixels
• SIZEX = the maximum width of the thumbnail (height adjusted accordingly)
• SIZEY = the maximum height of the thumbnail (width adjusted accordingly)
• QUALITY = an integer from 0-100 specifying the resulting jpeg quality of the image
• NOCACHE = an integer 1 or 0. If set to 1, the cached thumbnail is deleted and recreated (use if the source image changes)

Features:

• Server caching of images
• Creation of jpeg thumbnails inline, on the fly
• Can be used for non-local images, if allow_fopen_url in the php configuration is set to true

Requires:

GD Library

Installation:

The script should work with GD versions 1 and 2, and Linux and Windows servers

Licensed under the GNU Lesser General Public License as published by the Free Software Foundation.
Copyright © 2005 Chris Tomlinson.

Download:

Download thumb.php v1.1

Version Changes:

Changes:
0.1 – first release
0.2 – converted cache thumbnail from png to jpeg
0.3 – fixed error where files weren’t being cached properly
0.4 – allowed non local urls (if allow_url_fopen is on), quality and nocache switches
0.5 – allowed maximum x and y settings (for scaling images to fit non square sizes)
0.6 – allowed tagging of images (with the get query placing the text in the bottom left hand corner of the image)
0.7 – fixed gd_info error for php<4.3
0.8 – added gif support (for gd 2.0.28)
0.9 – now supports native outputting of png, jpg and gif formats
1.0 – doesn’t fail if the cache file can’t be created
1.1 – removed a few more notices

Chess program designed to learn from player interaction. Made with flash and PHP server technology, the finished version will (in theory) be able to beat all players that aren’t as good as players that have played the system often.