Collaborative tools for designers – Part 1

Soyuz Cockpit

Since I’ve discovered and used distributed revision control in my day to day practice, I’ve been amazed by how much it has helped me getting more organized, stop worrying about loosing files and also encouraged me to experiment more and thus try more options in my work. And I’m not even talking about how it eased the collaboration process with other designers and coders.

But one of the major drawback is to convince other people to use it. Convincing someone who codes already, or who is not afraid of typing commands in a console, was easy. But talking just pure GUI fanatics to jump into it, is a bit harder. And for a good reason. The tools needed to manipulate the usual revision control systems are mainly designed for coders. Yes, there are some GUIs (I don’t use them), but they look like a spreadsheet or a Soyuz cockpit. And that barely helps make sense when you are looking at the type of projects that graphic designers have to cope with.

So, I’ve been trying to put my head around this problem and come up with solutions. I had a first try at it with a project called “Design with Git” that I had the chance to develop at Medialab Prado, Madrid in 2013. But this was just a beginning, a short-time experiment, and although I’ve spent energy applying to other residency programs to continue on building it, I’ve yet to find a place that would allow me to dedicate some time improving this concept.

So, since this subject is not dead for me and for a lot of others, I’ve decided to start a series of blog posts, in which I would clear my head out and put into words and graphics my thoughts around this subject. And as a start, in the coming posts, I’m planning to review some available tools for “revision control” and collaboration between designers.

A word of warning here, maybe. I’m biased by my experiences, of course. And so far, the only version control system I’ve used extensively is Git. When I started being interested in these kind of tools, I got my hands on CVS, but then Git (and Github) quickly became the trending thing and I drank the Kool-Aid. Also, CVS needed a server, and that was too much to set up for me just to manage my own projects. I’m not a Git-guru either. I use it, almost daily, for almost all the things I produce. But I’ve not gone beyond the basics of cloning, branching, diffing, pushing and merging. When I have to do more complex tasks like going back to an older version of my files or completely erase a file from history, Stackoverflow is my friend.

So here is a list of what I find useful when using Git with my projects:

  • It allows me to view a history of changes, which files have changed and a written description about it (status / log)
  • It allows me to easily make different versions of the same project and to quickly switch between those versions (branch)
  • It allows me to work with an undefinite number of people (clone / fetch)
  • It returns precise and valuable information between the changes or different version of the project (diff)
  • It allows me to integrate the changes made by another person into my own project (merge)
  • It does not require a complex setup to start using it (init)
  • I do keep my folders tidy as I don’t have to invent complex naming formats for my files (No more Front-cover-v4a-TOPRINT2-validated.pdf)
  • It allows me to view the contributions of each participant on the project (log)
  • I’m not worried about loosing a file, erasing or writing over my previous work.
  • It eases the process of working with developers because we are sharing the same tool to keep track of the project’s advancement.

This list, I think, sums up for me what are the main benefits of using a distributed version system such as Git and these are the benefits graphic designers should get from using it also. The catch is this works well when you’re dealing with code or text files. But some points here are a little or very problematic when it comes to dealing with design files. Hopefully, there is some solutions or things that can be adapted. And I believe this is possible while keeping Git at the core of the process.

But before going further into this development, I’m planing to explore some of the tools promoted as helping designers in their revision control and collaborative process and I’ll do so using this list as a frame or a grid of evaluation.

So see you next time.

(Cover image: Soyuz cockpit by Christopher Michel under Creative Commons Attributior 2.0)

Making of “Word Wars- News from the Empire”

Sharing here my thought and tool process that brought me to create the project called “Word Wars – News from the Empire“.

Word Wars Blender Scene

I’ve been playing around for a while with Blender scripting and even organized monthly workshops about it to share the experience with other artists in a group called “Blender-Brussels“. And since the beginning of these workshop sessions, my goal was to turn one of these one day projects into a daily video generation tool.

Then last month, while preparing the class I gave to a couple of artists in New York city, I started writing a small example script that would grab some text from the web and turn it into a 3D object inside a Blender scene. And while playing around with the script, the idea to turn this into a very resource hungry news reader came to me. Basically, from then on, the rest followed.

As a Star Wars fan, I’ve always been puzzled by the countless memes and reinterpretations it has generated. It somehow reflects how Hollywood culture can really take over our imagination and even become the mythological stories of our western society. But it also portraits Hollywood’s fascination for war stories, an important part of U.S. culture in general. I can’t think of any other western country where the war hero is so present in politics and everyday life. But again, when you know that the U.S. has almost constantly been at war since it’s creation, this comes with no surprises.

So it became clear to me that I wanted to address these subjects in a simple and buzzworthy manner. Following the path of the YES MEN, I chose The New York Times as my only source of war news.

Practically, the whole project consists of a prepared Blender scene, with a starry night (I’ll come back to that later), some placeholder for the texts, a modified Star Wars logo and the “Main Title Theme” music by John Williams.

Then I have two Python scripts. One that fetches the RSS feeds from the NYT and filters the news searching for war related keywords. If at least one article is found, it will add the text to the scene and modify the animation keyframes (because I do always want to have the text start at a certain time and vanish into the infinite emptyness at another particular time also) to fit with the music. The first script finishes by rendering the clip. The second script takes care of the uploading to Youtube, adding the title and filling the description.

To get the feeling right, I studied carefully the original intro from the first Star wars movie. The dedicated wikpedia page helped me also figure out some of the things, but in the end, I took some creative liberties that maybe only a hard core Star Wars fan would notice.

The original font used by Lucas is the “News Gothic” by american author Morris Fuller Benton. But since I’m a big fan of open source fonts, I preferred to use “News Cycle” by Nathan Willis, also an american author and − full disclosure − a good friend. The font is similar to News Gothic and fitted perfectly for the job. Using it, I was also happy to promote his excellent work in the open font world.

For the logo, I downloaded the svg version of it from Wikipedia and searched for amateur SW fonts for the missing characters (O&D). In the end, I found myself redrawing almost all of it, point by point, in Inkscape, until I reached the desired look.

Word_Wars_Logo

For the music score, it quickly was out of question that I would try to find a replacement for the original score by John Williams. First, it’s so iconic − the music is a meme in itself − that it would be pointless to find a remix or a different version of it. I really wanted to keep close as much as possible to the real feel of a Star Wars intro, and well, can’t do without John and the brass from the London Symphonic Orchestra. Second, if you worry about copyright issues, there is two arguments that made me stick by this choice. One is that, since I was uploading to Youtube, I knew they would let me use the music but would also certainly pay the necessary royalties to John for me. Then, if anyone still complained, I could certainly make a case, with all the clips and remixes you can find online, that the song could be considered as public domain. (I know that last argument is a bit too far fetched, but there should be a case like this in copyright laws.)

Then for the star field background, I wanted to pay my respects to those fans scrutinizing every official Star Wars trailer looking for a detail or a key that would unlock a piece or a new character from the coming movie. So I searched for the real star field that you can see from earth and found it from Paul Bourke’s page, luckily in a very high resolution. Since there was no license mentioned on the page, I contacted him by mail. Here’s his response:

No license … go wild.
Acknowledgements welcome.

I could not be happier. Adding this little detail, that until now I (guess) was the only one who could see it, for me, really tied the whole project together. It’s subconscious to the viewer, but s/he is watching those flying vanishing news from earth.

After all this, I polished the scripts a little, moved it all to a small dedicated server, cried a little when I saw the difference in rendering times between the server and my desktop, reworked the scene to pre-render the parts that never change, gained a couple of hours, then patiently waited 20 days (for 20 videos to be generated) before releasing it to the public.

For those interested, you can download the project files from this repository. Feel free to use and modify as this project is released under a Free Art license and let me know if you make anything of it.

And while I was writing this post, Youtube announced me the latest video, “Episode XXVII”:

“moDernisT” et le fantôme du MP3

moDernisT

moDernisT” a été créé en récupérant les sons et images perdus lors de la compression en mp3 et mp4. La bande sonore est composée par Ryan Maguire à partir des pertes dues à la compression du morceau “Tom’s Diner”, de Suzanne Vega. Ce morceau n’a pas été choisi par hasard puisqu’on appellera plus tard son interprète “la mère du mp3“. En effet, Karlheinz Brandenburg, l’inventeur du mp3, a utilisé ce morceau comme référence pour paramétrer son algorithme.

La vidéo a été réalisée selon le même principe par Takahiro Suzuki en réponse à la piste audio, mais à partir des pertes d’image du clip en compression mp4. Les deux fonctionnant donc comme des “fantômes” de leur versions originales compressées.

Les petit(e)s malin(e)s auront noté que la version présentée dans ce clip Vimeo est compressée également. C’est pourquoi Ryan Maguire propose d’acheter le morceau non-compressé au prix que tu veux.

The Ghost in the MP3

Merci à Vinz pour la découverte.

Dessiner contre une fourmi

fourmi-dessin

Un petit jeu de dessin avec l’aide involontaire d’une fourmi. J’ai tendance à penser que c’est un petit peu cruel, mais en même temps mon esprit pétille à cette possibilité créative.

Quando il limite è soltanto una questione mentale :)

Posted by Blogo on Saturday, June 27, 2015

Si la vidéo ne s’affiche pas, le lien vers la video est ici.

Via Milady Renoir.

Star Wars blended

All 6 Star Wars

All 6 Star Wars films, blended together on top of each other, is a brilliant readymade mashup of this iconic universe by Georges Lucas. To me, it sounds like the perfect thing to display at the next VJ fest, as is. It also produces beautiful stills that any glitch/collage artist should be jealous of. But now that it’s done, you can move on. Just keep this in mind for your next costume party based on movie themes.

The full movie (enjoy until the take down notice).

Some stills taken from this extended gallery.

PTEgWlw - Imgur

Fqjkrty - Imgur

FR5T9po - Imgur

RRDscsv - Imgur

Via @johnmaeda

Constant V (Venster/Vitrine)

Ami Bruxellois, ne loupe pas l’occasion ce vendredi jeudi (18/06/2015) d’aller voir la vitrine de Constant. Tu y seras bien reçu et tu pourras même y boire un verre. De plus, c’est juste à côté du Verschueren, si jamais ta soif était trop grande.

Constant V - uHbench

Je t’invite à y aller, pour découvrir Constant et pour y pêcher un petit manuel afin de construire toi-même un banc public à partir d’une palette. Tu pourras même t’essayer à la fabrication puisque du matériel sera prévu sur place.

L’atelier sera chapeauté par la main experte de Barbara Janssens.

Constant V (Venster/Vitrine) est une série d’exposition dans la vitrine de Constant. Les objets, les dessins, les vidéos, les installations et les expériences exposés sont sous licence libres ou ils ont été créés en utilisant des logiciels libres.

Constant V (Venster/Vitrine) is een reek tentoonstellingen in de vitrine van Constant, De kunstwerken variëren van Open Source objecten tot video, design, en artistieke experimenten met vrije software.

Constant V : uHbench
Expo: 18 – 28 juni/ juin 2015
Perfo + drink: 18 juni /juin 2015
CONSTANT, RUE DU FORT 5, SAINT-GILLES

#uHbench map

A map of known places where urban hacker benches have been built.

uHbench map
A workshop and exhibition of the uHbench project has been scheduled in Constant VZW at the end of this week. For that, they’ve asked me to produce 2 posters that will be displayed along the benches built for the occasion.

One of the poster was obviously going to be the instruction sheet. But for the second one, I hesitated for a while, and finally set up for a representation of how far this project has reached since it’s creation in 2012.

Because thanks to the open source nature of this project and the support it received − not only from friends but also from members of diverse communities  all over Europe −, this project has traveled further than what I would ever imagined. So this map is, of course, a little self-flattering, but I do hope it creates a sense of community beyond borders for those who participated and maybe will encourage some to add their mark to the map.

The vector map is here: http://xuv.github.io/uhbench-map/map.html

For the technically minded, the map was done using the wonderful D3js library. Which I was discovering for the first time but enjoyed a lot (amazed by its possibilities). The code for this project is shared on Github.

− Have you built a uHbench? Want to have your instance on the map?
Add an issue with the name(s) of the builder(s), location and date or clone the repo and update the data.tsv or send me a mail with those informations.

Blender shortcuts right in your search engine

Blender Cheat Sheet

Two months ago, I attended a community meetup in NY called Quack & Hack. The point of it was to gather people around coding to improve the DuckDuckGo search engine.

If you don’t know DuckDuckGo (DDG) by now, it’s the “search engine that does not track you”. And it’s been my tool of choice when I want to search something on the web. It has nice features like the !bang mechanism and the instant answers which I find really handy. But most importantly, I feel good not being followed by an all seeing eye like You-Know-Who.

Another great thing about DDG, is that they have a program called DuckDuckHack where they invite coders to submit improvements to the search engine. These, if approved, end up for example as being new instant answers. I, personally like the weather one, the password generator or the Gimp cheat sheet. But they have many many more. It’s impossible to know them all.

So, as a user and fan of Blender, I thought it would be nice to have the crazy number of shortcuts for that open source 3D software directly available in my search engine of choice. It would not only be helpful to me, but maybe also to the larger Blender community. And in the end, it might also have some of those Blenderheads care a bit more about not being tracked when they avidly search for the latest hot features of Blender.

In the end, the process of getting those shortcuts live on DuckDuckGo took longer than I expected. But it’s now live since yesterday. So try it out and search for “Blender cheat sheet” and tell me what you think.

You can take a peek at all the effort it took by looking at the conversation I had with the DuckDuckGo team on Github. What mainly happened is that I first submitted a “Blender Cheat Sheet” using the classic way for submitting instant answers and during that period, they were working on a different one, which would be easier just for submitting “cheat sheets”. So I had to port that to the new system, and adapt the code until their new stuff was stable and ready to ship.

But I’m glad to have gone through all this. It was an interesting experience to work with the DuckDuckGo team, a nice and friendly crowd. It also feels rewarding to know that my little contribution might hit thousands of users. And I’ll be glad to have that feature in my toolbox when I’ll be giving the next Blender workshop here in NY, at the end of June.

Blender Cheat Sheet all

I finished Facebook #orSoIThought

Facebook High Score Animation

On May 27th, I’ve finished The stupidest game on Facebook. I was silently running this little self-amusing game since the 15th of May and then, later on, opened the process publicly. In the end, it took me less than 15 days to fill up to 99 the most famous 3 icons that you find on the top right corner of Facebook… on a desktop browser.

99+ 99 99 So that’s what it looks like. No cheating. No Css rewriting. No photoshopping. And as a proof, I was screen grabbing the page every 2 hours from the mobile version of Facebook. (Actually, I did not set that up for this project specifically. It is a part of my LoveMachine project, which has been running for more than a year now: I take a screenshot of Facebook every time the bot runs, mostly for debugging.)

So today, I looked for the first time at all these screenshots and especially the ones corresponding to this period and to my surprise, I’ve found out that the stupid game does not work at all on the mobile version of Facebook. If the highest score on desktop is clearly 99, I have no idea what the limits are on mobile. (On the top of this page, you can see the gif created from all the screenshots.)

This is of course very disappointing. It makes the game a little useless, or at least, not multi-platform, as games should be these days.

Anyway, I guess that closes the challenge. I have other plans for the monster than trying to reach 999 or whatever the limit is on mobile. If any of you is up for the mobile challenge, please drop me a line. I’d be interested to see your results.

As a happy note, and to close this chapter, I found out that when the score of unread private messages reaches 99+ in the desktop browser, it resets the counter by itself. Which, to me, is obviously a bug. So, as a joke, I posted a status about it and tagged the Facebook Design team in it.

Facebook design response

They replied.