TOKI WOKI. 

When I moved in I bought an IKEA Ramvik table and while travelling this summer I had an idea (don’t ask why): decorate its top with Lego bricks used as pixels. Here are the steps I went through. If you don’t care about those steps and want to see a nice time-lapse video, scroll to the end of the article!

Lego bricks

First things first. What are the Lego brick sizes and colors available? Oddly enough this question is not that easily answered. Probably because Lego’s site is crappy, or because nobody really cares… I eventually found Brickipedia which happens to be a much richer resource than the official ones. Everything I was looking for was there: the Lego “unit” is 8 millimeters and the color palette is pretty simple.

Table specs

Knowing my table size I had various options, depending on the “pixel size” I’d choose. Of course the number of bricks (and the price) would also vary. So I created a dynamic spreadsheet on Google Docs that’d do the calculations for me… Here it is, with all the options possible (French, sorry).

[iframe src=”https://spreadsheets.google.com/pub?key=0AmyvU-n2aOBpdG5oNUN6UW0xcUJ4a2E3eXFrTTJIVnc&hl=en&output=html&widget=true” height=”374″]

I chose the 4×4 option, quite cheap and still offering a cool number of pixels.

Design

36×16 pixels of freedom, that’s it. I tried lots of different designs, from lo-fi photos to pixel-art drawings. I decided to go for a Heavy Oblique Futura.

Actual size:

Looking good.

The Lego palette

I set my type to white, on a black background. The anti-aliasing process creates gray-scale pixels to smooth the curves, which is great, but Lego bricks aren’t available in all colors! To have a realistic preview of what it would look like I had to create a Photoshop Color Table matching Lego’s gray-scales (if you’re interested, just ping me [UPDATE: here they are]). Here’s a comparison between Photoshop’s default gray-scales (left) and Lego’s palette (right):

You may notice that Lego’s black is a little bit light and the grays are yellowish.

Time to order bricks!

Already? Nope, not that fast. Before ordering I had to know exactly what to order, that means counting the pixels. Well, I’m not this kind of guy. I’m a developer; I hate repetitive chores, you know.

So I fired up Flash Builder and came up with PaletteCounter a simple, OpenSource, app to count pixels of each color. I also added some kind of “assembly instructions generator” to help us build it. Handy.

Time to order!

Really? Yup. I placed an order on lego.com’s Pick A Brick and received it a couple of weeks later. Yay!

Let’s do this

I’m not going to describe the process (that happened this saturday), just have a look at this time-lapse vid. 1020 pics shot in about an hour, yummy. Thanks to Céline and Julie for helping out!

[vimeo id=”16376065″ height=”374″]

This page has been translated in Russian by Karina.

While redesigning this blog I wanted to keep the “one color per post” concept I had in the previous version by changing (tweening) the logo’s color accordingly to the article being viewed (or scrolled to). I rapidly realized I couldn’t achieve this with just HTML+CS+JS and I didn’t want to use Flash (mainly because of iOS devices but also to avoid loading a SWF file on every page).

I remembered hearing — a few months earlier — about Raphaël (a JS lib to render vector graphics). At that time I found the concept really interesting but couldn’t see where to use it.

OK, so I know what I want to do, I know the tools I’ll use, but how do we do that? Raphaël is cool, but its syntax looks a bit cryptic at first. It says it handles SVG, and — guess what — Illustrator can export to SVG. We’re getting closer…

SVG is XML, but Raphaël doesn’t eat XML, it eats a specific syntax meant to be compatible with SVG and VML. Hum… This is when I fire Flash Builder and start writing code. The goal: accept an SVG XML file as input and spit some “Raphaël-compatible script” out.

Boom (plus a little demo of an output).

I then simply had to export my Ai logo to SVG, open it in SVG2RaphaelJS, copy paste the output, and wire all that to the scroll/color tweening logic. Pretty easy.

Everything worked and looked nice on all browsers and OS’s but I realized the sole idea of having a logo changing colors didn’t work that well. For purely visual reasons. So I dropped it from my theme and rolled back to the black PNG version you can see right now.

The good thing is, the tool works pretty well (at least with Illustrator SVGs) and is OpenSource. Either use it or modify it, and tell me what you think. I did this in a hasty fashion and I probably won’t use it a lot, so don’t expect updates or bug fixes… But if you feel like improving it, please do so!

Guess what? AIR app! This one’s for eduMedia.

An intro

We create and distribute pedagogical simulations and videos, and our school users can download them to prepare and illustrate their lessons. Until now we offered server-side generated ZIP files with an HTML, some CSS and the SWF, but users (who often are not computer geeks) wanted something simpler and more powerful… So we designed the eBox!

The eBox

Basically the eBox is an empty media library waiting to be filled. The first time you launch it, it installs itself (and the AIR runtime, if not already there) and then fills itself with the medias you chose. This happens thanks to AIR’s BrowserInvoke logic and removes the “Save As” and “Uncompress” steps.

You can also fill it with “local medias” (of any type) but dragging and dropping files on it, or by browsing and selecting them. If these medias are SWFs they’ll be opened within the app, if not the OS will open them with their default app. Handy.

You also have the ability to create directories to organize your library, and to reorder medias (via drag and drop). Pretty common, but cool.

Let’s talk tech

Flex 4.1, localized with Lupo (now free and OpenSource!) and designed with Illustrator. Server-side communication is made through AMFPHP. I used some tiny techniques that helped deploy two different versions with only one project (we have a school and an individual version), I might detail that in a next post.

This is my first real-life project with Robotlegs, it helped me learn how to use it and how to write really clean code; with view, mediators and all. I loved it and think I will continue building big projects with RLs, makes you feel pretty.

So?

I’m pretty happy with the final result (not that final, expect updates!), both on visual and technical points of view. Go grab a free media and tell me what you think! We also set up a special page with a nice presentation of how it works, in case you’re lost.

I’m still having a hard time believing what I’m about to write, but hopefully you will.

That was my intro, buddy.

A little bit of context

I listen to music, I try as hard as I can to be eclectic but let me confess that: I’ve always loved Hip-Hop. Of course my Hip-Hop heroes have changed through the years, but there’s one that never left my inner podium… He’s Canadian, he’s weird (proof: he’s worn a platypus shirt, once), he’s probably the most subtle writer I know (OK, with Yoni Wolf) and he’s evolving.

He’s Buck 65.

An ounce of Twitter

As in every web tale, it all starts with a Twitter status. Mine started with this one:

I kinda need a logo-thing made of the numbers 65 and 20. Anyone wanna take a crack? Who knows what might happen?!

I read this and thought “Well yes, but I’m kind of busy you know. And what the hell could I do with those damn numbers? Plus, lots of fans will answer that”.

Some friendly advice

A few days later as I was chatting with a good friend of mine (and discreetly sent him the link to that tweet) he reacted something like: “You bitch-ass cunt, you could try something and see! Stupid-ass jerk”. “Hum, well yeah, you know. Just sayin’…” I kind of replied.

So I fired Illustrator and tried a few things out. A “65”, a “20”, and 15 minutes later I had something.

Not quite ready for prime-time, but the concept was there. A few iterations later I was kind of happy with this:

So I tweeted back.

Who knows what might happen

And got an answer, a private one. Saying he was liking it… Oh boy.

A few days later I received another private message asking me if I could add a “th” to the logo, letting me know the mysterious logo was in fact for his “20 years as a rap weirdo”. Which I (of course) did.

We then e-mailed back and forth and “sorted out the details”, he “blew [the logo] up with dynamite and shot it with a gun a few times” and that was it.

Oh boy

I made Buck 65’s 20th “year in the game” logo, which is up on his new website.

Call me a happy fan. Yup.

Meet Dok, my latest and nicest AIR app to this day!

Always looking for help when writing AS3 for Flash, Flex and AIR? Think Adobe’s reference is rich but browsing it sucks? Well, I did too. So I wrote this little thingy that loads, parses and caches help pages and then presents them in a slick and quick UI!

Since this app is only intended for devs and therefore may not be very interesting to others, I decided it should look good. So I tried my best and worked hard on those pixels and styles (colors and textures inspired by that sweet clock)… Jump to the project page for life-size screenshot!

This project is absolutely OpenSource, from top to bottom. AS3 classes, MXML, Illustrator and Photoshop files, PNGs and so on… Help yourself.

C’était hier soir, c’était à Bordeaux, y’avait du monde… Et j’avais bien fait de m’entrainer un peu avant !

Le son n’est pas extra, l’image est un peu moyenne mais l’ambiance est là ! Merci aux organisateurs d’avoir pensé à moi, merci aux gens qui sont venus me voir après pour parler ornithorynque, merci à Céline pour avoir appuyé sur le bouton aux bons moments (et pour l’encodage !), merci à Renaud, à ma manageuse, aux tickets boisson, au tram qui n’a pas accepté de nous prendre… Je m’arrête là, de toute façon personne ne sait de quoi je parle !

Voilà donc ma session de cette 4è Pecha Kucha, hop.

[vimeo id=”11549043″ width=”560″ height=”418″ color=”ff9500″]

Mise à jour (08/05/2010) ! Une photo et la liste des slides, avec quelques liens…

1. No Online Friends
2. Cahier d’enfant – Icônes
3. Mon bureau – Play Station
4. L’ornithorynque
5. Scroll Clock
6. Scroll Effect
7. dribbble
8. Kwot
9. Kid Acne
10. FFFFOUND Desktop
11. Erosie
12. Buck 65/20th
13. Eltono+Nuria
14. Les sites morbides…
15. Alopecia+Alopecia
16. Boks
17. Les Gens
18. Jan Vormann+truth
19. Paper
20. No Requests

Boogie down!

Introducing my latest project: TW Paper, a simple iPhone/iPod touch wallpaper gallery+collection.

A little bit of JavaScript and some Photoshop/CSS trickery to present a growing collection of images designed for your favorite piece of technology!

The page also works on iPhone/iPod touch but looks a little different for better usability. Just tap+hold on the image to save it.

Expect the gallery to evolve, with new images and quotes!

I played with MooTools a bit and did that. Useless, opensource, nerdy.

I also set up a gallery, so if you’ve got nice scrollbars that aren’t here yet, send’ em right away!

Introducing Boks, my latest and most ambitious AIR app to this day!

Do you design web pages? Do you write HTML and CSS? Ever heard about the Grid System and Blueprint CSS? Thought it was a pain to implement? Think again, fool!

Boks is some kind of WYSIWYG to help you setup a grid and baseline rhythm, build and fill your layout and export all this to HTML and CSS in no time.

Got your own CSS style already? No problemo, Boks can use them and eventually merge and compress them within a single “screen.css”. Your styles use images? Simply point to your asset directory and it will be included too! Afraid of breaking the baseline rhythm with you randomly sized images? Just select the “Add JS to fix baselines” option and you’re good to go!

Enough. Just go grab it (or just have a look at the lovely screenshots) and send feedback!

Apr 01, 2009: Update! I’ve done some wacky video screencasts that can help you understand everything about Boks, go and have a look! Yes, the sound is not perfect.

A new project is online! It’s called Kwot, and it allows you to share and store your favorite quotes.

The UI is quite minimalistic, with focus on simplicity. Navigate through quotes with your mouse wheel, your keyboard’s left and right arrow or the mini timeline at the bottom. Add a quote by clicking on the plus button at the bottom right hand corner. If you don’t pick any color they’ll be automatically chosen via a magic algorithm! Another magic algorithm will rotate your quote in 3D space. But don’t worry you will preview that in real-time, ha!

I might add user (login) support, language tagging, an RSS feed and stuff like that but don’t expect that too soon, holidays are coming!

If you don’t have the Flash plugin or if you visit the site on an iPhone the site will look quite different but everything will remain!

A few things I used in case you wonder: swfaddress (you will love deep-linking!), GTween, FlashDevelop, AMFPHP, the viewport width attribute… Oh, and by the way, the font face is called Neutra.

Add some quotes and drop feedback!