Sander Sturing

the Jōyō-Kanji with brightness linked to the strokecount

I love playing with data and I love Japan. So choosing kanji (one of the characters systems in the Japan) for my research assignment wasn’t a hard choice. The beauty of kanji for me lies in the contradiction between the (sometimes) poetic meaning of the characters and the systematic feel of the whole set. All the data about the kanji is written down: in what grade one should learn a character, in how many combinations the character can be used, how many strokes should be used to write the kanji and in what order they should be put down.
I started learning the kanji a couple of weeks ago using the Heisig system. This system is created by James W. Heisig used in his book ‘Remembering the Kanji’. This system mainly focuses on the visual appearance of the characters and really tries to see the Kanji as building blocks. You learn a character and after that you will learn characters where the original character is a part of, in shape and meaning. The Japanese don’t really use this kind of system. They only use one basic shape called a radical to divide all the Kanji in seperate groups.

Kanji with lines drawn to other Kanji with the same radical

I used this visual, building block system as my starting point and was looking for a way to make this visible. I wanted to build an interface where one could browse through all the kanji using this Heisig system, so it would be clear that there ‘are no complex characters in kanji’. I know this is not really true, but in a way every kanji always consists out of a small group op basic shapes. So no difficult pictographs with lots of scribbly lines, but different components put together to create a new meaning. I called it Kanji Breakdown:

A simple Kanji Breakdown

I really wanted to make these different layers visible. So the character for ‘dr.’ is created out of two components; needle and speciality. This sounds pretty logical. The character for ‘speciality’ itself is also combined out of components. For some Kanji this breakdown goes as deep as 7 or 8 steps.
The story for this kanji is a little bit more abstract, but when you think of a needle as a very tiny precise point into a certain field, ‘speciality’ doesn’t sound as strange anymore. It is good to remember that these aren’t the official stories behind this kanji, but they are mainly used to help one remember the kanji visually and by its meaning.

I knew I wanted to visualize this system, but there wasn’t exactly a complete dataset floating around besides the book itself. So a big part of my work was to insert the correct data into the database. I created some very simple (and ugly) programs to help me fill up the database with data I read in the book.

PHP-script to insert the kanji with its components according to the Heisig system.

and this program to help me save the position of every component within a certain kanji:

PHP + jQuery script to save the position of a component within a kanji

I only had to drag a box around the component and the size and location was stored inside my database. With this data now at hand I started looking for a way to visualize this system.

8 layers of kanji

It seemed quite logical to place the 2048 kanji into a 3D-model, because of these ‘complexity layers’. The level of complexity in this screenshot goes from left to right. Every kanji on one layer always has at least one component coming from one layer to the right. The kanji in that layer also has at least one component which is stored in the layer to its right, and so on. Lines are drawn between these components and compounds. The layer all the way to the right is a special layer. It consists out of characters which aren’t really kanji itself (i.e. you can’t write them as seperate kanji) but Heisig uses them in his system as building blocks for other kanji.

front-view of the 3d-model

The project is presented on a 40+ inch touchtable where people can play around with the 3D-model. An interface to the right (not shown in these screenshots) is used to travel from one kanji to another using its components or compounds. The whole 3D-model rotates around the selected kanji and shows all the possible next steps where one could go to next (all of the current selected kanji components and compounds with their translation).

Some documentation of my research assignment. The final project runned smoothly on a iMac and was shown on a 40 inch touchscreen. You could browse through the kanji with the navigation on the left.

And some posters to make the place around the big touchscreen look pretty.

Als praktijkopdracht werd ons (Joost de Nooy en ik) gevraagd de site van Zefir7.nl te herbouwen, zowel de voor- als achterkant. De algemene ‘feel’ van de site hebben we geprobeerd hetzelfde te houden als de vorige site aangezien deze ons erg aansprak. Een soort simpele, lompe en overzichtelijke uitstraling, maar in zijn eenvoud toch elegant. Het belangrijkste van de site is het archief met alle lezingen die gehouden zijn vanuit Zefir7 in het zeebelt-theater in Den Haag.

We zochten een handige, elegante en inventieve manier om door dit archief te navigeren. Een combinatie van een scroll-interface waarbij men op verschillende manier door het hele archief kan gaan (scrollen naar een spreker of een bepaalde datum) en een overzichtspagina die als een filter werkt moet zorgen dat bezoekers op een leuke en makkelijke manier bij een bepaalde lezing terecht komt.

Nog wat algemene toevoegingen (info-pagina’s etc.) en een minimalistische moderne uitstraling maken de site compleet. Er staat hier een voorlopige versie online, zodra de volledige site online komt volgt er uiteraard een link.

A Sound Portrait showing one of the participants, Serkan.

Before the Graphic Design Festival in Breda would kick of, an OpenFrameworks-Lab was being held in the Graphic Design Museum. For one week, 30+ people from all over the world would work with OpenFrameworks, lead by Zach Liebermann and Todd Vanderlin.
Inspired by words as ‘analog’ and ‘glitch’ and the theme of the festival ‘decoding’ we (Jasper van Loenen, Bart van Haren, Tiemen Rapati and me) started working on a system which would send data from one place to another by a physical route. A webcam-image was being converted to sound, pixel by pixel, and was received by another laptop which would reconvert the sound back to an image.

A test outside

With this technique we created 11 ‘sound portraits’ which are shown at the Graphic Design Festival. Every portrait is made by sending data at 30 pixels a second, and took 6 minutes each.

And finally we sent a ‘high resolution image’ with a mouth-dropping resolution of 640 x 480 pixels. It took the two MBP’s a little over 3 hours to send this one image. The laptop displayed in the middle of the screen actually is the MBP which generated the image.

During a couple of days I saved all locations of people who added an advertisement on marktplaats (Dutch ebay-like site) in the category ‘watersport’. I placed these locations as circles in processing, and started to draw lines between locations which are close to eachother. By doing this, some sort of watersportmap of the Netherlands is drawn. I was curious if advertisements on such a site were location-based, and it seems that this is true (at least in the case of watersport). The big cities in the west are ofcourse clear visible, because a lot of people live there. But you can also see the big rivers in Holland, and the provence of Friesland (in the north) which is the most famous watersport-area of the Netherlands.

To collect a dataset which had something to do with time, I wrote a little script which saved all advertisements in the category ‘cd, dvd & vinyl’ on marktplaats (Dutch ebay-like site) for 24 hours straight. I placed all these advertisements on a timeline. The three different categories are shown in different shades of green.

The poster consists of 4 blocks of 6 hours, and shows how a typical day flows on marktplaats. Especially in the morning, during lunchbreak and after diner are the busiest parts of the day. The title links to the fact that even in the middle of the night, people add new items to marktplaats.

For the Todays Art festival in 2009 our class made an audio-visual installation. It was displayed inside the royal library in the Hague. The theme of the TA-festival was ‘conflict’.
Since the very moment paper press was invented, type has been a weapon, with paper being the battleground. The recent shift towards digital media has expanded and intensied the written warzone even further. The audio-visual installation named Typographic Gun explores the subjective potential of the written medium. The library becomes the epicenter of a conflict between two opposing texts, opinions or ideals. The subjectivety is hidden behind interpolating typography, alternating at 5 to 20Hz, melting the two channels together, but at the same time generating the conflict by means of anticolors and after image.

Any spectator can choose to block out any of the information streams by means of a color filter. And every book that has been loaded into the system produces its own unique soundtrack, converting sentences to a rythm of microtonal sound that add to the conflict experience.

A new flag for Europe (actually the Europese Union). For me Europe looks like a greate whole from the outside, but from the inside its nothing like that. I am Dutch and I don’t feel like I’m a fellow-countryman of a Polish person. Its a mishmash of different people from different countries. For me Europe is an organized chaos.

First sketch with a mashup of European flags

First attempt to order them on color (green - blue - red)

I started to indexate all the flags of the EU, and saved all the colors. I saved them into 6 colorgroups: black, white, red, green , yellow and blue. I also saved the percentage the color appeared on the flag, and the rgb values. This because the red on the flag of France isn’t the same red as the flag of the Netherlands.

I wrote a script which tried to place colors from the same colorgroup together. Every loop in the code took a pixel with the color of one of the colorgroups, and tried to place it randomly, but as close to another pixel of the same colorgroup. If it had to search for too long thesearcharea expanded.

In the final version the proportions between the colorgroups are the same as the proportions between the colors of all the European flags. In other words if you add all the flags of Europe together, there is indeed more red than green. Also the percentage of real colors is the same: There is more red of the Polish flag than red of the Dutch flag. Because the pixels were placed semi-random, everytime you run the script a different flag is drawn. From a distance it looks like a nice flag with 6 different colors, but up close it’s a chaos of different shades.

The European Union, an ordered chaos.

The flag is exactly like the European Union. It looks like a nice whole, but it’s really a mess of differences fighting for a spot.

The final (interactive) version

This is a visualisation of all the zipcodes in the Netherlands. It only uses the four digits of the Dutch zipcodes. With PHP I queried Google (Maps) to collect all geolocations of the (6000+) zipcodes.

All geolocations found by google maps (with some minor errors...)

In processing I started visualising this data. Every circle stands for one zipdcode. In the final version, larger circles are drawn if there are more zipcodes in one city/village. Older versions contained lines between towns which are in the same municipality. I tried to make something beautiful out of simple and boring data.

Lines are drawn between towns which are in the same municipality

Sometimes errors and bugs give you the most amazing result:

Error in my code...

The ‘zuidas’ in Amsterdam is a strange place. It’s full of office buildings and empty plaza’s. In the evening the zuidas is completely abandoned because all working people are at their home. But still the city counsil wants to transform this area into a sparkling livable part of the town. Together with students of the University of Amsterdam (VU) who did a study about architecture, we were asked to create a plan to achieve this.

I teamed up with Tiemen Rapati from my class, and two students of the VU. We were really surprised about the ‘nature’ in the zuidas. Especially one this particular plaze where some trees were placed in a grid. This trees weren’t planted to bring the nature back in the zuidas, but because it was to windy on the plaza. But since there was a cycle shed underneath the plaza you couldn’t plant trees the normal way, so giant plant troughs were placed. These are completely computer controlled and make sure the trees have enough water. After a couple of years the trees are removed, and new trees are placed. is this nature? We don’t think so.
We started to indexate all the original functions of nature. We came up with 13 functions like ‘shelter’, ‘shadow’ and ‘meeting’. Our question was ‘what is nature’ and so we decided to indexate everything in the zuidas as nature. This way a shed could have the same natural functions as a tree.

We started by building a system in which we could fill in everything we want into a database. This was saved along with the coordinates of this piece of nature.

Our presentation consisted of 2 models of 2 different area’s in the zuidas on which we projected a searchsystem. The system was made to find the best place for you if you are looking for 1, 2 or 3 of the 13 natural functions we used. A line showed in what direction you should move to find the ‘piece of nature’ where you could find it. The color, and the thickness of the line stand for the amount every place should fulfill your natural desires. We made a complete abstraction of ‘nature’ because every place could offer the same natural functions.