Virtual View: developing animation

The past month I’ve been working on my landscape animation. By chance I discovered a great book by Daniel Shiffman called The nature of code. The book explains how to convert natural forces into code. I’m working through the book picking the forces and algorithms that suit my needs. So far the noise function in Processing has proven very useful. It allows for creating more natural variation (as opposed to the random function.) I use it in creating the landscape horizons and some forms of animation.


Test for creating hills with Perlin noise

In a previous post I described how I calculated the colours used in a woodblock print from Hokusai. Since then I have discovered the colorlib library. A super fast library for creating palettes and gradients from existing pictures. You can sort colours and manipulate the palette using various methods. This means I can change my colours dynamically depending on user input.

Colorlib palette from Hokusai picture. Sorted on the colour green.

Colorlib palette from Hokusai picture. Sorted on the colour green.

Apart from working through the book and creating basic animations I’m working on the look and feel of the landscape.

As I explained earlier this is based on the work of Hokusai. To my delight I discovered that a colleague is one of the few Dutch experts on Japanese woodblock printing, having received training in Japan. On top of that Jacomijn den Engelsen is also an artist whom I’ve admired for years. I met with her yesterday in her studio to learn more about this fascinating technique.


Jacomijn demonstrating the Japanese woodblock printing technique.

The characteristic look of the pieces comes from the use of water based paint on wet rice paper. For every colour a separate woodblock is used. The typical black outlines are also printed from a separate block.

Screen print from animation. Colorlib gradient used for sky and water.

Screen print from animation. Colorlib gradient used for sky and water.

The prints have a very flat, 2D feel. That is what I like, it is a kind of primitive picture of a landscape. The view people will be seeing won’t be a 3D simulation of nature but an artistic representation, a work of art with healing properties.

I’m not a painter or draughtsman so I was very happy with the tips Jacomijn gave me on how to make the landscape more convincing while still keeping the ‘Japanese flatness’.

Virtual View: colour pallet

I’ve written a little program to create a colour pallet for my landscapes. At the moment I’m studying articles on animation. Again they lead me to Japanese and Chinese drawing and block printing. I wasn’t planning to go there but there is such a strong link between my views on nature and eastern religious and philosophical traditions that it is just the most logical and pleasant route to take for me. I’ll dive deeper into this is my next post.

Below you see a scan of a Japanese block printed landscape by Hokusai. I like the colour pallet and I was wondering if I could find and easy way to just use the colours in my animation. After some programming (it’s been a while…) I’ve managed to extract the unique colours from the picture and display them. There are over 114000 colours in this picture! I’ve reproduced the original picture on top. It is so nice to see how just plotting the colours already creates a something that resembles an abstract landscape.


This piece of code enables me to extract all the colours from any digital image and use that as a basis for my computer graphics.

Non-emissive displays v2

Transfering from template to fabric

Transfering from template to fabric

The last couple of weeks I’ve been continuously working on the wiring of the displays. The first challenge was to prevent the naked wires touching the conductive fabric underneath. In the morning I had another brain wave: I should isolate the wires instead of the fabric. After talking to the salesman in my favourite electronics shop I went home happy because he showed me some nice silicon tubing and cables that I could use. The cable (with its contents removed) was still rather thick. I couldn’t iron it onto the displays. So I went for finer tubing which I could buy from my shop in a nice set with different sizes inside. This wasn’t enough by far so I ordered another five meter online which was only just enough…

I figured out the different amounts of resistance needed for the different ring diameters. The smallest rings now use very thin wire that has a resistance of 44 Ohm per meter. Rings 2 are a resistance of 10 Ohm. Rings 3, 4, 5 and 6 use the 6,9 Ohm wires that I started out with. The two biggest rings are 2,5 Ohm. This way I can keep the heating times together and not make them too long.

Attaching the wires

Attaching the wires

First I shaped the wires onto a paper template to determine the lengths needed. Then I isolated them and uncoated the end parts of  the ones that had a lacquer coating. Then I embroidered the isolated wires onto ordinary fabric making sure that the connection parts were sticking out at the back. Connecting the resistive wire to the common wire using the terminal tubes was not as easy as I expected. It took quite a lot of squeezing and re-squeezing. I secured the connection parts with yarn to make sure they can take a certain amount of pulling. The whole strip of cables I secured with glue from a glue pistol.

The final bottle neck was the code. I’d been struggling with that for weeks. Mainly because the internal workings of the shift register remained unclear to me. I kept thinking that I needed to shift all the positions to get the outmost ring to light up, working with endless loop variations. I finally asked help from Marius again. He is a real hard- and software wizard. First he corrected my code by mail to make the outmost ring light up. It appeared I didn’t need a loop at all. He just pulled the byte values from the array…
As there were also some hardware problems he was kind enough to come over. He rewrote my software (that took me weeks) in 15 minutes! The code is now completely dynamic (and highly compact) using one big loop for all three displays.
We did some measuring and it appeared that the displays, when heating four or more rings on all three displays, use 10 Ampere which the batteries can’t really deliver. They should but they don’t. Which causes the voltage to drop. So I’m considering using a battery from an electric hand tool, a drill for example.
But for now I’m very happy with what I’ve got. It works and the concept is clear. I’m ready for the photo and video shoot upcoming weekend.

Displays in action

Displays in action


Michael finishing the vest

Michael finishing the vest

I’m working towards the closure of the demo version. The tailor had finished last week and most of the wiring was done. With all the custom print boards the vest has turned out rather stiff and armour like. Not very comfortable… The boards are a little bigger than expected and the flat cables that connect the boards are also a bit rigid. I’ll have to fold them and perhaps use some glue to make them stay compact and flat.

Me working on the wiring, photo taken by Richard

Me working on the wiring, photo taken by Richard

I had to attach the last few wires connecting the buttons and the nice switch I made for the 7.2 Volt battery pack. I still don’t know what I did wrong but as soon as I switched on this battery pack I started smelling something, I looked at the battery pack and it was melting! Well, some wires were definitely crossed… I decided to call my friend Richard, a programmer and electronic engineer, to help me with the final wiring and the code for driving three displays instead of just one. He was very kind to help me on a Saturday.
We had everything connected and had uploaded the program which worked. Instead of the conductive fabric rings we used the board with LEDs for testing purposes. But alas non of the LEDs would turn on. Wanting to check the serial monitor while running the program we kept the FTDI board for uploading attached to the Arduino whilst also connecting the 6 AA batteries. Again a bad smell and smoke. I’d fried my FTDI board. But I only discovered that later when I tried to upload the improved software for three displays. So I had to order a new one which again held up my progress for two days. The gentleman from the shop said I’d also ruined my Arduino but that turned out not to be the case. I took the opportunity to improve the wiring and make all the pins pluggable.

Now I’ve got everything set up right. I’ve adjusted my code to make the status LED blink every time bytes are send. The software works but at some point there’s a problem with the hardware. I’ll be paying Paul a final visit tomorrow to sort this out. Then I can work on the code again and do a simple video on Saturday.

Test set-up with Arduino Mini and LED boards

Test set-up with Arduino Mini and LED boards

I made some recordings earlier this week but it is just too cold to film. The batteries die very fast. Another thing I’ve discovered is that it’s very hard/impossible to heat up the bigger rings when the temperature is below say 15 degrees. I’ll have to postpone the recordings until spring comes.

Death by deadline?

I’m on the train to Den Bosch to meet my tailor and finish the fabric side of the vest. At least, I hope so because the deadline is fixed. This weekend, weather permitting, I’ll be shooting the video. The demo version of the vest must be working then.

The last couple of weeks I’ve been working on the displays. Trying to figure out why some of the rings wouldn’t light up properly. I’ve discovered that it’s a power issue. The engineer now has another theory: by forcing the power to make a circle the whole ring will light up. I’ll be picking up the new print boards he has etched and the displays and I will have to restart testing the times and power needed. Also I’ll have to work on the rings, cutting them in two and soldering at new points.

Working on the code with Pauls custom made print boards

Working on the code with Pauls custom made print boards

In the mean time I’ll have to finish the software driving the displays. Its’ function is to display a fake low and high pollution for all three gasses using random numbers in every occasion after the wearer pushes a hidden button. Putting it down in one line of text it looks so simple but I’ve been working on it for a week. Trying to grasp the concept of shift registers and working  with a row of LEDs as stand-in for the displays. I’ve got the random low and high working for one gas. I’m rather proud of my solution for bridging the difference in times between the small and the big rings.

if (millis() – previous_millis >= co_times_array[l]-co_times_array[l-1] ){
   Serial.println(“array time “);
   // update l
   // turn on next LED
   data += data_array[l]; // increment the bytes
   // reset
   previous_millis = millis();

With this code the outer most rings, with the longest heating time, get power first. The program counts backwards so that in the end all rings are lit up and are switched of simultaneously. The final step is driving all three displays simultaneously, each with their own random amount of rings and timing. I’m working on that at the moment. All times should be corrected depending on the temperature. I’ll probably work on that after the video shoot.

I’m on my way back from Den Bosch. Michael, my tailor, worked very hard all day. We’re nearly finished. It’s looking very nice, although a bit big for me. Right now the decorations are very prominent, pushing the displays to the background a bit. I’m very curious to see how this balance will be once the displays work.

Putting together the vest in Michaels shop

Putting together the vest in Michaels shop

But it’s just so good to see it coming together. Thursday we’ll be finishing the sewing and put the wiring together. Some tests will be necessary too. Then the finishing touches on Friday and then the video in the weekend. I keep my fingers crossed for the weather…

Day by day

I’ve just finished the interface for browsing the work day by day. It took much more time then anticipated. This was because as soon as I jumped to another day the program started slowing down to an unacceptable level. I had to figure out why that happened before I could carry on. Finding that out and fixing it took me about five hours!

I finally discovered that a drawing new heart-beat graph slowed down the program because it got bigger with every new day you clicked. This graph is build up from thousands of dots and lines. To make the animation go faster I had to remove those first. But I put them in the wrong place so I couldn’t remove them. I had to rewrite the code for building the graph so I knew where all the lines and dots were and then I could remove them. Now with every day you pick the old graph is removed and a new one is drawn and the speed stays the same.

On the net I found this really nice code for adding listeners to the seven buttons in a dynamic way:

addEventListener(MouseEvent.CLICK, mouse_click);
function mouse_click(event:MouseEvent):void {
var object_name=String(;
for (var i:int = 0; i < 7; i++){
if (object_name == day_btn_array[i])

So instead of writing all the listeners by hand I now only have three eventlisteners (only one is shown here.) With every click the function finds out what button was clicked. It calls the appropriate function and passes the original click event. In the called function I again retrieve the name of the button from that event using again.

It works!

Collumns with time, unused data and beats per minute

Columns with time, unused data and beats per minute

I’ve made myself very happy tonight. I decided to write the code that invents the data from the Suunto watch, that was lost yesterday. I wanted the date and times to be right but the beats per minute would just be 10 everywhere. The strangest thing happened when I was programming. I didn’t understand quite what I was doing I just followed the logic without actually using my brain the way I usually do. Step by step I worked through the hour, minute, second and day numbers. They of course have to be incremented with 1, 1, 10 and 1 when they’ve reached a certain value. So when the minutes and seconds are at 59 and 59 a new hour must start and their values must be reset to 09 and 00. I typed it out and it worked the first time! The I only had to add the leading zero for minutes and seconds. And now I’ve got myself 4158 lines of fake data from my Suunto watch :) I can use this to prepare the big data file which holds all the data for that day.


prototype of the first heart-beat graph

prototype of the first heart-beat graph

I’ve managed to code my first heart-rate graphic. And it’s CUTE!
By looping through the big data file I can isolate the heart-beats, take the different values to draw lines and put in the dots at the right coordinates. The next step is to draw a big graph in Flash and move it to the right at certain intervals (500 milliseconds for example). Now it still is a drawing that is animated from left to right. It disappears from view after a while, as you can see in the picture.

Meeting at Barbara’s

26-06-2008 from 11-15.30 @ Barbara’s, present: Anja, Barbara, Danielle (from 11:45)

We had a great time testing the new heart-rate sensorand combining our results into a graph. Our heart-rates varied from 61 to 84 (we had the Suunto watch as a back-up) but although the graphs looked very different when we counted the dents the values seemed the same. So in the train I started to program a little program to count the differences in the values. This is what it looks like:

// process_data.pde look for differences between numbers
int counter = 0;          // count the differences
int old_val = 0;          // stores previous value in csv file
int current_val;          // stores current value in csv file
int dif = 1;              // difference between 2 readings, change the number to look for bigger difference between numbers
// read csv file
String lines[] = loadStrings("output_org.csv"); // change the name of the file to read from
//println("there are " + lines.length + " lines");
for (int i=1; i < lines.length-1; i++) {
  current_val = int(lines[i]);
  // look for difference
  print("dif= ");
  print(current_val - old_val);
  print(", ");
  if (abs(current_val - old_val) >= dif){
    print("counted dif= ");
    println(abs(current_val - old_val));
  // make current value the old_value
  old_val = current_val;
println("bpm: ");

What I discovered is that you look for a difference of 1 the count is too high and when you look for a difference of 2 or more the count is too low. When you add these two counts together you and divide them by 2, 2 out of 4 times you get the right value!?
I now want to change the program so that the size of the difference is taken into account.

Here you can download the xls files with our data and here you can download the program above with text files which you can import.

The next step will be to

  • Improve the counter program
  • Make a design/prototype for the sensor
  • Change the potmeter to a resistor

Our next meeting will be either the 24th of July or the second half of August.