Recitation 10: Pixel Manipulation by Haiyan Zhang

For this recitation, you will first have a quick workshop about the map() function hosted by Eszter and Jessica.

map() workshop: with Eszter and Jessica, room 824 (slides)

After participating in the map() workshop,  choose and attend one of the three workshops below covering various skills that may be useful for your final projects.  If you are in a group of more than one person, it may be a good idea to split up and attend different sessions, but this really depends on the needs of your project. 

Every workshop will have an exercise at the end, which you must document and upload as usual.  Make sure to use the map() function in your exercise.

For this exercise, I chose to do media manipulation. The image the great wave off kanagawa is from Wikipedia(https://en.wikipedia.org/wiki/The_Great_Wave_off_Kanagawa)

I mapped the value of mouseX into the levels of filter POSTERIZE to trigger real-time change. Let’s see the effect below: 

PImage img;
float level;
void setup(){
  size(1200, 807);
  img = loadImage("WAVE.jpg");
}
void draw(){
    level= map(mouseX,0,width,2,10);
  image(img,0,0,width,height);
  if (mousePressed==true){
  filter(POSTERIZE,level);
  }
}

Hear Frida Kahlo – Haiyan Zhang – Marcela

CONCEPTION AND DESIGN:

(1)My initial plan is to create a quite immersive experience during which the users are invited to go into a room and see changing images when they press the heart. At the second stage, I decided to use a painting canvas for the projection so it appears more related to Frida Kahlo’s career (which was prepared but not experimented in the end). Also this appears more tangible and approachable rather than the former plan. 

(2) I imagine that users will spontaneously touch/ press the heart once they see the installation itself. Therefore, I used laser cutting for fabrication. Wood is my choice. I also considered rubber. But wood’s color and association with nature offer more warm temperature. For the buttons, I designed arrows. Attached to the end of the arrows are tiny magnets and inside the laser cut heart would be three more magnets at each spot to serve as one part of the circuit. Due to the strong force, the user would have to pull out the arrows from the three holes on heart in order to break the circuit. When the circuit is broken, shift of messages will be triggered. However, the visual experience for the arrow part is not so pleasant. Therefore, I changed it into normal buttons. 

FABRICATION AND PRODUCTION:

(Failures)

My project ended up in an incomplete state without proper physical interaction and projection which would definitely change the experience. During the preparation stage, I changed the idea too many times without enough physical experiments. My goal is to invite the audience to hear Frida Kahlo’s different voices and acknowledging her courageous exposure about her pains and challenging aesthetics. But without the physical interaction, during the presentation, this part ended up in boredom and confusion about “who is this? what is happening?”

(Success)

By integrating different voices, I attempted to show multiple aspects of Frida Kahlo. Also because we do not see her images, “who is this person” remains a lingering question among the audience. The heart beat responded to the distance between the user and the installation. Thanks to Professor Marcela Godoy’s idea and help. I then mapped the values of distance into the x-coordinates of the processing page. 

(Design sketches and storyline)

(possibilities of building own buttons, suggested by Professor Marcela Godoy)

心脏器官

(heart png images from https://www.51miz.com/, reference shown below)

(Heart Beat successfully Reacting to the distance detected)

(video of interaction triggered) 

CONCLUSIONS:

 The goal of this project is to invite the audience to hear/listen to Frida Kahlo/ the mysterious guest. The fact that we are now living in an age when more and more people are making efforts to learn about undiscovered aspects/ identities about themselves motivates me to establish this project. It has to speak to the audience in different voices but also offers a very direct experience that someone is exposing his/her most private stories to us. Therefore, after interacting with the project, people might leave with contemplation about this mysterious figure but more importantly about themselves. “Do I know her well?” “Do I know myself well?” That matters. 

My improved definition of interactivity/interaction is :

An experience that invites the other actor/ actors to activate their multiple senses and gives back real-time reactions. A higher level of interaction, however, will further stimulate an inner experience/ journey of mind contemplation and intuitive reflection rather than all kinds of external movements. 

From this perspective, my concept does tightly align with my own definition. Nonetheless, I failed at offering a complete interaction which requires complete physical installation and more proper material choices. I believe after this experience, the significance of planning would always stay with me. In order to accomplish an interactive piece, one has to experiment several times and try to get more feedback. Of course I harvested a lot from the experience. I see three stages are rather critical for accomplishing a project: (1)thorough research into the concept; (2) building physical interaction;(3) artistic critics. The first part is what I’ve done most. But I have been lost in the second stage which requires experiments of different materials and various options of building circuits and implementing the installation itself. 

If I will have a chance to improve this project or conduct other projects based on similar concepts, I will still try to create an immersive space. But more information will be needed. For example, suggested by Tina, I can print some physical objects that symbolize significant parts of Frida Kahlo such as wheelchair, uterus etc. I also think about typing out some of her diaries so that the audience will get a prior sense that this is a person we are about to learn. Hearing is a significant sense which voices out so many perspectives about identities. Yet it is a sense we usually ignore when visuals are emphasized too much today. This experience eventually does not stop at learning about Frida Kahlo. It can be just a name, a historical artistic figure. But this is also a significant chance for us to reconnect with our “selves” in the history, to hear  what the other person who went through enormous pains had done to understand life. 

Credits & Reference:

I want to thank Marcela, Tina and Lisa for supporting this project. Although failed, I harvested a lot of inspiration from the experience and my colleagues. Many thanks to Jake, Tao, Joyce, and SY for helping me accomplish the recordings of quotes. That is one of the most significant parts of the concept. 

Anatomical Heart PNG images are from: 

https://www.51miz.com/

https://www.51miz.com/sucai/898777.html

https://www.51miz.com/sucai/242453.html

Text code in processing is borrowed from: 

https://forum.processing.org/one/topic/help-with-simple-text-string-array.html

Frida Kahlo’s quotes are from:

https://artsandculture.google.com/entity/frida-kahlo/m015k04?hl=en

Final Project Essay by Haiyan Zhang

Project title: Hear Frida Kahlo/ Letters from __

Project statement of purpose: 

My targeted audience probably include everyone who’s curious about and willing to explore their own identities. When researching about interactive proejcts, I was inspired by the project “Ordinary Places” created by Anouk Zibaut. (link shown in reference, more content in my preparatory research)

(Picture of “Ordinary Places”)

The project’s nature doesn’t trigger many physical interaction. Rather it invites the viewers to watch the experimental film like they watch ordinary films. However, its research subject “daily surveillance” matters a lot to its targeted audience and therefore, naturally triggers further inner interactivity and lets the contemplation leave with the viewers. This is the effect that I want to achieve by having a substantial concept with the help of adequate physical interaction. 

Basically, Hear Frida Kahlo will invite the users to trigger audio files to be played. These will be audio files pre-stored in processing and recorded by different people with different genders and of course identities. By doing this, the usual experience of seeing Frida Kahlo’s image will be translated into another sense: hearing. 

 

Project Plan

My project Hear Frida Kahlo, as the name implies, invites people to listen to the artist. And by hearing her inspiring quotes and touching the heart, the audience will be left with a sense of contemplation about this figure, imagination about her life story and more importantly their own living experiences.

(1) Fabrication

I want to experiment on different materials such as wood and rubber for laser cut anatomical heart. The other option is to do a 3d-printing heart that allows a great extent of flexibility. The choice of wood or rubber aims at a sense of temperature for the former material is associated with nature and the latter’s texture is softer. 

(2)Voice input

For this part, I will need to communicate with different people and invite them to put in their voices reading Frida Kahlo’s quotes. I found quotes from the article “30 Frida Kahlo Quotes to Inspire you to turn pain into beauty”. 

(3)Coding

This will be the most complicated part and requires a lot of experiments and help. I aim at an interactive experience that will react to the detected distance first and then will invite the users to touch the heart which will trigger different quotes. 

Context and Significance

We are now living in a time when more and more people are gaining awareness about their own identities. These diverse identities are built on everyone’s own living experiences and personalities. In exploring our own possibilities, sometimes we need to borrow our predecessors’ experience, to stand on the shoulder of the giant and move forward. I believe Frida Kahlo is one of those giants. However, most of our contemporaries didn’t get an opportunity to know more about her works, her spirits and more importantly, listen to her voices. One thing is that I’m afraid the pronoun “her” is not adequate to describe Frida Kahlo. She’s somebody who set off the challenging inner journey, relentlessly asked questions about being a human and overcome obstacles. During my research, I didn’t see a lot of digital tributes to Frida Kahlo. However, Google Art does offer a rich digital library tributing to Frida Kahlo in which audience can thoroughly go through her life stories and understand her works from multiple aspects. (Link shown in the reference) This also adds to my confidence and determination about the significance of this project. If successful, I believe it can offer a short yet meditative experience to the audience. The voices will stay and grow into reflection over pain and beauty. 

Reference:

“30 Frida Kahlo Quotes to Inspire you to turn pain into beauty” https://www.goalcast.com/2017/11/28/17-frida-kahlo-quotes/

the digital retrospective of Frida Kahlo launched by Google

https://artsandculture.google.com/entity/frida-kahlo/m015k04?hl=en

Lieux Ordinaires (Ordinary Places) – Surveillance as a storytelling medium

Lieux Ordinaires (Ordinary Places) – Surveillance as a storytelling medium

Recitation 8: Serial Communication by Haiyan Zhang

Part One: Etch A Sketch

For this exercise, use Arduino to send two analog values to Processing via serial communication. To do this, build a circuit with two potentiometers and write an Arduino sketch that reads their values and sends them serially. Then write a Processing sketch that draws an ellipse and reads those two analog values from Arduino. This sketch should modify the ellipse’s x and y values based on the input from Arduino. Just like an Etch A Sketch, one potentiometer should control the ellipse’s x-axis movement, and the other should control the ellipse’s y-axis movement. To see how an Etch A Sketch works, you can watch the video here.

Once you have it working with an ellipse, modify the code to use a line instead (like a real Etch A Sketch).  To do this, you will need to keep track of the previous x and y values so that you can draw a line from there to the new x and y positions.

Arduino Sketch

void setup() {
Serial.begin(9600);
}

void loop() {
int sensorValue1 = analogRead(A0);
int sensorValue2 = analogRead(A1);
int mappedvalue1 = map(sensorValue1, 0, 1023, 0, 600);
int mappedvalue2 = map(sensorValue2, 0, 1023, 0, 600);
Serial.print(mappedvalue1);
Serial.print(“,”);
Serial.print(mappedvalue2);
Serial.println();
delay(1);
}

Processing Sketch

import processing.serial.*;
String myString = null;
Serial myPort;
int x;
int y;
int NUM_OF_VALUES = 2;   
int[] sensorValues;      

void setup(){
 
 size(600,600);
 background(210,237,254);
 setupSerial();
}

void draw(){
  updateSerial();
  
  stroke(random(100),random(100),0);
  strokeWeight(3);
  line(x,y,sensorValues[0],sensorValues[1]);
  x = sensorValues[0];
  y = sensorValues[1];
}

void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[ 5 ], 9600);
  // WARNING!
  // You will definitely get an error here.
  // Change the PORT_INDEX to 0 and try running it again.
  // And then, check the list of the ports,
  // find the port "/dev/cu.usbmodem----" or "/dev/tty.usbmodem----" 
  // and replace PORT_INDEX above with the index number of the port.

  myPort.clear();
  // Throw out the first reading,
  // in case we started reading in the middle of a string from the sender.
  myString = myPort.readStringUntil( 10 );  // 10 = '\n'  Linefeed in ASCII; 10 means linebreak in ASCII code 
  myString = null;

  sensorValues = new int[NUM_OF_VALUES];
}



void updateSerial() {
  while (myPort.available() > 0) {
    myString = myPort.readStringUntil( 10 ); // 10 = '\n'  Linefeed in ASCII
    if (myString != null) {
      String[] serialInArray = split(trim(myString), ",");
      //put them in the array in this way. remember to put a coma between so that the computer understands 
      if (serialInArray.length == NUM_OF_VALUES) {
        for (int i=0; i<serialInArray.length; i++) {
          sensorValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}

Preparatory Research and Analysis by Haiyan Zhang

 
Part one 

My visit to Choronus Exhibition was a confusing yet adventurous experience, I would put it this way. Compared to other exhibitions of non-technology based artwork, the significance of the technology-based art pieces seemed to be rather ambiguous and indirect at the first encounter. Apart from looking for a literal introduction, I was always wondering “Is this project interactive? Can I touch it? What changes are taking place?” However, my past experience of non-technology based exhibitions were more straightforward. Although most of the time I need to actively think about the non-tech work’s meaning too, these tech-based artwork seems to require more active thinking and a full body interaction sometimes. Therefore, as a visitor, I have to be more active to recieve information or even generate information. Below attached are videos of a couple of projects from the exhibition.

PART TWO

The first interactive project that I researched into is ‘Self-Choreographing Network’(link shown in reference). It is “created by Mathias Maierhofer and Valentina Soana at the Institute for Computational Design and Construction (ICD / University of Stuttgart)”. This is a project “that aims to challenge the prevalent separation between (digital) design and (physical) operation processes of adaptive and interactive architectural systems”.

The other project that I looked into is “Ordinary Places” created by Anouk Zibaut.  “The project makes use of surveillance cameras available and completely free of charge on the Insecam.org website. By Anouk’s desire to contemplate the ordinary, she used a selection of cameras to produce an experimental film. Idea here is to be able to edit the video streams she selected live to drive a narrative, themes and images to build a fictional story”. (Link to the full article is shown in the reference.)

Unlike my first research when I decided that an immersive film experience (the Bomb) is less interactive than the other one in which the users interact with the installation by approaching it and seeing changes in its projection of a radio spectrum(Hertzian Landscapes) for by then I had contemplated on interaction as a process that requires more physical movements and the installation will respond in real-time according to those movements. However, this research and my experience in the Chronous Exhibition lead me to think in the other direction. I would say the second project “Ordinary Places” is more interactive to most users rather than the first project “Self-Choreographing Network”. Of course both projects require equal contribution to technical engineering and programming. While the first’s algorithm seems to be more complicated, its concept being a lot about movements, spatial arrangement and human-object interaction in real time, the second seems to be a medium that I, as an ordinary audience who might watch the “Ordinary Places”, am more familiar with. The fact that I am more familiar with the medium triggers more possible and profound interaction in my mind and life after I visited the installation. It is a matter about contemplation and reflection from the user themselves rather than the predetermined interaction in the first project (definitely no offense and I’m going to make a clarification about this statement). 

To me personally, “Self-Choreographing Network” seems to be a complicated interaction. Though it doesn’t require so much pre-knowledge about how the creators made it, the concept itself seems foreign to me. Also, although the movement varies from time to time, the format is quite pre-determined. The variation is of course amazing and deserves my awe. Nonetheless, I wonder how long my curiosity will last and how soon it will be defeated by my confusion. 

However, still, I think this is a question depending on the targeted audience. But for the second project “Ordinary Places”, although receiving information from a film-like format seems to be more passive on the surface. I think the fact that “surveillance in our daily life” is a subject that the targeted audience cares about so much that their curiosity and attention would immediately be drawn towards this installation/ film. It requires active commitment from the audience as long as they are intrigued by the subject and eager to understand. Therefore, it is not a one-way speech spoken towards anyone. Rather it is a mutual conversation happened in silence but in long term. We bring the confusion and inspiration back home and stay aware of the issue in days after that experience. For this point, “Self-Choreographing Network” will definitely do the same to its targeted audience. But for me at this point, “Ordinary Places” is a project that speaks more to me regarding its research subject. And it is more interactive for I will definitely be inspired and contemplate more in my life.

PART THREE

During my group project stage, I defined interaction/interactivity as:

a multi-actor participating process which normally conveys preset ideas and generates new messages in various relationships built by actors. Messages are conveyed through medium and received/ mutually communicated by different senses. 

This definition is substantially supported by reading we’ve done in the first two weeks.  In “What Exactly is Interactivity?”,  Crawford chooses the word “conversation” and accordingly gives a concise definition of “interactivity”: “a cyclic process in which two actors alternately listen, think, and speak”.

However, when executing my mid-term project and watching other colleagues’ presentation of their mid-term projects, one thing that inspired me is: interactivity doesn’t necessarily have to be literally “multi-actor”. Of course, when speaking of “multi-actor”, we tend to include the installation itself. But for human part, one actor can be enough. Moreover, it doesn’t have to ambitiously involve “various relationships built by actors”. Rather, one single format, one relationship is adequate and efficient if the preset ideas are clear and inambiguous to the audience. Also, supported by my reflection over the research projects, I reckon that the level of interactivity also depends on the targeted audience. Are the audience related to and familiar with the research subject or the medium itself? In other words, if the audience are not familiar with the subject, then is the interface clear enough to inform them what to do and what to get? More importantly, interactivity never stops at the sensory levels such as hearing, speaking, smelling, seeing etc. It should ultimately involves thinking/reflecting or intuitively feeling something. 

Based on these contemplation through experience, my improved definition of interaction/ interactivity is: 

An experience that invites the other actor/ actors to activate their multiple senses and gives back real-time reactions. A higher level of interaction, however, will further stimulate an inner experience/ journey of mind contemplation and intuitive reflection rather than all kinds of external movements. 

Reference

Choronus Exhibition

Self-Choreographing Network – Cyber-physical design and interactive bending-active systems

Self-Choreographing Network – Cyber-physical design and interactive bending-active systems

Lieux Ordinaries(Ordinary Places) – Surveillance as a storytelling medium

Lieux Ordinaires (Ordinary Places) – Surveillance as a storytelling medium

Individual Reflection of Group Project 1 by Haiyan Zhang

Individual Reflection of Group Project 1 by Haiyan Zhang

“What exactly is interactivity?” from The Art of Interactive Design, Crawford (pages 1-5)