May 23rd, 2014
I was recently approached by Edward Bishop, a Brighton based photographer to produce a “knuckle tattoo generator” to accompany the website of his excellent new Book Knuckles. The rest of the website comes courtesy of tjhole.co.uk
The tattoos are rendered by an offscreen Html5 Canvas which calls toDataUrl() to create a .png image which can then be shared.
The project is a little more involved than meets the eye. It calculates the widest character, then uses that font size for the rest and aligns them in designated knuckle locations. The biggest headache was that sometimes embedded fonts just refused to render, so for every render, there is a routine which checks if black tattoo pixels actually exist, if not, re-render. This slows the app down a bit, but it works.
Click here or the image below to try it out. Don’t hesitate to show support and share your tats!
Here’s me posing with a signed copy of the book
May 15th, 2014
One of the first things I did with canvas was to test its performance with particles. I used the drawRect() method on a 1000×600 pixel canvas and saw that after 10,000 particles my framerate would drop below 60fps.
In preparation for my upcoming talk at Multi-Mania I wanted to try the approach where you call getImageData(), then render particles as pixels and draw the manipulated imageData back on the canvas. In this case my framerate started to drop below 60fps at 100,000 particles on a 1000×600 pixel canvas. The screenshot above is of 150,000 particles.
You can test it out here : Full Screen and In Editor
Choose your number of particles and render method from the dropdowns. FillRect() with color is particularly slow due to the repeated fillStyle calls. The performance might be better if the drawRect calls were made to an offscreen canvas, didn’t try that one.
Now to do something more interesting with all these particles
Update : I made a “naive” fire particle text effect which uses 50-150K particles here : http://codepen.io/sakri/full/wGsdD, code here. I say naive in that there is no logical connections between the particles that might form flames or so, just some simple rules.
May 1st, 2014
While preparing my Flappy Bird In A Day Html5 Canvas workshop, I wanted to improve the hitTest mechanism. I came up with an idea to draw the bird and tubes on an off screen canvas whose context has globalCompositeOperation set to “xor”. Whenever rendered elements overlap, the result is transparent pixels. I can then compare the alpha channels with the actual rendering and any pixel with a differing alpha value determines a hit.
This works well for small bitmaps, performance would probably be crap when attempting it on larger ones.
I posted a simple demo of this technique on codepen : http://codepen.io/sakri/pen/nIiBq
As with everything, I’m sure this has been done before, I found someone discussing the idea on stackoverflow but didn’t see any code so…
March 31st, 2014
A friendly guy called “Josh Grams” recently commented on my old Flash implementation of Marching Squares blog post , where he pointed out this excellent implementation of the Marching Squares Algorithm by Phill Spiess.
Here’s a few of my codepen Canvas demos using Marching Squares:
A visualization of the algo as it executes
Text Edge Flare
He-Man text effect
January 22nd, 2014
Click image for a much cooler full size version.
Having spent the last years working on large applications, it’s been a real pleasure to write creative code again. With this talk I’ll get technical, but more importantly try to share the fun and inspiration.
You can run the canvas experiment (from the image above) here (for PC’s, the canvas may be too big for devices). (EDIT : It actually looks pretty cool on my Galaxy)
Also check out the photo set of my progress as I was working on it : http://imgur.com/a/O2PhG
See you there!