Does it scale?

After my small experiment with the Firefox logo (about 800 stickers), I wanted to see if the technique could scale. The first step was to order a bunch of 25,000 stickers, because office supply was too short for my ambitions. I got all those packs for about 75 euros, VAT and shipping included, which amounts to 0.003 euros per sticker.

Then I searched for an appropriate image to render. I wanted something that made good use of the five basic colors I had (red, green, blue, yellow and black). I settled on an old image of Lucky Lucke, ready to draw his guns. It's easily recognizable (at least in France), has nice primary colors and is quite big and thin.

Using my JS tool, I made the template I needed, and computed that it would require just under 5,000 stickers and would be 1 meter wide and 1.6 meter high. Almost life-size. It's a big step forward from my previous creation, but it still felt manageable. I also prepared a "grid" at the correct scale to put under the transparent film, to help me place the stickers at their right positions. Since my roll of film is only 50 cm wide, I had to split the drawing in two.

And I started the sticking phase. All in all, it probably took me about ten hours to complete, and I was quite happy with the result. Here it is, hung on a door.

Lucky Luke on door

After that, I rolled it up and brought it to my workplace, and put it on a window for the whole world to see. Or at least for the whole parking lot. You can see that our windows are a bit small: the boots have been lost. And you can also see that I have a pretty bad camera...

Lucky Luke in situ

With the blinds closed, it looks ok. Without, the background looks black and the parts that should appear white (the hat and the hems of the trousers, the cigarette) don't look good, because I have no white stickers. A possible solution is to stick any kind of stickers on the other side of the transparent film: their back is white! I don't know yet if I will try to fix Lucky Luke or not. The solution with the blinds is working nicely and I don't want to waste more stickers. I'd rather keep them for my next opus...

Real world sticker art

Here it is! The first real-world implementation of my sticker art concept. It's quite a bit more work to do than Post-It™ art, but the resolution is better.

Firefox logo with stickers on white background

Those stickers being really sticky, I did not want to put them directly on a window or on office furniture. So I chose to use transparent book cover film, the kind used to protect the books and notebooks of children. It's cheap, readily available, and I was able put a grid model underneath to help me not deviate too much. I'll see tomorrow if I can find a place for it in my office.

This relatively small piece used the standard 16x16 pixel Firefox logo as a model. I did the "polychromation" with white background, using the 7-color palette. It needed a total of 788 stickers: about one and a half pack of multi-colored stickers (8 sheets of 11 stickers of the 7 different colors per pack). I did not use a stopwatch, but I would say it took me between one and two hours of meticulous work to finish.

In fact, it's only after doing it and trying to gauge the result on different places that I added the "background" option to the application. I realized that the result looked quite different when viewed on a dark background than on a light background. From the start, I had assumed that the missing dots would represent white, but it's not always the case. If you put the piece on a window and look at it from the outside, everything around the stickers will probably look darker (at least in the daylight). On the contrary, looking at it from the inside, the outdoor will make the background appear light. On the Firefox logo, it does not make a big difference, but on other images, with large white or black regions, it can change everything.

Firefox logo with stickers on black background

You might also have noticed that I added a "Sticker unit price" input box. This will help you estimate your cost, in case you want an quote beforehand. I found a provider in France that sells monochromatic packs of 462 stickers for 1.20€, VAT excluded, when buying more than five packs. That makes the VAT-included unit price 0.0031 €. So my Firefox logo cost a bit less than 2.50€ in stickers.

That's all for the cold hard facts. I'm still pondering what I'll do next. If you want to join the new office-supply-abuse-revolution, you're all welcome!

Improvements on the sticker art creator

The previous version of polychrome, my nifty tool for wasting your company's stickers, only supported a limited set of embedded images. And even though those images had been carefully chosen, there comes a time when you want to experiment with more personal pictures. Enter the new version: you can now upload your images and have them converted.

You might have noticed that I emphasized the word upload. That's because when you do that, you don't really upload anything anywhere. I'm just using that particular interface to allow the browser to get access to a local file that you choose. If you don't trust me, just disconnect from the network after loading the page: the application will run unaffected.

Also, you will now see the number of stickers that will be needed for your creation (lots of them) and you can automatically apply a zoom to shrink your image to more realistic dimensions.


Oh, and sorry Internet Explorer and Safari users, but the File API is not supported by your favorite browser: you will still be limited to the selection of embedded images. Everything works fine with Chrome, Firefox and Opera on Windows. If you have tested other combinations, either working or not, just let me know.


Technical details


The reason I used the upload/FileReader API from HTML5 is simple. I first thought that just allowing the user to type in a URL would be enough. The application would load the image into the page, draw it, do some computation, and display a nice sticker chart. Except that does not work, because of security limitations. The "Same Origin" rule makes that impossible. When you try it, you end up with an image that you can display, but JavaScript cannot get access to its individual pixels and cannot do anything with them. It's essentially a write-only image. Useless.

So I crawled the web, looking for an online HTML5 Photoshop-like application where it was possible to upload images, willing to learn how that magic was possible. I finally found http://evanw.github.com/webgl-filter/. It's basically a WebGL effects demo, but what interested me was the upload function. It turned out it was quite easy. Just an old <input type="file">, then a FileReader plugged on the selected file, and with readAsDataURL() and putting the result as the source of my image, everything worked perfectly.

All in all, this small experiment taught me a few new tricks of HTML5. It's really becoming a nice platform for all sorts of applications.

If you are interested in code, have a look at the source on github.