Dream Storage - New School Archives: Digital Collections

Transcription

Dream Storage - New School Archives: Digital Collections
Dream Storage
Interactive installation to express the artist’s dreams
by
Hyungou Jo
Thesis Instructors : Anthony Jesse Deen, Kang Yang Li
Thesis Writing Instructors : Andrew Zornoza, Louisa Campbell
A thesis document submitted in partial fulfillment
of the requirements for the degree of
Master of Fine Arts in Design and Technology
Parsons The New School for Design
May 2015
© 2015
Hyungou Jo
ALL RIGHTS RESERVED
Table of Contents
Title
Table of Contents
List of Illustrations
Abstract
Chapter 1. Introduction
1.1 Concept Statement
1.2 Design Questions
1.3 Impetus
1.4 Significance
Chapter 2. Domains / Precedents
2.1 Domains
2.1.1 Dream Expression
2.2.2 Surrealism
2.2.3 Interactive Installation
2.2 Precedents
Chapter 3. Methodology
3.1 Approach
3.2 Step 1
3.3 Step 2
3.4 Step 3
Chapter 4. Conclusion
Bibliography
Appendices
List of Illustration
Figure 1. Jindrich Stysky. Ryback II Dream | Sen o Ryback II (1940)
Figure 2. Alfred Hitchcock. Spellbound. Directed by Alfred hitchcock (1945) The dream sequence.
designed by Salvador Dali
Figure 3. Akira Kurosawa. Dream. Directed by Akira Kurosawa. Ishiro Honda (1990)
Figure 4. Satoshi Kon. Paprika. Directed by Satoshi Kon (2007)
Figure 5. Rene Magritte. The Empire of Light II (1953-1954)
Figure 6. Rene Magritte. Fortune Telling (1938)
Figure 7. Wang Gongxin. It’s About Dream (2010)
Figure 8. Hoji Tsuchiva. Birdhouse Mutoscope (2013)
Figure 9. Diagram for material imagination
Figure 10. Diagram for relationship between reality, dream and expression
Figure 11-1. First prototype image
Figure 11-2. First prototype image- showing four different images
Figure 12-1. Dream expression into graphical way
Figure 12-2. Created website to contain gif files
Figure 13-1. Arduino set for a rotary encoder
Figure 13-2. 7 inch monitor to show a website
Figure 14. Box structure diagram
Figure 15-1. Final box image
Figure 15-2. Final box image
Figure 15-3. Final box image
Figure 15-4. Final box image
Figure 16. Exhibition simulation image
Abstract
DREAM STORAGE is an interactive installation in which I share my dream stories,
represented in black and white drawings. They are contained in a box, Dream Storage. A crank initiates
projections of the narratives. While rotating the crank handle of a box, the audience can explore my
dream stories.
DREAM STORAGE is autobiography. I collected my dreams, and expressed them. The plots reveal not
only my unconscious thoughts, but personal secrets. It is a daily project to find myself through
collecting and expressing my dreams.
DREAM STORAGE is my own dream expression. As a graphic designer, I tried to find my own way to
express the dreams. DREAM STORAGE project made me celebrate myself as a graphic designer by
expressing the dream plots.
Chapter 1. Introduction
1.1 Concept Statement
My thesis project DREAM STORAGE is autobiography. How do our sleeping dreams affect
our everyday lives? By porting my unconscious narratives into interactive drawings, I make my dreams
real. Through interacting with my piece, gallery visitors will experience my deeper longings and ideas.
The aim for my thesis project is to celebrate myself as a graphic designer and storyteller by
representing and expressing my dreams. I am interested in objects and stories in dreams which are
different from reality. The objects and stories reflect reality, however they are transformed in
inexplicable ways, and show up in dreams. I want to catch this interesting transformation and
expression. By making a storage space for gathering my dream plots, I can see my dreams in reality,
and do not need to be concerned about losing them.
Artists who express their dreams into art pieces, such as paintings drawings photography, sculptures
and movies, make their dreams real. As a graphic designer and an interactive designer, I wanted to
express my dream in a more graphical way, and let people have interactions with my pieces to convey
my story. Through watching and having interactions with DREAM STORAGE, audiences will get to
know who I am, and be absorbed into my dream.
1.2 Design Questions
- How can I bring dreams into reality?
- How can I use dreams in an interesting way?
- What is the appropriate style and interactive way to express my dreams?
- Which physical element has an engagement with dreams?
- What kind of format is suitable to convey a short plot?
- What is an interesting way to distribute my dream plots?
1.3 Impetus
This project was inspired by everyday dreams. One day, I realised that I dream everyday. From
my everyday dreams, I can find two interesting characteristics.
The first is that through the dreams, I can get to know my honest and real thoughts, and the real me,
because in dreams, my unconscious mind is revealed inside of myself. My dreams tell me anxiety, fear,
and past memories which even I did not remember or was conscious of. It can help me find my
problems, and rethink my life again.
The second thing is that in dreams, I can meet interesting objects and stories which are different from
reality. These images from dreams are sometimes really realistic and sometimes really surrealistic at the
same time. My dream reflects my life so well, but at the same time they are mixed with unreal things.
Because of these characteristics of a dream, since I was very little, I have hoped that I could recreate
my dreams visually. I imagined that if there is a space to contain the story and image from my dreams
in reality, it can help to find myself.
After deciding to make a space for grabbing dreams, I tried to find my way to express my dreams. I
have spent 9 years as a graphic designer, and love to be a storyteller. Through expressing my dreams, I
decide to celebrate myself as a graphic designer and dream storyteller. In this project, the purpose was
to express my dreams in my dream storage, find and celebrate myself.
1.4 Significance
My project will make an interactive space to explore my dreams. It will contribute to the artists’
attempt to identify oneself through the dreams and let audiences know who I am. My dream storage
project relies on the gif images as an expression of dreams, and the storage box with a crank handle to
create an interaction.
Chapter 2. Domains
2.1 Domains
The larger domains of my project are dream expressions, surrealism and interactive installation.
2.1.1 Dream Expression
I have wondered how to recreate dreams. There are various ways to recreate our dreams, it
can be approached scientifically by using devices which can read images from brains, or expressed in
artistic way. Since many decades ago, artists have been expressing their dreams in their own way, such
as a simple drawing, films, photography, or a sculpture.
Figure 1. Jindrich Stysky. Ryback II Dream | Sen o
Ryback II (1940)
Figure 3. Akira Kurosawa. Dream. Directed by Akira
Kurosawa. Ishiro Honda (1990)
Figure 2. Alfred Hitchcock. Spellbound. Directed by
Alfred hitchcock (1945) The dream sequence.
designed by Salvador Dali
Figure 4. Satoshi Kon. Paprika. Directed by Satoshi
Kon (2007)
I follow Sigmund Freud who considered dreams to be the main tool of self analysis, as well as a
prominent part of psychological treatment. In my opinion, a lot of artists use their dreams to find
themselves by expressing the dream into their own way. I want to call this conduct Dream Expression.
For my project, I want to use my dreams to help find myself, and find my own way to express the
dreams.
2.1.2 Surrealism
Surrealism is a cultural movement that began in the early 1920s, and is best known for its
visual artworks and writings. The aim of surrealism was to "resolve the previously contradictory
conditions of dream and reality." Artists painted unnerving, illogical scenes with photographic
precision, created strange creatures from everyday objects and developed painting techniques that
allowed the unconscious to express itself.
Figure 5. Rene Magritte. The Empire of Light II
(1953-1954) ,left
Figure 6. Rene Magritte. Fortune Telling (1938) ,right
Through out the art pieces of surrealism, the most interesting feature was a whimsical expression.
Especially, Rene Magritte’s paintings which can show what dreams looks like with sense of humor. I
want to express my dream into not a serious way but a humorous way like how Magritte did.
2.1.3 Interactive installation
Interactive art is a form of art that involves the spectator in a way that allows the art to achieve
its purpose. This interactive feature is important for my project, because I want to create a storage
which can distribute and share the dreams. By putting rotating interaction into the storage box, the
audience might be gradually absorbed into my dream.
2.2 Precedents
To get inspiration and find a way to express my work’s development, I searched a lot of art pieces
which express dreams in various kinds of ways, ranging from simple drawing to sculpture. The main
point of my work was collecting dream plots and showing them in one space with interaction.
The first was a sound installation of Wang Gongxin. This sound installation consists of two hundred
mp4 players, one hundred of which show faces in deep sleep, as well as what at first glance we can
assume to be the one hundred objects these faces are dreaming of. Sounds of snoring continuously rise
and fall, gradually changing in rhythm, while the faces themselves are sometimes blurry, sometimes
clear. All of these mp4 players have been cleverly placed on five beds that hover in dimly lit space.
Fittingly, everything leads to a conclusion that even the audience is easily allowed to make, namely that
the artwork is faithful to its name: it is about dreaming. This installation gave me an inspiration to
make a container of dream plots.
Figure 7. Wang Gongxin. It’s About Dream (2010)
Figure 8. Hoji Tsuchiva. Birdhouse Mutoscope (2013)
Hoji Tsuchiva’s Birdhouse Mutoscope project gave me the concept of a dream storage. I want to make
a storage of dreams not only function as a storage, but also as a tool to explore my dream plots. The
interaction of exploring plots for the audience was a revolving handle. While the audience is rotating
the handle of a box, the image is changed by the interaction. Mutoscope was a perfect example for my
box, because of the way of showing images is quite similar as a gif image, which I chose for my
container of dream plots. While I was researching the mutoscope, I found this project, which uses a
birdhouse as a mutoscope. Inside of the bird box, there are successive image layers. While rotating the
handle, the audience can see a story, which consist of successive images. However, this mutoscope is
an analogue way of showing images, I need to build digital version of mutoscope to contain gif images.
Chapter 3. Methodology
3.1 Approach
I followed Carl Jung’s theory, Jung noted certain dream symbols that possess the same universal
meaning for all men and women. He terms this phenomenon the "collective unconscious". While
dreams are personal, our personal experiences often touch on universal themes and symbols. These
symbols are believed to occur in every culture throughout history. Jung identifies seven such symbols
in what is referred to as the major archetypal characters: The Persona, The Shadow, The Anima/
Animus, The Divine Child, The Wise Old Man/ Woman, The Great Mother, and The Trickster. Like the
collective unconscious, we can categorise our dreams into several themes, and can interpret them and
identify ourselves. From this idea, I want to choose particular plots from my everyday dreams and
share them. The audience can also feel sympathy from my dream plots and remember their similar
dreams.
Sigmund Freud considered dreams to be the royal road to the unconscious as it is in dreams that the
ego's defenses are lowered so that some of the repressed material comes through to awareness, albeit in
distorted form. Dreams perform important functions for the unconscious mind and serve as valuable
clues to how the unconscious mind operates. While the unconscious mind distorts objects and stories
from reality into dreams, there can be a certain filter between reality and dreams.
In material imagination theory, imagination can be distinguished into two sorts: one that gives life to
the formal cause and one that gives life to the material cause. For example, if there is an object in
reality (formal cause), it will be different than in the imagination (material cause). It can be called more
succinctly as a formal imagination and a material imagination. Imagination contains depth, volume, and
the inner recesses of substance. Every imagination of one object can be different for every person,
because the imagination of an object will be distorted by Weltanschauung, a view of the world.
Figure 9. Diagram for material imagination
The imagination of an object in dream can be also different from the imagination in reality, ranging
from a form and shape to a meaning of an object. The imagination in dreams can be filtered by
weltanschauung from reality, moreover, while expressing the dream the imagination will be
Figure 10. Diagram for relationship between reality, dream and expression
transformed by interpretation. We cannot create exactly same imaginary object from our dream. Every
imaginary object is distorted and transformed by different kinds of filters. I want to build a prototype to
demonstrate this hypothesis.
3.2 Step 1
To demonstrate my hypothesis, I built a box, and hung a light bulb inside the box. There were 4
different filters on 4 sides. Each filters distorted the image of the light bulb inside of the box, so the
audience can see 4 different images from one object. These 4 filters could represent weltanschauung or
interpretation.
Figure 11-1. First prototype image
Figure 11-2. First prototype image- showing four different images
3.3 Step 2
After figuring out my hypothesis, I want to build the second prototype which is almost the same
as my final idea. My final idea was to express my dreams into my own graphical way ,and make a
storage to contain those elements. I chose one short story from my every day dream, and made a 3-5
second gif image. Each gif can show one of my dream plots.
Figure 12-1. Dream expression into graphical way
The next step was to build a website to contain all my gif files. I put all gif images to the background
of the website, and let the audience browse my dream plots by rotating the handle. The reason why I
made a background full of all gif files is that I wanted the background to look like a cloud of my dream
fragments. This cloud can represent a space to contain the dream in reality.
Figure 12-2. Created website to contain gif files
I built a website using HTML and json to contain the gif files. This website is connected to the arduino
which controls a crank handle. I made gif image that will be flipped by rotating the handle.
3.4 Step 3
To make a handle for the box, I used a rotary encoder which can rotate 360 degrees. One rotation of
the rotary encoder can change the gif image on a screen. As a screen, I chose a 7 inch monitor which
has HDMI and VGA out to connect to my laptop. The 7 inch screen was the main part of my dream
storage.
Figure 13-1. Arduino set for a rotary encoder
Figure 13-2. 7 inch monitor to show a website
Figure 14. Box structure diagram
Figure 15-1. Final box image
Figure 15-2. Final box image
Figure 15-3. Final box image
Figure 15-4. Final box image
To make a dream storage box, I built a wooden box which can contain a 7 inch monitor and other
components. The size was 13inch by 13inch, and the height was 10 inchs. I placed the handle on the
right side of the box, and connected to the rotary encoder through a small aperture.
Figure 16. Exhibition simulation image
Chapter 4. Conclusion
I was thinking of how I can recreate the dreams into reality. Since my project was based on a
daily project, I collected my everyday dreams by writing, recording voice, and drawing. From these
documents I tried to recreate the dreams into my own style. While expressing the dreams, I can have a
chance to rethink myself and my life. I can get to know what my real concern is, and what I was
missing. However, I should use my dreams not only for me but also for the audience. The most difficult
thing was making the audience have interest in my dream story. Because some dreams might be
interesting only for myself since I know the reason why it came up. So I tried to express my dreams in
a fun way like watching a cartoon. Most of the audience gave me positive feedback about my
expression. They enjoyed watching my gif images, and exploring my dream storage because of my
humorous expression. Additionally, the audience wanted to get involved in my dream space, such as
leaving a message to one of the dream plots and taking one of the dream pieces. For future
development, I want to develop the structure of the interactive part to let audiences get involved in my
dream storage, and do more active interaction for my project, so people can be more deeply be
absorbed inside my dream storage.
Bibliography
Freud Sigmund. “The interpretation of dreams.” Oxford University Press (1856-1939, 1999)
Jung Carl G., Hull, R.F.C., Shamdasani, Sonu. “Undiscovered Self : With Symbols and the
Interpretation of Dreams.” Princeton University Press (2012)
Gaston Bachelard. “The Right to Dream.” New York: Grossman Publishers (1971)
Gaston Bachelard. “Water and dreams : an essay on the imagination of matter.” Pegasus Foundation,
Dallas Institute of Humanities and Culture (1884-1962, 1999)
Gaston Bachelard. “The poetics of space.” Beacon Press (1884-1962, 1994)
Jiménez, José. “Surrealism and the dream.” Distributed Art Pub Incorporated (2014)
Appendices
This is the code I used for DREAM STORAGE
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,
400,700,300' rel='stylesheet' type='text/css'>
-->
<script src="http://localhost:9001/socket.io/socket.io.js"></script>
<script type="text/javascript" src="js/dream.js"></script>
</head>
<body>
<!-- 1st ( MAIN ) VIEW -->
<section id="main_view">
<div id="gif_container">
</div>
<div id="selected_gif_container">
<div id="selected_gif_1"></div>
<div id="selected_gif_2"></div>
<div id="selected_gif_3"></div>
<!-- <img id="selected_gif" class="selected_gif" src="img/dream_0.gif" /> -->
</div>
</section>
<!-- 2nd ( INTRO ) VIEW -->
<!-- <section id="intro_view" style="display:none">
</section> -->
</body>
</html>
—————————————————————————————————————————
json code
$(document).ready(function(){
var prevValue = 0;
var number_of_column = 80;
var number_of_row = 45;
var numberOfGIF = number_of_column * number_of_row; // 16 x 9
var currentValue = 0;
var count = 0;
var number_of_gif_files = 10;
var rotation_value = 50; .
var socket = io.connect('http://localhost:9001');
socket.on('controller', function(data) {
currentValue = data;
console.log("prevValue:" + prevValue + "
currentValue:" + currentValue);
if( Math.abs(prevValue - currentValue) > rotation_value){
flip();
prevValue = currentValue;
console.log("flip!!!!!");
}
});
//if( Math.abs(prevValue - currentValue) > 50) {
// if(currentValue > 100){
//
flip();
//
prevValue = currentValue;
//
console.log("flip!!!!!");
// }
for(var i = 0; i < numberOfGIF; i++){
// $('#gif_container').append('<img id="dream_'+i+'" class="gifs" src="img/dream_'+(i
%9)+'.gif"/>');
$('#gif_container').append('<img id="dream_'+i+'" class="gifs" src="img/dream_'+
(Math.floor((Math.random() * number_of_gif_files)))+'.gif"/>');
$('#dream_' + i).css({
'position':'absolute',
'top': ((100/number_of_row) * Math.floor(i/number_of_column)) + '%',
'left': ((100/number_of_column) * (i%number_of_column)) + '%',
'width':(100/number_of_column) + '%',
'height':'auto',
// 'height': '0%',
// 'padding-bottom': (100/16) + '%',
'opacity': '0.4',
});
}
function flip(){
count++;
console.log(count);
if(count%3 == 1){
$('#selected_gif_1').html('<img class="selected_gif" src="img/dream_'+
(Math.floor((Math.random() * number_of_gif_files))) +'.gif" />');
$('#selected_gif_1').show().addClass('custom_flipInX');
//$('#selected_gif_1').one('webkitAnimationEnd mozAnimationEnd
MSAnimationEnd oanimationend animationend', function(){
setTimeout(function(){
$('#selected_gif_1').removeClass('custom_flipInX');
},1000);
//
$('#selected_gif_1').removeClass('animated custom_flipInX');
// });
if(count != 1){
$('#selected_gif_3').addClass('custom_flipOutX');
setTimeout(function(){
$('#selected_gif_3').removeClass('custom_flipOutX');
$('#selected_gif_3').css({'display':'none'});
},1000);
}
}else if(count%3 == 2){
$('#selected_gif_2').html('<img class="selected_gif" src="img/dream_'+
(Math.floor((Math.random() * number_of_gif_files))) +'.gif" />');
$('#selected_gif_2').show().addClass('custom_flipInX');
setTimeout(function(){
$('#selected_gif_2').removeClass('custom_flipInX');
},1000);
$('#selected_gif_1').addClass('custom_flipOutX');
setTimeout(function(){
$('#selected_gif_1').removeClass('custom_flipOutX');
$('#selected_gif_1').css({'display':'none'});
},1000);
}else if(count%3 == 0){
$('#selected_gif_3').html('<img id="selected_gif" class="selected_gif" src="img/
dream_'+ (Math.floor((Math.random() * number_of_gif_files))) +'.gif" />');
$('#selected_gif_3').show().addClass('custom_flipInX');
setTimeout(function(){
$('#selected_gif_3').removeClass('custom_flipInX');
},1000);
$('#selected_gif_2').addClass('custom_flipOutX');
setTimeout(function(){
$('#selected_gif_2').removeClass('custom_flipOutX');
$('#selected_gif_2').css({'display':'none'});
},1000);
}
}
});
—————————————————————————————————————————
connecting arduino code
// old stuff
var connect = require('connect'),
fs = require('fs'),
util = require('util'),
io = require('socket.io').listen(9001), // WS port
port = 9000, // HTTP port
// new stuff
// define a class
SerialPort = require("serialport").SerialPort,
// ls /dev/tty.*
sPort="/dev/tty.usbserial-AD01TCAS",
//sPort = "/dev/tty.usbserial-AM01PK24",
// create an instance (object)
arduino = new SerialPort(sPort, {
// baudrate: 57600
baudrate: 9600
});
// create web server using connect
connect.createServer(
connect.static(__dirname + '/public') // two underscores
).listen(port);
util.log('the server is running on port: ' + port);
// init socket.io
io.set('log level', 1);
io.sockets.on('connection', function(socket) {
util.log('Ooooooh, someone just poked me :)');
// socket.on('led', function(data) {
//
// sending binary data
//
var ledOn = new Buffer(1), // Buffer is an array and Buffer(1) means 1 index array
//
ledOff = new Buffer(1);
//
ledOn[0] = 0x01; // 1
//
ledOff[0] = 0x00; // 0
//
// shorthand ledOn = new Buffer([0x01])
//
if(data === true) {
//
// turn on
//
arduino.write(ledOn);
//
util.log('LED ON');
//
} else {
//
// turn off
//
arduino.write(ledOff);
//
util.log('LED OFF');
//
}
// });
// socket.on('slider', function(data) {
//
aHex = data.toString(16);
//
bHex = '0x' + aHex;
//
cHex = new Buffer([bHex]);
//
// util.log('Z' + cHex + 'X');
//
arduino.write('O' + cHex + 'P');
// });
});
// function that converts int to hexadecimal
// we communicate to Arduino using hex (binary)
// serial port
var receivedData, sendData;
arduino.on('open', function() {
console.log('opening port');
// console.log((11).toString(16));
// setInterval(toggle, 1000);
});
// receive data
arduino.on('data', function(data) { // data comes in Buffer < >
// try removing toString()
// util.log(data);
receivedData += data;
// basically says if there're 'E' and 'B' signals
if (receivedData.indexOf('E') >= 0 && receivedData.indexOf('B') >= 0) {
// save the data between 'B' and 'E'
sendData = receivedData.substring(receivedData.indexOf('B') + 1,
receivedData.indexOf('E'));
receivedData = '';
util.log(sendData);
// parse data to browser
io.sockets.emit('controller', sendData);
// socket.io
// emit, on, broadcast.emit, io.sockets.emit
}
if (receivedData.indexOf('S') >= 0 && receivedData.indexOf('F') >= 0) {
// save the data between 'S' and 'F'
sendData = receivedData.substring(receivedData.indexOf('S') + 1,
receivedData.indexOf('F'));
receivedData = '';
if(sendData != 'FS'){
util.log(sendData);
// parse data to browser
io.sockets.emit('button', sendData);
// socket.io
// emit, on, broadcast.emit, io.sockets.emit
}
}
});
—————————————————————————————————————————
Arduino code
//these pins can not be changed 2/3 are special pins
int encoderPin1 = 2;
int encoderPin2 = 3;
volatile int lastEncoded = 0;
volatile long encoderValue = 0;
long lastencoderValue = 0;
int lastMSB = 0;
int lastLSB = 0;
int prevVal = 0;
void setup()
{
// pinMode(outputPin, OUTPUT);
Serial.begin(9600);
pinMode(encoderPin1, INPUT);
pinMode(encoderPin2, INPUT);
digitalWrite(encoderPin1, HIGH); //turn pullup resistor on
digitalWrite(encoderPin2, HIGH); //turn pullup resistor on
//call updateEncoder() when any high/low changed seen
//on interrupt 0 (pin 2), or interrupt 1 (pin 3)
attachInterrupt(0, updateEncoder, CHANGE);
attachInterrupt(1, updateEncoder, CHANGE);
}
void loop()
{
if(prevVal != encoderValue){
Serial.print('B');
Serial.print(encoderValue);
Serial.print('E');
prevVal = encoderValue;
}
delay(10);
}
void updateEncoder(){
int MSB = digitalRead(encoderPin1); //MSB = most significant bit
int LSB = digitalRead(encoderPin2); //LSB = least significant bit
int encoded = (MSB << 1) |LSB; //converting the 2 pin value to single number
int sum = (lastEncoded << 2) | encoded; //adding it to the previous encoded value
if(sum == 0b1101 || sum == 0b0100 || sum == 0b0010 || sum == 0b1011) encoderValue ++;
if(sum == 0b1110 || sum == 0b0111 || sum == 0b0001 || sum == 0b1000) encoderValue --;
lastEncoded = encoded; //store this value for next time
}