London Science Museum Visit – “Who Am I”? Exhibit

Today our course made a visit to the London Science Museum, specifically to observe the latest interactive media installations there.

On one level of the museum was an area named “Who Am I?” which explored individuality and the sense of self through several interactive “tests” and visual installations that gave a personalized response, making each user’s experience truly unique.

This gallery takes the personalization of interactive media to a whole new level, making interactive pieces with a focus entirely on the user. The gallery uses cameras in a variety of ways – from drawing the silhouette of the user as they walk in to the entrance (shown at the start of the video) to taking an image of the user’s eye on one particular screen. Following this, the user can answer a series of questions about their individuality, and having completed this will be anonymously “showcased” on the far side of the exhibit, a silhouette generated of circles and showing the answers that the user input.

Exploring this gallery in the museum drew my attention to the way user interactivity is related with the sense of identity. Media pieces which rely on user input to be complete and functional make the user a part of the experience, splitting their attention – just as the user focuses on the media narrative and experience, there is also a degree of attention paid to the self and the role that the user plays in everything. “Who Am I?” made this far more apparent than other interactive media, as it is literally an exhibit about the self drawing your attention inward from the get go. This could strengthen one’s sense of identity as they have an active role to play in a piece of media, or draw it in to question as the user considers their self from a third person perspective, asking questions and making decisions they never normally would have to.

 

References

http://www.sciencemuseum.org.uk/Home/visitmuseum/Plan_your_visit/exhibitions/who_am_i

Analysis – Approaches to Interactive Data Visualization

With the proliferation of digital technology in recent years, there are now many ways users can interact and input data. The traditional mouse and keyboard forms of input are still prevalent, but are now alongside touchscreens, motion tracking, audio input, and more. Something to consider when iterating and moving my project forward will be how exactly the user should interact with the work to get a response. This post will show and discuss some examples of innovative forms of interaction I have discovered through research.

http://donottouch.org/ is a crowd-sourced music video, providing the user with a set of instructions to follow in conjunction with previous recordings of other users’ cursors on the screen. Through the simple and traditional form of mouse input, a continually generative music video has been created as users make a permanent mark on it – adding their own recording of their input each time. Some instructions additionally apply to a sense of a group, such as “make a mask” over someone’s face – the user has to respond to what previous users did too, creating a unique experience for each user.

All pointers are recorded from other users' sessions.
All pointers are recorded from other users’ sessions.

The below video is of an innovative digital art installation, a wall of LED’s which reacts to water. This form of interacting with technology blurs the line between the digital and the physical, as the response on the screen is much like throwing paint or other liquid over a wall, but it is still a digitized response to an otherwise non-technological user input that they perform physically.


These are just two examples of imaginative ways digital designers have experimented with user control and input in recent years. The next step for my project will be to consider how I want the audience to interact with and control my piece of data visualization.

 

References

Fourneau, A., 2012. Water Light Graffiti. digitalarti.com [online]. Available from: http://www.digitalarti.com/wlg

Moniker, 2013. Do Not Touch [online]. Available from: http://donottouch.org

Learning Processing #3 – Image Processing

This week’s Processing workshop covered using images and processing them into pixels.

PImage img1;
PImage img2;
PImage img3;
PImage img4;

void setup(){
  img1 = loadImage("goat1.jpg");
  img2 = loadImage("goat2.jpg");
  img3 = loadImage("goat3.jpg");
  img4 = loadImage("goat4.jpg");
  size(img3.width,img3.height);
  background(800,600);
}

int n=5;
int loc;

void draw(){
  img3.loadPixels();
    for (int y=0; y<height; y=y+n){
      for (int x=0; x<width; x=x+n){
       loc= x + (y*width);
       noStroke();
       fill(img3.pixels[loc]);
      rect(x+random(-5,5),y+random(-5,5),n*0.8,n*0.8);
      }
    }
    imageChanger();
    if (mousePressed && mouseButton==RIGHT || keyPressed){
    doSomeText();
    } else {}
}

void imageChanger(){
  if (mousePressed && mouseButton==LEFT || keyPressed) {
    img3 = loadImage("goat3.jpg");
  }else{ img3=loadImage("goat2.jpg");
}
}

void doSomeText(){
  textSize(35);
 fill(255,0,0);
 text("I'm a goat",150,150);
}

Above is the code used. Several images are loaded at the start of the sketch using the PImage function, and are defined as “img1-4” for later use. In the draw section, from lines 19-26, the loaded image is processed into a mosaic. This is done with “loadPixels”, and a couple of nested for loops. These function like in the earlier workshop, creating a grid of rectangles, however in this case the fill is taken from img3.pixels[loc], which locates a pixel and takes its color value – putting it in the fill. The grid of rectangles are then made sized up so they aren’t 1px wide and high, creating the mosaic effect. Another simple effect is the use of random values in the x and y coordinates for each rectangle, giving them +random(5,-5) to both x and y makes them move around randomly from frame to frame, within a boundary of 5 pixels either way (the size of the rectangles).

A couple of functions are then used for interaction – void imageChanger (lines 34-38) is a function that changes the picture that is loaded to a different one when the mouse is pressed. The rectangles are then drawn again, giving a similar effect to previously but with a different picture.

These are simple ways to load images into processing and then turn their pixel values into usable integers, which could prove useful for creating visual effects based on images in the future.

Requirements Gathering & Analysis – The Space

Our group has now displayed our finalized posters in the foyer to study the space and how the audience reacts to visual media within it.

The foyer is shown below in thumbnail images:

IMAG0012   IMAG0010   IMAG0009   IMAG0008

Our poster was displayed on the way in, directly in front of the audience as they enter the space:20141016_121420

Studying the behavior of people in the space and their reaction to our visual media proved useful. Students and lecturers simply passing through would often not pay much attention to the media in the area, however people who were for example, having coffee or discussing group work on the tables and sofa’s in the space would take the time to notice and examine media in the area in greater detail – especially if they were nearer it.  The time of day also has a notable effect on the business of the area, with more people passing through on their way to lectures or seminars generally on the hour, while the rest of the time the area is less populated but people tend to stay in the vicinity longer.

Our final project will be displayed on HD television screens in the foyer shown in the earlier images, being animated and readily apparent to anyone passing through or staying in the area. This should make involving and engaging the users easier when displaying our final projects, so I now have a good idea of how many people will be interested in my final work and will likely involve themselves in the testing process.

Requirements Gathering – Finalized Poster Design

After receiving feedback on our initial poster designs from our peers, our group has finalized the poster’s design and displayed it in the foyer of Weymouth house, the space where our final projects will be.

We have radically changed the poster in this iteration after one session of redesigning it. The color scheme was kept similar to remain eye-catching and relevant to Dorset, and we decided to keep the slogan “an independent Dorset is a better Dorset” due to its simplicity while still conveying the overall idea behind the fictional campaign we are promoting.10733682_10153261362689502_119376921_nThe text design in the bottom left took inspiration from the Bauhaus movement, while the rest of the poster was based on what is perceived as iconic about Dorset – in the background is the Cern giant, the farmer in the center emphasizes agriculture and the flag of Dorset is also prominent. The result is an overwhelmingly nationalistic approach to this campaign, an approach we took due to our inspirations in other posters from Nazi propaganda to the Scottish independence campaign, examples of these shown below:

329306169
Nazi propaganda poster showing Bauhaus designs and emphasis on Nationalism
brave_ciaran-murphy2
Scottish independence poster showing emphasis on a single figure and “Yes” slogan

 

 

 

 

 

 

 

 

 

As you can see, our finalized poster draws heavily from these similar campaigns but has been adapted to a different context. Our campaign is fictional the audience will not have prior awareness of the idea of an independent Dorset, which should be advantageous to drawing people’s attention. The Bauhaus themes and propaganda style were taken to a comical extreme, such as the chicken and the Dorset armband, which could create a sense of pride if the campaign were real, as the media space is based in Dorset, and by extension the audience are also.

Learning Processing #2 – Functions and Arrays

This week’s workshop covered using functions and arrays in processing.

color[] p ={ #eb5050, #E67012, #FCAC22, #AA5903 };
void setup(){
  size(800,400);
  background(0);
}

int r=0;

void draw(){
  fill(0,3);
  rect(0,0,width,height);
  translate(width/2,height/2);
  rotate(r);
  stroke(255);
  noFill();
  for(int i=0; i<width; i=i+35){
    house(mouseX,20,p[int(random(p.length))]);
  };
  r=r+1;
}

void house(int x, int y, color c){
  fill(c);
  stroke(255);
  triangle(x+15,y,x,y+15,x+30,y+15);
  rect(x,y+15,30,30);
  rect(x+12,y+30,10,15);
}

The above code contains an array of colors called “p” at the top, which is referenced later at line 17 to draw a random color from the array. A function called “house” is then defined at the end of the sketch, which draws a small 2d house made up of rectangles and a triangle at set coordinates. The use of a for loop on line 16 repeats this function, and combined with rotate(r) and r=r+1, creates a circle of these houses looping around the center of the screen based on the coordinates provided as more houses are drawn in each frame which rotate around by 1 each frame.

The width of the circle of houses is determined by the mouse's horizontal position.
The width of the circle of houses is determined by the mouse’s horizontal position.

Functions and arrays are ways to repeat code without having to rewrite it each time – an array of colors to be used can be referenced multiple times in one sketch, and a function can be called several times as well. These are ways to cut down on file sizes and make code cleaner and easier to read.

Requirements Gathering – Practice-led Research

In order to examine the relationship between visual media in the space and the behavior of its audience, we are designing a poster to find out how audiences react to visual media that they encounter. This lacks the interactivity that my final piece will have, but before diving in to fully developing iterations it is important to gather a basic set of requirements at first – we need to understand how users interact with visual media in the space before anything else. Design work for clients will always have set requirements, however it is also important to make sure the work produced engages the audience and draws their attention in, as visual media in a public space could be used for advertisement, public information, etc.

As such, creating this poster is a form of practice-led design research. “Design research, when it occurs through the practice of design itself, is a way to ask larger questions beyond the limited scope of a particular design problem. When design research is integrated into the design process, new and unexpected questions emerge directly from the act of design.” (Zimmerman 2013). Through designing a media artefact and placing it in public space, more can be discovered and observed than by examining the space and audience alone.

Some of our group’s initial rough designs are attached below, with an emphasis on being eye-catching and promoting the idea of Dorset as an independent state.

10719085_10202630722360482_454262508_n 1558935_770365496338478_169839881_o

References

Zimmerman, E., 2013. Play as Research: The Iterative Design Process [online]. Available from: http://www.ericzimmerman.com/texts/Iterative_Design.html