Archive for the ‘HTML5’ Category

Box2D Javascript test

Thursday, March 13th, 2014


I’ve just indulged myself in some physics therapy. I *FINALLY* managed to get a few hours to play with the JavaScript port of the infamous Box2D.js physics library. Not fantastically exciting, but at least it’s a start!

Why is this even remotely interesting? Well, I’ve had a bit of a history with physics engines. Way back in the early days of Flash 5 and AS2, I was pulling together a team to make a pinball game to promote a new Disney movie. A contractor took on the job of writing the physics engine but half way through, he decided his work was too ‘valuable’ and wanted to license it to us instead. Honour and morals are pretty high on my list so that approach didn’t go down too well. So I did what any Creative Director (with barely a C-grade in O-level maths) would do… I decided to make one myself. How hard could it be? Turns out it was quite hard, took lots of “vector maths for dummies” research and annoying my ‘real coder’ colleague Jop with random circles and lines scribbled on napkins. But we got there. I think I OD’d on vector maths a little, hence haven’t been near a physics engine since.

The engine I made was quite ‘creative’ in its approach. It had all sorts of optimisations to make it run on slower computers, especially given how bad browsers where back then. I’ve managed to dig out a debug version (excuse the dead fonts). This version has the visualisation of my “hit zone optimisation” turned on. As the game starts up, it registers every element of the table and every section of curve. It only bothers to work out which areas to properly calculate based on the ball’s immediate surroundings. It sped the calculations up something like 400% when I switched it on for the first time. Click on the image below to launch it in good old-fashioned Flash and you’ll see how it highlights first the quarter of the table to concentrate on, then the individual areas within. Just click yo get started and use the cursors (down arrow to pull the spring back). Have fun!



HTML5 Canvas maze maker

Tuesday, March 4th, 2014


I recently created a kids activity pack that required a massive maze. I’ve had some maze creating code rattling around my from the Flash days so decided to throw it down in JS and HTML5 Canvas. I used this code to create a base maze image, then took it into Photoshop to create a unique outer shape. Took ages! So the plan is to allow an image to be uploaded as a black and white mask so the code can fill with a maze.

This experiment is just the first step and the rendering technique is horribly slow, but at least the ball is rolling!

Click here (or the image above) to launch a new page and have a play.

Twitter API – accessing all your historic tweets

Monday, November 25th, 2013

The Twitter API used to be pretty open but now there are a few sensible restrictions in place to stop anyone abusing it. The main on is that the call to get a tweet will only fetch the last 200 tweets. I wanted to randomly display a tweet from my @Funfacts twitter feed and clearly, the last 200 would be a bit restrictive as I have over 1400 facts stored away.

Luckily, there is a way. You can specify the starting ID of a message and retrieve the last 200 messages FROM that starting ID. You can then grab the ID number from the 200th response and ask it again. And so on. By doing this, you can get the ID of every 200th tweet back to your very first tweet. And then, by using this list of IDs, you have access to all 200 tweets between each ID.

So I wrote a really crude piece of code using the Codebird Twitter JS library and the “statuses_userTimeline” call to do this and hey presto, I have a list of every 200th ID. Mine look like this…

377981167292518400, 220893827496542200, 128169292192677890, 61005958406615040, 12603204747399168, 20143015105, 9896086012, 1235344619

So now by having this lookup list, I have access to all my tweets and can then show a random one by choosing a random starting ID, getting the 200 tweets from there and then choosing a random one of those.

The code I used is a quick hack and requires 4 things:

  1. You download and use the Codebird library
  2. You have your twitter user name
  3. You have the very first ID number to start from
  4. You have a Twitter Developer account and have a Twitter consumerKey

If you know what all of that means and want a few code hints, check out my code here.

A word of warning though, don’t run this kind of thing too many times. Twitter has a rate limit for the number of calls you can make. I think it’s 350 for most of us. If you hit this limit, you have to wait for it to be cleared again. Bit dull, but I’ve only hit it once.



HTML5 tree generator

Monday, November 25th, 2013


Always wanted to write a tree generator and decided to have a go with HTML5 and canvas. Have a look here. Should work on mobile and desktop. Took about 2 hours from start to finish, and as I’ve realised, it’s far from complete. I should point out that (as usual) haven’t really researched the proper way of doing this and just dived in with a vague hunch and a bit of enthusiasm to get me by. Thought I’d share a few things.

My general thinking was that a tree was just an iterative process of the following… Draw a branch with length, angle and number of branches it has at the end. And repeat.

My pseudo-code went something like this:

  1. Create a branch object that accepted a start X and Y and the length of it’s parent.
  2. Decide on this branch’s length by using the parent’s length and reduce it by a random amount.
  3. Decide an angle for this branch within a certain set of limits
  4. Draw this branch. The colour and width are relative to it’s length.
  5. Draw a bunch of leaves around this location too.
  6. Decide how many new branches will be created (within min and max limits)
  7. If the branch length is shorter than a preset minimum, end this branch now.
  8. If the branch length is still longer than a preset minimum, create a new instance os the branch code  with the X and Y of the end point of this branch and this branch’s length. Go to step 1.

Turns out, that’s pretty much how it works. Altering the length, angle and number of new branches does indeed create bunch of crazy looking trees.

As nasty as it is, here’s my current js code. If you’re a complete hack monkey like me, it may be interesting to illustrate the thinking above.

There are a few nuances though…

  1. The first ‘branch’ is really the trunk, so you it’s angle needs to be pretty much straight up.
  2. I cheated by making the branch width relative to its length, so longer branches come out thicker. It works up to a point but in reality, a lower branch’s width keeps expanding as more branches are added above it. I haven’t coded this bit yet but should make the tree look more chunky.
  3. My assumption that a tree branch ends in a certain number of new branches isn’t quite true. I’ve started staring at ‘real’ trees and it’s pretty obvious that new branches spur of a main branch while the main branch carries on straight. In reality, new branches can sprout off a main branch after it has been there a while. My code currently doesn’t allow for these ‘side shoots’.
  4. The angle of a new branch drastically changes the look of a tree from tall and thin to random and scrappy. Again, in reality, branches don’t branch off at a random angle, they mostly point in the same general direction. My code works on a global angle. I.e. 0 degrees is always ‘straight up’. It should work on a local angle, where 0 degrees is the same direction as the parent branch. I just need to pass in the parent angle to the branch object so that it can use that. This is the main problem with my code at present.
  5. I added some leaves as an afterthought but it’s very vague. The code just adds some random dots every time it created a new branch. The position of each leaf is simply randomised around the original branch’s start point. Looks ok, but in reality, not quite how leaves work!
  6. Also, I’m using objects in a very clumsy way. I’m not even disposing of them! Shock! But this is just a quick experiment so as a crude garbage collection, I’m currently refreshing the page to draw another tree. It’s real nasty but does the job for now.

Definitely going to revisit this but in the meantime, hope that gives you a bit of inspiration to either have a first hack or to do it properly!

Here are some examples of tweaking the numbers. See below for what they are.

01 02 03 04 05 06 07 08 09 10

From top left…

1) Standard tree. 2) Half branch length. 3) Half new branch angle. 4) Double new branch angle. 5) Max 2 new branches. 6) Max 8 new branches. 7) Increase the branch with. 8) Generate branches around 180 degrees, 9) Mix of all of the above. 10) Half the length of a branch that can generate a new set of branches.