Paper

Intro­duc­ing my lat­est project: TW Paper, a sim­ple iPhone/iPod touch wall­pa­per gallery+collection.

paper-blog-post

A lit­tle bit of JavaScript and some Photoshop/CSS trick­ery to present a grow­ing col­lec­tion of images designed for your favorite piece of technology!

The page also works on iPhone/iPod touch but looks a lit­tle dif­fer­ent for bet­ter usabil­ity. Just tap+hold on the image to save it.

Paper on iPhone

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

Scroll Clock

I played with MooTools a bit and did that. Use­less, open­source, nerdy.

Scroll Clock

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

TWPlaylist

I wanted to do this for quite some time: a place that logs tracks I lis­ten to.

TWPlaylist

Intro­duc­ing TWPlaylist! Thanks to Twit­ter and a Winamp Plu­gin, all tracks that I lis­ten to (at work) are stored on a dummy account (if you know a plu­gin that does the same for iTunes, please let me know). And to keep things nice and smooth, I set up a quick page that pulls this data and dis­plays it thanks to some AJAX magic… Tracks link to a Discogs search page to find more about them.

As you can read the project page’s bot­tom, every­thing I wrote is open­source. HTML, CSS and JS ; help your­self. Noth­ing too fancy, but it could pre­vent you from wast­ing time… By the way, the code should be self-explanatory, but if it’s not I can help.

You will prob­a­bly notice the some tracks’ data look weird, in fact the Winamp plu­gin chokes on spe­cial char­ac­ters such as “&” and accented let­ters… I hope this gets fixed one day.

I’ve never been a big fan of Twit­ter as I think most user don’t use it the way it should be used, for exam­ple by hav­ing pri­vate dis­cus­sions or retweet­ing too much. How­ever it’s a pretty inter­est­ing plat­form for exper­i­men­ta­tion and art projects. What do you think?

[Sept. 2011 Update] I “donated” the twplaylist Twit­ter account to a char­ity cam­paign, so I moved the account archives to twplaylist_bckp.

Boks–A Visual Grid Editor

Intro­duc­ing Boks, my lat­est and most ambi­tious AIR app to this day!

Do you design web pages? Do you write HTML and CSS? Ever heard about the Grid Sys­tem and Blue­print CSS? Thought it was a pain to imple­ment? Think again, fool!

Boks is some kind of WYSIWYG to help you setup a grid and base­line rhythm, build and fill your lay­out and export all this to HTML and CSS in no time.

Got your own CSS style already? No prob­lemo, Boks can use them and even­tu­ally merge and com­press them within a sin­gle “screen.css”. Your styles use images? Sim­ply point to your asset direc­tory and it will be included too! Afraid of break­ing the base­line rhythm with you ran­domly sized images? Just select the “Add JS to fix base­lines” option and you’re good to go!

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

Apr 01, 2009: Update! I’ve done some wacky video screen­casts that can help you under­stand every­thing about Boks, go and have a look! Yes, the sound is not perfect.

Sg — Qutter

Another script, a tool.

Qut­ter lets you cut any­thing on the stage with­out destroy­ing it. Shapes, texts, images, groups and so on… Here’s a video demo:

Grab the source, or go to its Scriptographer’s page!

I ini­tially did it to be able to cut images. You can’t do it in Illus­tra­tor, or I missed something.

ps: Nam­ing all my script with a Q at the begin­ning is prob­a­bly not a good idea. I think this is going to be bor­ing soon…

Sg — Qwatch

So here’s the sec­ond script I was talk­ing about this week end!


I also made a video demo to show how it works:

The source is hosted here and on Sg’s site.

Please share feed­back and ideas!

Scriptographing

I’ve just been intro­duced to Scrip­tog­ra­pher, this Illus­tra­tor plu­gin allows you to script actions (in JavaScript) in order to auto­mate things, to raster bitmaps, to cre­ate tools or more.

Being a big Illus­tra­tor fan and know­ing JavaScript quite well I’ve started play­ing with it a bit. It can be a lit­tle tricky when you’re look­ing for doc­u­men­ta­tion or when you’re used to work­ing with a flipped y-axis like in Action­Script but you can achieve nice things with only a few lines of code.

The first script I wrote is called Qink and is some sort of china ink paint­brush. It doesn’t work very well yet so I won’t post it now. Drop a com­ment if you want to try it.

The sec­ond thing I wrote has no name yet but works pretty well. It is not buggy at all but I need to rethink the script a lit­tle before post­ing it. Here’s an exam­ple of what you can do with it:

The con­cept is sim­ple: use any image’s pix­els as your color swatch. Either for live paint­ing, or to apply on a path. Expect nice or funny results! Again, drop a com­ment if you can’t wait.

The third thing is called Qat­tern. This one allows you to quickly and eas­ily build a pat­tern… It’s kind of sim­ple, but a video might explain this better:

I did it to go with my blog theme’s new abil­ity to han­dle back­ground patterns… It’s work­ing alright so here is the source code! Play with it, break it and send feed­back… I’m sure things can be improved, if you’ve got sug­ges­tions, share them!