Upgrading a node module that wraps C code

Today I wanted to get this ultra-thin LED matrix working with Raspberry Pi in NodeJS as part of my work on my new ST4i workshop.

Ultrathin RGB Matrix_02

The SeeedStudio Ultrathin Red LED matrix.

It’s such a nice bright matrix, I really love it, but they’re a little weird to work with. They use the HUB75 protocol which scans across the screen doing a few pixels at a time, so they tend to look super flickery on a standard slow Arduino. But there’s this C++ library for Raspberry Pi that is way faster and some nice person has wrapped it in a Node.js module.

Although I got the C++ code working, I couldn’t install the Node module – the compilation process failed. After some exploration, I realised that the module was designed for older versions of Node (I think a maximum of 0.12.0) and I’m running 5.4.1.

I tried to revert my Node version with n but that seemed temperamental on the Raspberry Pi ARM versions of node. I couldn’t get it working, and it didn’t feel right to switch Node versions if I didn’t have to.

So plan B – I set to work updating the node module. There’s lots of documentation on how to wrap C++ code into Node addons and I have to admit, it’s pretty intense! At least for me, as I haven’t really got much experience of the V8 engine.

But I figured it out – the main issues were how objects are passed back and forth between the JavaScript and C++. It works! But sadly I think it’s probably broken in older versions.

I really should use the Native Abstractions which is a way to wrap C++ code that will remain compatible with past and future versions of Node.js, but one thing at a time. I’ll take a look at that next.

[UPDATE here’s a link to my fork of the repo]

[UPDATE 2 Now rewritten to work with Nan! So is hopefully good for Node.js versions 0.8, 0.10, 0.12, 4 and 5. here’s a link to my fork of the repo, pull request pending.]

[UPDATE 3 My pull request has been accepted and the main repo is now updated.]

In the meantime, enjoy the particles!

PixelPhones – a huge display made with smartphones


It’s been a massively intense few weeks getting my PixelPhones project ready in time for my presentation at FOTB. I’ve been coding day and night for months, and I was up until 4am the night before making sure that I’d thought of everything.

The worst part was that I had no idea if it would work – it’s kinda difficult to get hundreds of phones together to test it. But it did work – and the results were better than I could have hoped for!

thanks to Momo for the amazing video

PixelPhones is this crazy project where I turn each phone in the audience into pixels in a large display. It runs in your phone browser so you don’t need to install an app.

Built with openFrameworks in C++, the app sets up its own WebSocket server and phones connect straight into it over the local wifi network (although in future I hope to get this working over 3G).

Of course socket connections are two way so I couldn’t help but take this chance to involve the audience too – I made a game where Nyan Cat runs from screen to screen, and whoever catches him fastest wins! (partly inspired by Rob Davis’ Cat on Yer Head game)

The tricky bit was figuring out where the phones are – GPS just isn’t accurate enough. I was inspired by the Junkyard Jumbotron – it puts markers on each phone, then you take a picture of them all. But in my app a marker would be way too small so instead I use a unique sequence of flashes.

It uses OpenCV to find the flashing objects, read the pixels, and decode the sequence.

Latency was also an issue, even on the fastest networks the packets arrive at slightly different times. And when you want super fast smooth animation, unpredictable timing is unacceptable. I solved it thanks to Jobe Makar’s excellent method of syncronisation outlined in his ActionScript multi-player gaming book.

I’m so happy and relieved that it worked so well and the timing was split-second perfect. The next day I put myself through the whole ordeal again, this time with a larger audience and only 10 minutes to demo (at the FOTB Jam session). Over 220 devices connected and I could have handled more but we ran out of time.

This is just the start, and I have many many ideas that I have yet to try. I’ll also be open sourcing this code when it’s finished – I can’t wait to see what the rest of you do with it! Both sessions were recorded in full, I’ll let you know when they’re uploaded.

Smooth JS animation on iOS – tutorial on CreativeJS.com

Two tutorials in two weeks!? I know, it’s crazy but I’m getting through a bit of a backlog here 🙂

I’ve now posted a guide to making super smooth running games within the browser on iOS. You can wrap it up in PhoneGap and publish to the AppStore if you want!

It’s based around the fact that if you move HTML elements around using 3D CSS transforms, they will then be rendered using the GPU. It’s so much faster than canvas, and with this game I have a full 60fps on an iPad 1.

Create an iPad optimised game on creativeJS.com

Launch traffic takes down CreativeJS server

CreativeJS.com is the brand new place to go for all the very best examples of JavaScript and HTML5 projects, libraries and tutorials from across the globe. It launched today at 4pm, and 10,000 visitors brought the site down. Oops.

Well I never said we knew how to build reliable hosting solutions. But we are pretty damn good at fancy JavaScript whizziness, including a spinny 3D countdown clock thing.

I’ve got a pretty crack team of contributors together and it’s all set to become a pretty awesome resource.

CreativeJS.com site
CreativeJS.com rss feed
Follow @creativjs on Twitter

CreativeJS comes home to Brighton

[UPDATE] SOLD OUT! In just a few days. Sign up to be the first to hear about the next one.

[UPDATE] Early bird tickets sold out in 10 minutes! 3 tickets left!

It’s with a heavy heart that I leave New York, but I’m very excited to be heading home in a week or so. And America’s loss is Brighton’s gain with the next CreativeJS course in my home town.

“Highly recommended… my job has changed in a good way… I love it. I can’t say thanks enough :)” Clinton Montague

Continue reading “CreativeJS comes home to Brighton”

WebGL and Molehill : an overview of in-browser GPU 3D

The Edge magazine recently asked for my thoughts on hardware accelerated graphics within the browser, and I gave them a fairly comprehensive run down. They published excerpts but here is my response in full with some updates, hopefully you’ll find it useful.

HelloRacer – a gorgeous WebGL demo from Carlos Ulloa who attended my CreativeJS course

Continue reading “WebGL and Molehill : an overview of in-browser GPU 3D”

New CreativeJS dates – NYC, Kansas and UK

New York – SOLD OUT
Kansas City – SOLD OUT!
UK dates coming soon – August

I’m into my second week here in Manhattan and it’s been pretty exciting so far! Last week I had a tour of Big Spaceship and Brooklyn, and I did Jer’s brilliant Processing workshop on Saturday.

And now it’s back to work! After selling out my workshops in San Francisco and New York (which only took 24 hours!), I’ve quickly set up some more dates for you.

16-17 June – New York City SOLD OUT
13-14 July – Kansas City, as part of the excellent D2W conference, SOLD OUT

Tickets go on sale tomorrow at noon, I wouldn’t hang around if you want a ticket. Join the mailing list (make sure you tick the “availability notification” box) and I’ll send you a short reminder just before the tickets become available.

I’m back in Brighton in the summer so I’ll set up some more UK dates for August. And if you want to see the sort of thing we’ll be doing, here’s the video from the Brighton course :