I’ve recently been working with a luxury car brand on some HTML5 goodness and it’s reminded me to write about a very useful technique used a lot in game programming but often forgotten about when building creative websites and apps.
When you have a number of large images which need to be rapidly switched between or drawn you will very quickly see memory usage going through the roof. We were seeing around 900MiB of memory being eaten up in a second. The first optimisation is to make sure the images are of an appropriate size. In our case the images within the content were being displayed at 394px wide but were originally 1536px wide.
It was great meeting everyone last night at the Bristech meetup. It was my first attempt at doing a live coding session. It was a steep learning curve but I was encouraged to chat to a few people who have been inspired to build a game themselves.
What do you get when you mix a few Leap Motion devices, a few eager developers and space invaders?
We found out at the recent Southville JS Workshop in Bristol. I have been excited about getting involved and I think we had a great workshop to finish the weekend off with some light-hearted fun.
Here are some of the key aspects we went through to program a simple Space Invaders controller using the Leap Motion.
It was great to be able to present at Bristol Skillswap last week. I’m new to the west and am really excited about getting involved in the community here.
I took a flight through my recent journey with United Studios Live and the 3d Audio Visualizer built in to their new website.
A whole new world of sound
The Web Audio API has given us loads of great new toys to play with inside the browser.
I’ve been doing a fair amount of creative and 3d programming recently.
One major drawback of using something like WebGL at the moment is that
it isn’t natively supported on many mobile devices and falling back to
something like the Three.js canvas 2d renderer is very slow.
So I’ve been playing around with using CSS 3D transforms to see what
you can achieve. Here’s an example of a simple scene showing boxes being
dropped on to a plane (Click the window to drop them).
I have been working with Canvas 2D and WebGL recently and have been
using Maths I never expected to see again once I left school. One
thing that has been really useful when turning mathematical functions
in to something visual is to see a graph representation of the values.
I have created a [simple graphing playground](/teststation/creative-
js/grapher/2d.html) to test out these functions and compare them to
each other. You can see below the difference between the sin, cos
and tan functions alongside the ImprovedNoise generator built in
to Three.js.
One of the first articles I wrote on this blog back in May 2010 was about how useful sprites are and how to use them with CSS. It’s can be an absolute headache to implement simple spriting with CSS. Thankfully drawing sprites is implemented natively within the canvas api.
Getting ready
Before I go in to specifics of drawing on a canvas all of these examples expect a 2D context to be available. I won’t repeat this for each example so here is a quick example of how to get it.
Dave Taylor - Software Engineer
