Yesterday I finally got around to sitting down and playing with the Canvas and Processing.js tutorial in last month’s issue of .Net Magazine (Issue 202, pages 82-85). I have been wanting to try my hand at HTML5 Canvas since Rob got me interested during the HTML5 special of the ExplicitWeb podcast we recorded back in March (note the subtle plug) and this tutorial seemed like a good way of getting stuck in.
Getting it working in Google Chrome (or not)
Getting started, I fired up a text editor and did step one only to find that nothing appeared in Google Chrome but Firefox was working perfectly. I was certain Google Chrome supported canvas, Wikipedia said so, this awesome visualisation of HTML5 readiness said so, hell even the Processing.js homepage said so, so it wasn’t even that Processing JS was the problem. After pouring over the code and a bit of Googling I stumbled across this ticket on the Processing JS website, which basically points to a bug in Google Chrome as a the source of the problem, but only in certain versions.
It turns out that processing adds a data-src attribute to the Canvas element, which is then used to pull in the Processing JS code via ajax. Some bug in Google Chrome means the ajax call fails, and therefore nothing happens. The work around is to include all your processing code on the page inside script tags, and use the processing.init.js script to load it in:
1 2 3 4 5 6 7 8 9 10 11 |
You can see an example of Processing JS done this way by viewing the full source of the basic demo on the Processing JS homepage. This works really well, except for the drawback of having all your Processing code inline on the page, which doesn’t play too well with WordPress. Therefore, the game demo page doesn’t work in all versions of Google Chome (particularly not in the latest standard release but it does work in the latest beta release).
Playing with some crazy eyes
The problem with coding tutorials, I always find, is that you end up just copying and pasting without truly understanding the nuances of what you are doing: What does that function do? Which argument is which and what are they for? Why’ is the code in that order? This was especially true with this Processing tutorial with it’s smattering of trigonometry & use of functions like ellipse or arc with no description of the arguments.The only cure is to get stuck in.
The first thing I decided I wanted to do, was change the way the eyes move. It seems wrong to me that they remain equi-distant even when they are to the far left and right, I wanted to make them get closer together. The ninja’s head, body and eyes are all fixed on the y axis – they only move left-to-right so I figured I could do this quite easily.
The arc function used to draw the eyes takes 6 arguments: x position, y position, width, height, start angle, stop angle. Therefore to change the distance between the eyes I needed to change the first argument so that the way the x position of the left and right eye relate to each other is different based on the mouse’s position.
I changed this:
1 2 | arc(-10-sin(trackAngle)*7,8,6,6,TWO_PI,0); // Draw left eye arc(10-sin(trackAngle)*7,8,6,6,TWO_PI,0); // Draw right eye |
To this:
1 2 | arc(-10-sin(trackAngle)*(10-2*trackAngle),8,6,6,TWO_PI,0); // Draw left eye arc(10-sin(trackAngle)*(10+2*trackAngle),8,6,6,TWO_PI,0); // Draw right eye |
The first part of the x position -10-sin(trackAngle) placed the eyes and makes them move with the head. The modifying value (originally 7) is what makes the eyes move further than the head – so they move further left or right relative to the heads position. trackAngle is measured in radians and therefore ranges between -1.2 and 1.2. I multiplied this by 2 to make it more significant, and used it to change what the modifying value is. Now the eyes not only move further relative to the head, but also relative to each other.
This is quite a weird effect – but I’m pretty pleased with it :)
Making a mini game
Once I was happy with the eyes, and had gotten a good grasp of the math going on, I decided to make it even more interactive, and turn it into a little game. The little ninja’s arms flying all over the place seemed to want something to hit, so I introduced a dot which appears randomly somewhere on the screen, stays put for just over a second, and then disappears and reappears somewhere else. The dot disappears and reappears faster and faster as time goes on.
I added some code to the mouseMoved function to test if the mouse’s new position matches the dot’s position, and if so adds one to the score and forces the dot to move again. Finally I added a box and some text to display the score in the top right corner, which was interesting as the tutorial doesn’t cover text:
1 2 3 4 5 6 7 8 | void drawScore() { PFont fontA = loadFont("Arial"); textFont(fontA, 36); ninjaStyle(function(){ rect(width-50, height-(height-20), 30, 16) }); fill(#CD3700); text(score, width-57, height-(height-41)); } |
So there we have it, a mini ninja fighting game. You’ll need to visit the demo page to play the game as this blog isn’t (quite) yet running HTML5.
It doesn’t really do any of the things I’d expect a real game to (yet), like have a start / pause button, a sound track, or a leader board. It could probably do with a samurai sword whizzing around and splitting the dots in half… obviously with plenty of blood and gore. It does however get progressively more difficult, the most I’ve scored is 92. The test is to see if anyone can show me a screenshot with a score of 100 and a broken scorebox ;)
Please note: the original code, imagery & styles were all published in .Net Magazine and were created by Alistair MacDonald of Bocoup.com
23rd May
Tweets that mention HTML Canvas: Going Ninja with .Net Magazine's Processing.js tutorial | Musings of ErisDS -- Topsy.com pinged back:
[...] This post was mentioned on Twitter by ErisDS (Hannah), Lo Zeno. Lo Zeno said: RT @ErisDS: Did anyone else do the Canvas/Processing tutorial in last month's .Net? This is what I did with mine http://bit.ly/auKv2L :) [...]
24th May
Rob Hawkes says:
I love this! It’s really interesting to see what can be achieved using in-browser technologies. It’s things like this where a couple of years ago people would be reaching for Flash. I do wonder why they used processingJS for this particular demo though, as drawing and animating something like this would probably a lot simpler using the native canvas API and a bit of jQuery for the mouse events.
24th May
ErisDS says:
I’m not sure about the Canvas API, but Processing JS is really nice to use. I guess trying to recreate this using just the Canvas API would be a good next project!
I have to say, I really enjoyed coding it – it’s intuitive & although the math was a bit scary at first, once you get the hang of it it’s quite an easy way to create stuff…for a coder at least!
24th May
Rob Hawkes says:
I’d argue that coding it with the native canvas API would actually be easier as frameworks like this sometimes add a little extra complexity for simple use. Even so, it’s still valuable to try out these different frameworks and stuff otherwise you’ll have no idea how useful it is for other stuff! I think you’re right about the math though, it’s definitely the most complicated bit for the me, the actual canvas stuff is simple in comparison.
22nd Jun
wizely says:
Just bouncing through… love the ninja and the way you’ve explained it all so even I can (almost) follow it. Good work sis. Just thought I’d say if I ever bumped into you, Rob or any other English person in real life and you said “math” I think I might kill you. ‘Mathematics’ abbreviates to ‘maths’ your side of the Atlantic! Bloody MTV generation! :P
22nd Jun
ErisDS says:
@wizely, lol big bro, I know you emigrated but last time I checked you were still English?
Plus, I agonised over that word… math? maths? math? maths? In the end I gave up and focused on the article :P
Anyway, you’re full of empty threats you, if you met me (again) IRL we both know there’s no way you’d harm a hair on my head ;)
20th Aug
Toni Van de Voorde says:
Hey Miss,
I just stumbled on your little game … and since I like challenges I wanted to beat your score … and I did :)
http://www.devexp.eu/wp-content/uploads/2010/08/monster-ninja-score.png
But I must admit … I had to find a trick to have that score (and it can be higher, but I was tired ;p) …
20th Aug
Andrew Nacin says:
This is a test of the Hannah emergency response system. Also wp-comment-post.php failures, but that sounds far less interesting.
26th Aug
ErisDS says:
Not sure why this page wasn’t allowing people to post to it :/
Maybe something to do with my caching plugins. Need to investigate!