Yinzhen Bao :)

May 15, 2014

Digital Media Project: A Moonish Installation

Filed under: DigitalMediaProject,DMS8013,PersonalProject — yinzhenbhao @ 1:29 AM

Documentation of A Moonish Installation

Flashy Version (the version with ringing sound)


Creative Arts Practice for Digital Media Project 2014.

This interactive installation is controlled by Arduino and a USB camera, which captures the light status and ‘request’ the light by the way of ringing and changing colour of the rotatable flower randomly to attract participant’s attention if too much light is blocked on the top of the installation. It shows the opposite colour (i.e. white for the demand of dark and black is for the need of light source) in alternative light condition (dark / bright) that the installation can be captured, and impels the participant to response it as a part of the creation.

The code was programmed by Processing and Pure Data and outputted by two different visual forms through interaction. This installation was designed to invite participants to ponder the perception and interaction, immersion and embodiment, partial and the whole by digital arts throughout the interactive process.

—————————————————————————————————————-
Project Code:

Processing Part:

import ddf.minim.spi.*;
import ddf.minim.signals.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.ugens.*;
import ddf.minim.effects.*;

import processing.serial.*; // import the Serial library
Serial myPort;

Minim minim;
AudioPlayer sou; // variable name

float sensorValue;
float angle = 0;
int x = -142;
int y = -112;
int smallPoint, largePoint;

PImage img;

PShape SVG01;
PShape SVG02;
PShape SVG03;
PShape SVG04;
PShape SVG05;
PShape SVG06;
//PShape SVG07;
PShape SVG08;
PShape SVG09;
PFont font; // showing the sensorValue

void setup() {

// font = loadFont(“Serif-24.vlw”);
size(1300, 800);

// println(Serial.list()); // print a list of available serial ports
/* better way to print this
for (int i=0;i<Serial.list().length;i++) {
println(“[“+i+”]”+Serial.list()[i]);
}
*/

myPort = new Serial(this, “COM7”, 9600);
myPort.clear(); // Empty the buffer, removes all the data stored there.
myPort.bufferUntil(‘\n’); // Throw out the first reading, in case we started reading
// in the middle of a string from the sender. (start buffer Until “\n” is read)
smooth();
SVG01= loadShape(“img1.svg”);
SVG02= loadShape(“img2.svg”);
SVG03= loadShape(“img3.svg”);
SVG04= loadShape(“img4.svg”);
SVG05= loadShape(“img5.svg”);
SVG06= loadShape(“img6.svg”);
// SVG07= loadShape(“img7.svg”);
SVG08= loadShape(“img8.svg”);
SVG09= loadShape(“img0.svg”);
SVG51= loadShape(“img51.svg”);
SVG61= loadShape(“img61.svg”);
SVG81= loadShape(“img81.svg”);
}
void draw() {
background(255);
fill(0);
//textFont(font, 24);
// text(“sensorValue= “, width*0.3, height/2);
// text(sensorValue, width*0.55, height/2);
pushMatrix(); // save the current coordinate system to the stack
// translate to the center of screen
translate(width/2, height/2);
// rotate everything when the frameCount adds up
rotate(frameCount*0.01);

// small flower
if (sensorValue>300 && sensorValue<=400) {
fill(0, 180);
SVG09.disableStyle();
shape(SVG09, x+10, y+10, sensorValue+15, sensorValue+15);
SVG01.disableStyle();
shape(SVG01, x+10, y+10, sensorValue+15, sensorValue+15);
}
// bigger flower
else if (sensorValue>400 && sensorValue<=500) {
fill(0, 180);
SVG03.disableStyle();
shape(SVG03, x-20, y-20, sensorValue+20, sensorValue+20);
SVG04.disableStyle();
shape(SVG04, x-30, y-30, sensorValue+25, sensorValue+25);
}
// random colour
else if (sensorValue>500 && sensorValue<=700) {
//Audio is triggered
minim = new Minim(this);
sou = minim.loadFile(“ESA_installation.wav”);
sou.play();
fill(random(0, 100), random(0, 100), random(0, 100), 80);
SVG05.disableStyle();
shape(SVG51, x-60, y-60, sensorValue+60, sensorValue+60);
fill(random(100, 200), random(100, 200), random(100, 200), 150);
SVG06.disableStyle();
shape(SVG61, x-50, y-50, sensorValue+35, sensorValue+35);
fill(random(200, 255), random(200, 255), random(200, 255), 50);
SVG08.disableStyle();
shape(SVG81, x-60, y-60, sensorValue+40, sensorValue+40);
}

// else if (sensorValue>700 && sensorValue<=800) {
// fill(random(0, 100), random(0, 100), random(0, 100), 100);
// }
else {
fill(255, 150);
SVG08.disableStyle();
shape(SVG08, x+30, y+30, sensorValue+300, sensorValue+300);
}

popMatrix(); // restores the prior coordinate system
}

void serialEvent (Serial myPort) { // SerialEvent is called when data is available.
// get the ASCII string:
String inString = myPort.readStringUntil(‘\n’);
if (inString != null) { // only does the following when there is something
// convert to a float
sensorValue = float(inString);
}
}

Arduino Part:
void setup(){

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

//Serial.println(sens);
Serial.println(analogRead(0));
delay(500);
}

Pure Data Part:pdGem

May 14, 2014

Digital Media Project: Original Inspiration

Filed under: DigitalMediaProject,DMS8013,Idea — yinzhenbhao @ 12:51 AM

The inspiration of this project stems from the concept of human-environment interaction. It is the experiment that converts human’s perception of light to embodied visual experience in two different ways, which invites participants to experience the mutual relationship between human and the environment. Meanwhile, this project is also conceived in terms of exploring human perception through mirror image to rethink immersion and embodiment, observation and interaction, partial and the whole through the form of digital art.

Human Environmental Interactions can be defined as interactions between the human social system and (the “rest” of) the ecosystem. Human social systems and ecosystems are complex adaptive systems (Marten, 2001). 

Although digital media in the context of exploring human experience by technology, it could be a different way to establish a new perception through the interaction of human and environment based on the possibility by using digital technology. It has broader forms of exploring environmental needs instead of users’ needs in this field to address the issue, such as energy conservation (e.g. lighting, temperature and electronic energy etc.) in a space.

Reference
Lill, A and Gräber, S. (2006). Human Environmental Interactions.  [Accessed 14 May, 2014]

May 13, 2014

Digital Media Project: References

Filed under: DigitalMediaProject,DMS8013 — yinzhenbhao @ 9:01 PM

Reference of Image:
I referenced Tibet Arts in terms of making the flower’s shape. This inspiration was risen when I discussed with Ping about this project in the end of March, and the part of the purpose of using flower was to try to get the connection between daily object with abstract art form and technology. The art forms of abstract geometry in Tibet Arts have a variety of forms, which could be found as the relatively ideal references from them.20140514140313

The designed flower’s shape (made by Illustrator):Screen Shot 2014-05-14 at 14.06.29
Progress:
20140514144723 20140514144742

Reference of effect:
The effect of flower – rotation, was referenced by Time Flower V.1 (Li 2014). When no participant interacts with the installation or the installation is in the constant light environment, it shows the rotation.


This clock that visualizes the shape of flower according to the calibration of each second, rather than showing a conventional clock form.

Reference of two visual experience:
For the improved inspiration of digital media project, using two visual experience by hand motion was considered in terms of trying to establish a wider relationship between participants, the installation and the environment. It invites participant to experience two different version according to variable light status that the installation captures, meanwhile participants are able to see the interference and real-time changeable colour through one of the screen.

Eduardo Kac, Genesis, 1999.
genphoto1

It is and transgenic net installation, which involves in exploring the relationships between biology and information technology. The artist focused on real-time information translation of the Book of Genesis by DNA base pairs of biological mutations of bacteria. Participants could turn on an ultraviolet light remotely to  disrupt the DNA sequence of bacteria, and two visual images (active bacteria and the large-scale text) can be observed on two screens  at the same time.

Reference
Wands, B. (2006). Art of the digital age. New York: Thames & Hudson.
Kac, E. (1999). Available at: http://www.ekac.org/geninfo.html [Accessed 15 May, 2014].

May 10, 2014

Digital Media Project: Process of making an installation

Filed under: DigitalMediaProject,DMS8013 — yinzhenbhao @ 7:58 PM

Each piece of installation box was designed based on the status of the virtual flower’s variation – zoom in and out. The original one was cancelled due to the consideration of crack after cutting.
Screen Shot 2014-04-07 at 15.18.49
The shape of top side:
The improved shape was designed by several smaller shapes to avoid the risk.
1 2

The shape of 4 sides:
This shape was also based on the character of the zoom in and out effect.
Screen Shot 2014-04-07 at 16.04.24
Before making the model, each image needed to be adjusted for the appropriate size according to thickness of material (4mm thickness of the perspex material). During this process, Ping taught me how to make the image by Illustrator and give the induction of using laser cutter in order step by step! very supportive!Screen Shot 2014-05-10 at 16.13.48 Screen Shot 2014-05-10 at 16.13.15

Making an interactive box. (Hurray, appropriate size to put arduino board and camera in, except the wrong size of the bottom piece!)
FxCam_1399751255958 FxCam_1399751279681  FxCam_1399751329768 FxCam_1399751367783
Testing the size:FxCam_1399751386748

Trial (Cracked):
FxCam_1399751309973

Gluing the fundation:
FxCam_1400096145442

Installing:
FxCam_1400096119516
Done!
20140514204733

April 21, 2014

Digital Media Project: Experiment of code

Filed under: DigitalMediaProject,DMS8013,Testing — yinzhenbhao @ 1:35 AM

Experiment: Processing & Arduino
What I met the biggest problem during this period was the values of ‘translate’ and ‘random colour’. The image responded unclear version when I tested the code, and it could not rotate in the center of image itself but turning around the center of the screen. The problem of rotation has been solved by changing the translate X&Y number after several experiments. Besides, I set the float ‘x’ and ‘y’ instead of exact number in the code of each image in order to make the further experiment more effective.
QQ图片20140421015231
Regarding the problem of random colour, I set the code named ‘.disableStyle();’ that was taught by allocated technical tutor of this project. This code is utilised to remove the original colour of the image and set new colour value in Processing.

Code of Images
void draw() {

background(255);
fill(0);
pushMatrix(); // save the current coordinate system to the stack
// translate to the center of screen
translate(width/2, height/2);
// rotate everything when the frameCount adds up
rotate(frameCount*0.01);

// small flower
if (sensorValue>300 && sensorValue<=400) {
fill(0, 180);
SVG09.disableStyle();
shape(SVG09, x+10, y+10, sensorValue+15, sensorValue+15);
SVG01.disableStyle();
shape(SVG01, x+10, y+10, sensorValue+15, sensorValue+15);
}

// bigger flower
else if (sensorValue>400 && sensorValue<=500) {
fill(0, 180);
SVG03.disableStyle();
shape(SVG03, x-20, y-20, sensorValue+20, sensorValue+20);
SVG04.disableStyle();
shape(SVG04, x-30, y-30, sensorValue+25, sensorValue+25);
}

// random colour
else if (sensorValue>500 && sensorValue<=700) {

//Audio triggered
minim = new Minim(this);
sou = minim.loadFile(“ESA_installation.wav”);
sou.play();
fill(random(0, 100), random(0, 100), random(0, 100), 80);
SVG05.disableStyle();
shape(SVG05, x-60, y-60, sensorValue+60, sensorValue+60);
fill(random(100, 200), random(100, 200), random(100, 200), 150);
SVG06.disableStyle();
shape(SVG06, x-50, y-50, sensorValue+35, sensorValue+35);
fill(random(200, 255), random(200, 255), random(200, 255), 50);
SVG08.disableStyle();
shape(SVG08, x-60, y-60, sensorValue+40, sensorValue+40);
}

// else if (sensorValue>700 && sensorValue<=800) {
// fill(random(0, 100), random(0, 100), random(0, 100), 100);
// }

else {
fill(255, 150);
SVG08.disableStyle();
shape(SVG08, x+30, y+30, sensorValue+300, sensorValue+300);
}

popMatrix(); // restores the prior coordinate system
}

The images below is the testing without colour variation after connected to Arduino. The shape will be changed based on the variation of sensorValue (according to capture the light intensity by photoresistor). This series of screenshoots is the version that before the problem of rotating around according to the center of one image has been solved, and it also showed another problem about the delay in responding in terms of rotation due to loading too many pictures in Processing.QQ图片20140421015529QQ图片20140421015430QQ图片20140421015458

Arduino Prototype
IMG_20140324_154931
IMG_20140403_200158

Experiment: Pure Data – Gem Patch
After almost finish to modify the code of image, I am still not satisfied with the effect in terms of either the dull outcome or the incomplete expression of concept. This problem of how to improve the project by technology annoyed me for nearly a week until I came across the book called Art of the digital age, and an installation digital artwork (Transgenic Net Installation, Kac, 1999) inspired me to continue to build it up, which will be introduced in the relevant reference account. In doing so, I references an embodied interaction tutorial on Youtube, and make some slightly change of values, including the shapes. The effect is shown as below, which is, it can capture the colour of object / surrounding by webcam.
pdGem
QQ图片20140421003822
QQ图片20140421004659
QQ图片201404210112562

Reference
morefun4art (2012) Available at: Youtube. Embodied Interaction – Puredata lesson016a [Accessed 20 April 2014].
Wands, B. (2006). Art of the digital age. New York: Thames & Hudson.

Powered by WordPress