mac online apple blackjack

Digital Media Project: A Moonish Installation


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++) {

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)
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() {
//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

// small flower
if (sensorValue>300 && sensorValue<=400) {
fill(0, 180);
shape(SVG09, x+10, y+10, sensorValue+15, sensorValue+15);
shape(SVG01, x+10, y+10, sensorValue+15, sensorValue+15);
// bigger flower
else if (sensorValue>400 && sensorValue<=500) {
fill(0, 180);
shape(SVG03, x-20, y-20, sensorValue+20, sensorValue+20);
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”);;
fill(random(0, 100), random(0, 100), random(0, 100), 80);
shape(SVG51, x-60, y-60, sensorValue+60, sensorValue+60);
fill(random(100, 200), random(100, 200), random(100, 200), 150);
shape(SVG61, x-50, y-50, sensorValue+35, sensorValue+35);
fill(random(200, 255), random(200, 255), random(200, 255), 50);
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);
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(){

void loop(){


Pure Data Part:

Digital Media Project: Original Inspiration

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.

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

Digital Media Project: References


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.

The designed flower’s shape (made by Illustrator):

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.

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.

Wands, B. (2006). Art of the digital age. New York: Thames & Hudson.
Kac, E. (1999). Available at: [Accessed 15 May, 2014].

Digital Media Project: Process of making an installation

Screen Shot 2014-04-07 at 15.18.49

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.

The shape of top side:
The improved shape was designed by several smaller shapes to avoid the risk.

The shape of 4 sides:
This shape was also based on the character of the zoom in and out effect.

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! 

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

Trial (Cracked):

Gluing the fundation:



Digital Media: Homework (Processing)


“atomic flower”
In this experiment, I have tried to experiment the parameter of scale and transparency which is by reference to ‘Rotating Quads’ (Michael, 2012). There are three ellipses will do the effect of zoom and curve simultaneously because of the variation of scale when I press mouse button.

The last experiment is mainly based on the content of this session. But I realised that the number is increasing sequence when I wanted  to let them array line by line. It seems that the easiest way is that I can get a try to change the ‘x’ position, and then, it works – the rectangles will move from left to right once I run it. Besides, I also get a try to add the function of colorMode into this experiment from the included examples of Processing.

In this exercise, I mainly focus on doing the exercise about how to change the number by ‘float/int’ and change ellipses’ size randomly by loop function, and I also add the ‘save(“image.jpg”);’ and ‘exist();’ function which was taught by Ping.

Exercise (change the code based on other’s work):

I change the parameters and add some codes that we have learned in the session based on the reference of ’dashedCircle’ (McDonald, 2011), which colours can be varied by mouse and the shape can be different (e.g. line, triangle and half of polygon etc.) by changing the parameter. After doing several testing of changing parameter of shape, I am satisfied to polygon which makes the background appear linen texture. However, I am not quite satisfied to green colour on this image…!!!

McDonald, K. (2011). Dashed Circle. Available at: Openprocessing, (Accessed 27 January, 2014).
Michael (2012). Rotating Quads.  Available at: Openprocessing,  (Accessed 28 January, 2014).