Lauri
Kainulainen
M.Sc, MA

design,
code,
experience,
art,
electronics,
interaction

x

The Angry Birds Space Launch site

pushing web technology to its limits

The Angry Birds Space launch site was created by us at White Sheep Isobar. It promoted the new Space game of the Angry Birds series worldwide. A separate Chinese site was built in addition to the English language site. Both sites had a lighter mobile version that also acted as a fallback for older browsers lacking proper support for the animations. The main site was also built to be touch friendly working on tablets such as iPad 2 and 3.

I implemented the main site including the custom bezier-based path scrolling and triggered HTML/JS/CSS3 animations.

x

Dotted Landscape

Web meets electronics meets Scandinavian aesthetics - MA final production

An interactive light installation and software project. The central piece is a light panel that can be controlled collaboratively through a web interface.

Created as the Master of Art thesis work at the Media Lab of Aalto University.

Check the written portion focusing on the design of interactive displays for public spaces or dive into the freely available code.

x

100 Dancers festival

interactive projection performance

100 Dancers is a festival and workshop arranged annually in different locations around the world. During a week a large group of dancers from around the world arrange public performances around different central locations in towns. These performances are often improvised in nature and unexpected for the spectators.

The dancers are accompanied by musicians, photographers, video artists and people specializing in interactive installations.

Our group of four developed visuals for the Grande Finale of the 100 Dancers festival held in Copenhagen on 5th August 2011. The visuals were created during the festival week on-site and a large part of development was learning how we could best collaborate with the dancers. The projection was shown in Christianshavn, on the largest wall Copenhagen had to offer.

x

Archive Flow

synchronized display space

Eight displays, five computers and four speakers were deployed in a hallway to present a vast amount of video, text and images to museum visitors. At certain intervals that were also affected by people entering the space the continuous flow of information was interrupted and all the displays started to play the same video with audio surrounding the user in the space.

Presented during the TaiK 140 years exhibition at the Helsinki Design museum, the installation showed highlights and important moments from the history of the university. Text content was used to inform about nearby events and upcoming workshops.

Created with Gökce Taskan and Niko Knappe. The setup runs on top of custom code and commodity hardware. One of the showpieces for Reuna Bureau.

x

History Flow

visuals controlled by physical interaction

History Flow provided an introduction to the visitors of the Taik 140 exhibition. As they rose up the stairs leading into the exhibition space visuals projected on the opposite side of the stairs showed highlights of the university history. The first step started with the creation of the facility and with each step progressed towards the current day.

Several people could walk the stairs simultaneously, each having their own moment in history.

Created with Niko Knappe and Gökce Taskan. The piece runs on top of a Mac mini using a regular web camera and projector. The software used is all custom code. Also showcased on the Reuna Bureau page.

x

Penalti

collaborative mobile gaming

A mobile programming workshop at the Media lab expanded into a quick game project. PENALTI is built for the S60 phones using the Python programming language.

The goal is to race a ball through a course as fast as possible by tilting the phone. While this is a fairly normal game mechanic, the real innovation comes from the form of collaborative game play: as soon as the ball leaves your screen it lands on the screen of the next player and he has to continue as quickly as possible to get that fastest lap that you want.

The game was submitted to the Nokia Game Competition and won best of TaiK

x

Jorma the Skeleton

the curious undead

Jorma is the mascot-like skeleton representing Levykauppa Äx. In the past he has mostly been involved with film directing and production, but with Niko Knappe we decided to help him get more involved with the day to day affairs at the store.

With the help of an Arduino microcontroller, some stepmotors and wiring we gave him muscles, and a custom OpenFrameworks program written in C++ gave him eyes and a brain. Now he hangs around the shop following customers go about their business.

x

Raflost 2009 Performance

interactive dance performance

An interactive performance involving dancers, electronics, visuals and reactive sound environment. Displayed during the Raflost festival in Reykjavik, Iceland.

Two dancers performed in front of an audience with the moon surface in the background. The audience could control the level of the moon by raising and lowering a lever placed between them and the dancers. In addition to affecting the visuals, this also changed the soundscape.

Custom software took quick captures of the dancing motions and ran them in a loop, resulting in a stop-motion-style visuals of dancers on top of the moon surface.

x

Medialabbers made of medialabbers

image analysis and visuals

To experiment with an idea, I took all the images of members of Helsinki Medialab and created a Python script that analyses them producing new versions created by using the images of other people.

The software takes two rounds first analyzing each image individually and then creating each image based on the analysis of the previous round.

x

Academic work

papers, articles, etc.

Dotted Landscape (MA thesis)

Master of Arts final thesis work dedicated to the design of interactive displays for public locations. What are the UX challenges involved in designing public displays and what methodologies can be used in design? See the dedicated project section above for more information into the production portion of the work.

Making Existing Homes Smart (M.Sc thesis)

Master of Science thesis that deals with the implementation of current smart home systems from the user's perspective. Are the current projects and products something that people actually want and need or are they just in the interest of the researchers themselves? What would be an ideal smart home solution?

Reasoning in a Smart Home

A short paper dealing with different artificial intelligence solutions around the domain of smart homes

Tackling Smart Home User Requirements with Agent Based Technology

A research into the suitability of agent based architectures in the building of smart home systems


SHOW: ALL | BY TAG:
27.08.2012 20:28 Fetching comments

Finally I've had the time to update the site. Since last time there's the award winning Angry Birds site as well as Dotted Landscape - my thesis work that has kept me busy for a year and a half.

Also some notable projects we've cooked up with the Reuna crew are here now. Archive Flow and History flow are worth checking out. Hopefully I'll get a chance to do more of these in the future.

Also I've been playing around with Beagle bone - a hacker friendly SOC Linux computer. Here's an image of a latest few hour hack based on my Python Thermal Printer library. It's a Ghetto polaroid camera. Flip the switch and it'll take a quick photo and print it out with the thermal printer.


Ghetto Polaroid!
Ghetto Polaroid!

15.11.2011 11:55 Fetching comments

Recently it became obvious that Intgrlab, the software company we've been building since early spring, doesn't have any development work in the pipeline. Hence there is no work for me - the guy who hasn't bothered with the consulting side yet.

So I decided to start looking for new stuff! There's loads of interesting opportunities out there. For this I've finally sat down and updated this site (less clutter, contact section) to use as a portfolio and updated my CV to match my current skills. Check 'em out! Also if you happen to know anybody who needs a hardcore dev / designer.. drop me a line!


19.02.2011 17:30 Fetching comments

Why on earth would you want to do that? My reason was that I needed to draw SVG in Processing.js. So I took a simple flat SVG with filled polygons and converted it to JSON, which then is drawn by PJS. Here's the Python JSON extraction snippet.


#!/usr/bin/python
''' 
    Convert a simple svg to a bunch of javascript
    arrays that can be drawn in code
    stdout get the json
    stderr print some information helpful in the js code
    
    @author Lauri Kainulainen - lauri.sokkelo.net
'''

import sys
from xml.dom import minidom
import simplejson

if len(sys.argv) < 2:
    print "usage:", __file__, "SVG_FILE"
    sys.exit(1)
d = minidom.parse(sys.argv[1])

points = []
minx, miny = 10000, 10000
maxx, maxy = 0, 0
amount_of_polys = 0
for c in d.childNodes[1].childNodes:
    if c.nodeName != '#text' and c.tagName == 'polygon':
        coords = c.attributes.get('points').value.split(" ")
        polygon_data = {}
        polygon_points = []
        for coord in coords:
            x, y = coord.split(',')
            x, y = float(x), float(y)
            minx = min(minx, x)
            miny = min(miny, y)
            maxx = max(maxx, x)
            maxy = max(maxy, y)
            polygon_points.append((x, y))
        polygon_data['points'] = polygon_points
        if c.attributes.get('fill'):
            val = c.attributes.get('fill').value
            if val.startswith('#'):
                r, g, b = int(val[1:3], 16), int(val[3:5], 16), int(val[5:], 16)
                polygon_data['fill'] = (r, g, b)
            else:
                polygon_data['fill'] = c.attributes.get('fill').value
        amount_of_polys += 1
        points.append(polygon_data)

print simplejson.dumps(points, indent=2)
sys.stderr.write('\n ~# Wicked SVG Statz: #~\n')
sys.stderr.write('  min X,Y: %s, %s\n' % (minx, miny))
sys.stderr.write('  max X,Y: %s, %s\n' % (maxx, maxy))
sys.stderr.write('  polygons: %s\n' % (amount_of_polys))
sys.stderr.write('\n')

Then you probably want it on the screen. We used the following processingjs snippet on Helsinki New Media Locomotive site for testing:



void setup()
{
    size(300,300);
    background(255);
    noLoop();
    strokeWeight(0.5);
}

void draw(){  
    var data = YOUR_OWN_DATA_ELEMENT; // make this point to your JSON structure
    for(int i = 0; i < data.length; i++) {
        var pd = data[i];
        fill(pd.fill[0], pd.fill[1], pd.fill[2]);
        beginShape();
        for(int ii = 0; ii < data[i].points.length; ii++) {
            var point = pd.points[ii];
            vertex(point[0], point[1]);
        }
        endShape(CLOSE);
    }
}

30.01.2011 17:49 Fetching comments

Finally found the effort to move this site to the web 1.5 era by implementing an atom feed generator. Also threw in Disqus commenting to be all social and hip and stuff.

Projects got a new addition with Jorma the Skeleton. A small, fun project we did with Niko for Levykauppa Äx. And believe me - this is just the beginning for silly endeavours..


18.10.2010 10:10 Fetching comments

I decided to redo my site ages ago but as design processes go, redesigning your own site is probably one of the most painful ones. I went from several layouts finally to this one (as usual the last one is the simplest) and I'm still not entirely happy.

I wanted to share all the fun projects I've been doing here at Medialab and give them more emphasis. At the same time I wanted to go to a one page layout to better support touchscreens in tablets and other mobile devices (and to stand out from the crowd a bit ;) )

I also had some processing.js animations working in the background, but disabled them for now as the html-canvas element still seems to be quite slow.

Maybe I'll still clear out some visual noise and include some simple graphics, but for now I'll leave it as it is.


Older posts »