Knuckle Tattoo Generator

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 :)

Canvas particle performance

May 15th, 2014

screenshot of a canvas particles demo

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.

screenshot of a canvas particles fire text effect demo

Nifty Canvas bitmap collision detection trick using globalCompositeOperation

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…

Marching Squares Javascript / Canvas implementation

March 31st, 2014

Screen captures of the Marching Squares Algorithm in action

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.

I promptly ported it to Javascript for use with Html5 Canvas and put it up on Github https://github.com/sakri/MarchingSquaresJS

Here’s a few of my codepen Canvas demos using Marching Squares:

A visualization of the algo as it executes

Text Edge Flare

Ghost text

He-Man text effect ;)

Enjoy!

Talking Text Effects with Canvas at FITC Amsterdam 2014

January 22nd, 2014


Click image for a much cooler full size version.

After a 5 year break from speaking at conferences, I’ll be making my comeback at FITC Amsterdam on the 25th of February : http://fitc.ca/presentation/all-text-tricks-in-the-book-with-javascript-and-canvas/.

In the 2000′s I did several talks about text and text effects with Flash and AS3. Following the seeming demise of flash, I’ve taken many of the concepts, pushed them forward and translated them into Javascript/Canvas. During the 45 minute presentation, I’ll try to squeeze in plenty of ideas, techniques, approaches and topics for further inspiration/research.

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!