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.
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).
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.
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.
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.
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.
- Graphics (via canvas)
- 3D Graphics
- Complex animation
- Advanced UIs
- 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
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.
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.
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();
var content = canvas.toDataURL();
var ajax = new XMLHttpRequest();
ajax.open("POST", "saveimage.php", false);
Here is the PHP script saveimage.php:
$imageData=substr($imageData, strpos($imageData, ",")+1);
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $imageData);
fclose( $fp );
That is all there is to it!
<audio id='player' src='example.mp3'></audio>
var player = document.getElementById('player');
var player = new Audio('example.mp3');
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:
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;
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.
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.