HTML5 Canvas Stick figure animator

This morning I remembered a program that I haven’t used in years: Pivot Stickfigure. The program was a pretty simple animation tool for making 2D stickfigure based animations and it was fairly popular a few years back and there are many thousands of videos that have been made with it on YouTube. I thought it would be interesting to make a similar tool to Pivot Stickfigure that allowed me to create simple animations, however I figured it would be more interesting if I made it with HTML5 Canvas.

Before I started I decided that rather than having individual frames I would have a keyframes system. This would allow me to create smoother animation (even though I’m not that great at it). I put together a load of JavaScript that stores the animation in JSON format (and also displays it so that you can ‘save’ your animation). Unfortunately my version doesn’t really allow for more than one stick figure however it could, in theory, be added at a later date. I also added in a bunch of sliders so you could manipulate each frame and choose at what time point you wanted it at.

The above video shows my shocking first attempt at making an animation. Unfortunately my computer’s least favorite activity is screen capture so its a bit slow but if you want to check out the web app please click here and if you want the JSON for my animation click here (you can just copy and paste it in).

HTML5 Canvas Particles

I was playing around with HTML5 this morning and decided to build a sort of particle simulation based on rules of Math rather than Physics. It was purely experimental but it looks quite cool. I won’t go into the exact rules of how the particles move around but it is based on some pretty trigonometry. Currently when I click the particles move to a new location however they always jiggle a little in their place. I plan to make it a little more advanced in the next week or so and release an Android version on the Android Market.

The super simple CSS template

I’m bored of people making ugly websites, so as a special new year gift I’ve put together a really tiny layout thingy that is incredibly easy to customize. It is designed to look good and the same in all browsers.

The template is very minimal and has a tiny shadow on the main content area. There is also a small AddThis button bar at the bottom which can be used optionally. If you would like a two column layout I recommend using two <div> elements with the left using float:left and the specific width whilst the right uses float:right and the specific width. You may need to add an empty element immediately afterwards that uses clear:both to ensure that the design doesn’t mess up in some browsers.

If you would like the full source, please go to my Dropbox.

Why HTML5 is the new Java

Java is a good programming language not only because it has everything but also because of the ‘code once, run anywhere’ philosophy that it adopts that allows developers to create cross platform applications easily. However, Java is dying not only because it is getting slower but also because the it is no longer the best when it comes to running anywhere: enter HTML5.

Everyone on the web (I mean developers, 90% of normal people don’t care about HTML5) is behind HTML5 and it seems that the standard is going to continue developing and browser manufacturers are going to continue improving JavaScript performance so that HTML5 apps are faster than normal apps. Chrome’s V8 engine running JavaScript has incredibly high performance.

HTML5 apps are also far easier to design than ordinary applications because creating the UI is child’s play* and incredibly easy to learn. There are also many applications available that make it possible to develop great apps.

HTML5 trumps Java on ‘run anywhere’ because users don’t generally have to install the apps to use them. They are just able to navigate to the appropriate website and run them, making it possible for developers to reach a wider, lazier audience.

Desktop applications haven’t been doing as well recently and there has been much greater focus on HTML5 and the web with good reason because JavaScript really is beginning to gain all of Java’s features. Here’s a short list of major features the languages share:

• Graphics (via canvas)
• Audio
• Video
• 3D Graphics
• Complex animation
• Advanced UIs
• Database
• File management
• Engagement via network

*By this I mean that I code write HTML when I was 9, so therefore it is child’s play

Why hand coding HTML5 is still the best method

I downloaded Adobe’s new ‘cool tool’ called Muse today. It is simply an application that is effectively an evolution of Illustrator and Dreamweaver that is designed for creating fluid HTML5 sites that seem to be laid out using a rather peculiar method. Earlier this year Adobe announced Edge, which is a tool that effectively brings all the horrible animation features of Flash to HTML5 by a massive JavaScript library and therefore it is reasonable to assume Muse is an evolution of Dreamweaver.

I’ve used similar tools in the past that are aimed at making it possible to make HTML5 sites based on a drag and drop system but the problem is that it doesn’t work. If you want to build a great HTML5 the future is definitely hand coding. HTML5 doesn’t really bring much that is useful to the website designer (although it is worth pointing out that CSS3 does) because a lot of the new features are related to JavaScript allowing developers to do cool new things on the client.

HTML5 isn’t about creating new websites, it is about building new web apps and apps are created using code. I am currently working on a few HTML5 sites/apps and there is no way that I could build them using a drag and drop tool such as Muse or Edge because they require enormous amounts of code both client and server side to be awesome. I fear that these new drag and drop tools may make people believe that it is easy to create the new HTML5 app.

Desktop or web: What will I be developing in the next three years?

This is a post not only about me, but about the development community in general. One year ago most of my development was desktop development and people were generally talking about it more. Earlier in the year Microsoft had released a new version of the .Net framework which included updates to WPF along with other extra features. Apple were about to launch the Mac App Store and were preparing to receive app submissions – ironically Microsoft are in a similar position, a year later. However, HTML5 was about to take over completely.

HTML5 has completely changed what web applications are capable of doing. Before they were relatively boring, basic and relied heavily on plugin based technologies like Flash and Silverlight, however HTML5 allowed developers to use new web technologies to do completely different stuff – up to and including 3D graphics in browser.

A year ago I would have definitely said that most of my development would be desktop applications however as I learned the power of the new features in JavaScript that began to change. In fact looking back I would suggest that I would say at least half of my development in the last year has been web development of some form. I feel like I’ve barely done anything on the desktop.

As for the next year, and indeed the next three years I am not sure what I – or we – will be doing. I’ll definitely keep doing desktop development though I would assume that at some point next year I will probably begin to do a lot more development for Windows 8 with Metro and JavaScript. I wouldn’t say that my days of C#, C++, Java and Python are over yet but I think that there are definitely going to be some changes.

Rendering images with Canvas and outputting elsewhere

HTML5 Canvas is probably the most hyped member of the HTML5 clan because there is so much that can be done with it. It is set to be the way of coding games for the next few years on the web and will be the biggest killer of Flash. A lot of people will use the canvas in the form of the HTML element and draw to it on the fly which is useful, but what do you do if you want to save it or display it in an image object?

Canvas provides a rather useful function that allows you to get the image data which can then either be displayed in an image or sent to the server for conversion. Here is how you can display the canvas content in an image:

document.getElementById("some-img").src = some_canvas_object.toDataURL();

The toDataURL() function can take the image type, which could include image/png, image/jpeg, image/gif, etc. This then returns the data which can then simply be put into an image. This is useful if you need to modify the content of an image. One option for saving the image on a users’ computer would be to use the HTML5 File API but this is still work in progress so instead it is easy to AJAX and PHP to save it to a server. Here is the JavaScript:

var content = canvas.toDataURL();
var ajax = new XMLHttpRequest();
ajax.open("POST", "saveimage.php", false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(content);

Here is the PHP script saveimage.php:

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$imageData=substr($imageData, strpos($imageData, ",")+1);
$imageData=base64_decode($imageData);
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $imageData);
fclose( $fp );
}

That is all there is to it!

My Christmas countdown website

Every year I produce a Christmas countdown website for the fun of it. This year I have done something similar that uses HTML5 and JavaScript to produce a nice and simple countdown. You can view it here. If you would like to upload images for the slideshow, please click here. I intend to add audio in the future.

Playing audio with HTML5 and JavaScript

HTML5 is bring us a lot of new features and one of these is the ability to play audio easily in any browser through a new HTML element or JavaScript which allows you to easily control how the music is played. Here are the two options for creating the Audio object:

HTML & JavaScript:

<audio id='player' src='example.mp3'></audio>
<script type='text/javascript'>
var player = document.getElementById('player');
</script>

Pure JavaScript:

<script type='text/javascript'>
var player = new Audio('example.mp3');
</script>g;

This then gives us the object that we can use to play the music. Here are some things we can do with the player:

Play and pause the file:

player.play();

and

player.pause();

Change the volume:

//Set to top volume:
player.volume = 1;
//Set to half volume:
player.volume = 0.5;
//Set to no volume:
player.volume = 0;
player.muted = true;

Loop:

player.loop = true;

There are other things that you should be able to do however they are not yet compatible with all browsers so I’ve just used the basics here. You could use this code to play audio in the background when playing games or use it to build a custom player.

How HTML could have been

HTML is incredibly clever. A lot more clever than you might assume. It was designed by Tim Burners-Lee over twenty years ago (the original proposal was put forward on November 12th 1990) and has since evolved into one of the most known markup languages and has lead to the evolution of XML as well. I would be prepared to bet that most people reading this post understand the above bit of markup (and even if you don’t you can probably grasp the basics…).

HTML was designed so that it could be easily presented by a browser and easily edited by a human. The key part was that HTML files were documents originally rather than programs (this is of course changing now). Burners-Lee could have easily just designed the HyperText Transfer Protocol (HTTP) which is used for the transfer of data on the World Wide Web and said that programs would be transferred and run. This would have been a completely reasonable way of doing it but it would have meant that the web wouldn’t have been as accessible.

Programming is a lot harder than writing HTML. I would be prepared to bet I could teach thirty children aged ten HTML in two hours so that they could produce basic websites with simple color and links. I wouldn’t be prepared to bet I could teach the same students basic programming with something like Python in the same time. The fact that Tim Burners-Lee made a document format rather than a software format meant that the web was able to evolve a lot more quickly.

The problem that we have today, however, is that there is too much being added to HTML too quickly and that the people writing the browsers are loosing track. The best example of this is Microsoft and its Trident engine which interprets HTML and displays it on screen. The engine was designed in 90s when HTML was pretty simple and Microsoft could extend the engine as they pleased so that Internet Explorer could seemingly do more than other browsers which is probably why it remains popular used today. The problem was that as they kept adding features the engine became bloated and when HTML5 started to come up a few years ago Microsoft had a problem – the browser simply didn’t conform with existing standards that all other browsers used. So Microsoft have had to simply the engine to make it faster. Ultimately today there are two good engines: WebKit and Gecko. Gecko used to best, but WebKit is probably beating it at the moment.