ITP Blog

ICM - Final: Alaska (aka Iceberg)

TITLE:  Melting Of Alaska - Interactive Projection Mapping Sketch for Alaska Dynamic Sculpture

DATE:  December 2016

INSTRUCTORS:  Daniel Shiffman


TOOLKITS:  JavaScript + P5.js + dat.GUI + Arduino + Mad Mapper


Alaska’s Glacier Bay is home to over 100,000 glaciers, 95% of which are currently thinning. I and Shivanku Kumar created a dynamic sculpture named "Alaska", that mimics the peaks at Alaska Glaciers and destroys itself instantaneously, and almost comically, in response to any user interaction with it. Here is a video of how it works:



Melting Of Alaska is an interactive projection mapping sketch of this dynamic sculpture, aiming to build a connection between human actions and melting of Alaska glaciers, which is also a final project for ITP fall semester course Intro to computional media(ICM). I hacked a microphone as the main input method to collect audiences' applause, talking, breathing and blowing actions and send data to the browser. When data received, the P5 sketch will start to animate and convey a feeling of glacier melting. The following video shows the detailed P5 sketch motion effect:



 John Brown - Panorama of the Turnagain Arm of the Cook Inlet at dawn

John Brown - Panorama of the Turnagain Arm of the Cook Inlet at dawn

We happened to read an article about Climate Change. And when we start to dig the truth, another article named How much Arctic sea ice are you melting?  showed some very interesting data about our actions on climate change.

For every metric ton of carbon dioxide released into the air, three square meters of Arctic sea ice disappear. If you do the math, this means the average American is melting roughly 50 square meters of those frozen reserves every year.

That means if we don't take some actions and start to care about the carbon dioxide emissions, we wouldn't see this beautiful scene in the near future. Then we decided to make a project to express the human impact on climate change.



Many science authors, scientists, filmmakers, politicians, journalists have tried to beat the attitude that unless a violent storm comes to my doorstep, I will not care, by making powerful appeals to people. Our project makes no such attempt. Our idea is not to try another way of making people understand. Instead, our project is an attempt at cynicism and mockery of the short-sighted attitude described above.

Therefore, some questions were generalized:

1. How to redesign and build a conceptional natural world in an installation and shorten the time that glaciers need to melt?

2. How to build strong connections between human behaviors and glacier melting?

3. What will make audiences feel our mockery and satiric expressions?



  • Webcam Capture

The first idea came to my mind was to make a mirror or kaleidoscope. Glaciers are white-transparent and have the reflection of outside world. The kind of quality is the perfect resource to build connections between human and environment - what you do is reflected on glaciers, the mirror.

 Justin Timberlake - Mirror

Justin Timberlake - Mirror

I created a sketch that can capture the view of the webcam and chop the image into different sizes of rectangles to create the physical layers of glaciers:

Basically, I used the copy() function in P5.

function createIceberg() {
    for (var i = 0; i < params.count; i++) {
            copyXPos[i], copyYPos[i], params.iceWidthMax -, iceHeight[i],
            params.iceWidthMax * i, iceYPos[i], params.iceWidthMax -, iceHeight[i]);


  • Shuffle The Capture Pieces

To make the capture pieces more dramatic and interesting, I used a programming algorithm called Fisher-Yates shuffle. The source code came from Mike Bostock's blog:

function randomArray(arr) {
    var m = arr.length,
        t, i;
    while (m) {
        i = Math.floor(Math.random() * m--);
        t = arr[m];
        arr[m] = arr[i];
        arr[i] = t;
    return arr;

I created 4 arrays, two of which stored the position, width and height of webcam capture, two of which stored these variables for the rectangles. So I could shuffle the video capture contents in each rectangle but keep them in the same positions.


  • Adjustment

To make adjust variables easily, I used dat.GUI library, which made it possible to change the variables in the browser and see changes immediately.

var gui = new dat.GUI();
var params = {
    iceWidthMax: 50,
    space: 1,
    count: 29,
    reLoad: function() {
        for (var i = 0; i < this.count; i++) {
            iceHeight[i] = (random(2 * bottomOffSet, iceHeightMax - 2 * topOffSet));
            copyXPos[i] = (this.iceWidthMax * i);
            copyYPos[i] = (iceHeightMax - iceHeight[i]);
            iceYPos[i] = (iceHeightMax - iceHeight[i]);
  • Video

During the playtest, I got some feedback:

1. They felt very strange to see pieces of themselves shown on the installations. Some of them even didn't realize that were their captures. They thought them were some things moving and sense their movements.

2. They couldn't get the idea that the wooden installation was symbolic glaciers. They expected the mapping projection to give more information so they could be sure it was glaciers, not mountains.

I took these advice and iterated my sketch. This time I used iceberg melting videos instead of webcam capture, and built interactive connections by connecting the sketch to Arduino and microphone sensor.

Another problem arose, loading video cost too much time even I minimized the size of my videos. Though I still can't find a solution to it, Or gave me a quite useful advice, set a loading process using video.time() to show to the audiences, which would give audiences feedback like "It's not broken or a bug, you just need wait."

    if(video.time() == 0){
      text("Loading ALASKA",1/5*1440,1/3*900);


Here is the original code of my project:



A lot of love to my instructor Daniel Shiffman, my friends Shivanku Kumar and Or Fleisher!