Uncategorized

For my project 2, I want to make something based on Tarot cards and their principles, mostly about the main cards, which are also referred to as major Arcana. There are 22 of them, numbered from 0 to 21. The deck starts with the card “The Fool” which indicates the start of a journey and endless possibilities, and ends with the card “The World”, which indicates end of the cycle of life and achievements. The whole deck indicates a journey of life, I want to use this to inspire my audience to explore the endless possibilities of life.

What I am going to do is to create three puzzles which are not that difficult to solve, the first one with the theme of starting with The Fool, the second one with the theme of ending with The World, and the third one to propose the thought of “endless possibilities”. 

The aim of the project is to create some interesting interactive experience, while proposing some thoughts about try different possibilities of life.

The project was originated from a Chinese novel I was reading, the name of which was “诡秘之主”， it was a story about Tarot and mysteries, which leads to my exploration of this and also this project I want to make.

Recitation 8

For this recitation, I created a web page to introduce my p5 project, Optimus prime. What I mainly have done is include a heading and a description for the project. For the heading, I viewed Google font, trying to find something cool and provide a sense of science fiction, and I found “Rubik Pixels” it looks like a combination of pixels providing a perfect feeling. I used the <span> code to change the color of Optimus Prime to make it more characteristic and beautiful.

For description part, I used black background and white words to emphasize them, I also included a link to change the color of Optimus Prime, which is actually a link to the page itself and it’s purpose is to refresh the page, I changed the color of the link to make it more natural in the text

I also changed the background color.

During the whole process, I didn’t encounter some really big problems, when forming the font and the color of the link, I do need to refer to previous slides and demo codes to better understand how to do those.

Here’s the screenshot.

 

Reading Reflection 3: New Media Art – Introduction

This article mainly introduces new media art, a new form of art to us, the author thought that new media arts are those arts created with the help of or using the web technology, including game art, hacker, videos, remote control and other interesting forms of art. Although the definition of the art is not really different nowadays, the things included in web art has increased a lot. In my opinion, all of the things people regard as art and was created with the help of web and media technology can be recognized as new media art. Emojis can be one of them. People used punctuation marks as emojis at first, such as “:)”, which later developed into all kinds of faces in different modes and other elements, which can be recognized as a kind of new media art. Also, memes can be included, they are created with certain purpose, mostly sardonic, the creators used web technologies to develop them, so they are also new media art. Games can also be one, especially those created with aesthetic purpose, such as Monument Valley.

Ken Goldberg’s Demonstrate is a great new media art. The artist, Kenneth Yigael Goldberg is an American artist, writer, inventor, and researcher in the field of robotics and automation.  It was in 2004, he showed the public on the Internet the archive of 1200 photos and textual comments, which offers a portrait of public space as viewed from the public in cyberspace. The pubic space is in University of California Berkley, and the art project is originally designed to coincide with the 40th Anniversary of the Free Speech Movement. It attracted nearly 4000 participants around the world, which was proved to be a success.

Another masterpiece, which was developed before 2000 was Rara Avis from Eduardo Kac. Rara Avis is an interactive telepresence work in which local and remote participants experienced a large aviary with 30 birds from the point of view of a telerobotic macaw, the user can first sees an aviary in which is a large robotic macaw that has a camera installed in his head and the head will move from one side to the other with other 30 birds, then, by putting on a helmet, the users can experience all these from the macaw’s point of view. By enabling the local participant to be both vicariously inside and physically outside the cage, this installation created a metaphor that revealed how new communications technology enables the eliminate boundaries at the same time that it reconstruct them. The project is so interesting and interactive that we can hardly believe its created in 1996.

New media art is a new form of art, they are more accessible then previous means and much more interactive.

The Light of Civilization

For the mid-term project my inspiration comes from one of the artwork “Big city” I saw at the field trip.

It made me thought of the beautiful scenery I witnessed on a plane at night. The light of the city are like belts and patches, creating a feeling of prosperous, like the following:

The two pictures above are where my references and where my inspiration come from

I want to use generative art to reproduce that kind of feeling, and the name of the project will be “The Light of Civilization” The procedure of the drawing is as follows: users are asked to draw several lines using the mouse on the white canvas, which will serve as main roads of the city, then the canvas will turn into black and the lines will appear in golden color with halos around, there will be dots and patches generating around the canvas, and more around where the lines intersect with each other, the dots will be randomly generated so every time the picture will be really different. 

Here’s the prototype

 

Here’s the link to the presentation: https://docs.google.com/presentation/d/1eIOBJYFY9pPwrC0bqOnuAtRMCkfcq4jc6QJV-SDrHCA/edit?usp=sharing

Recitation 6 Object Dancers

I used the creature Optimus Prime I created last time as my dancer and added more moves including the transforming process I designed last time.

the link the project is here: https://editor.p5js.org/zzrrqqq/sketches/ZmieIzvWA

When doing the coding, I encounter two difficulties, the first one is where to use the property “this.” and were not to use that, after checking the previous example codes and the instruction of p5, I think for new functions created within the class, there’s no need to add the “this.”, otherwise, “this.” is needed.

Another problem is about the animation, since it should be totally automatic and it should be able to both do a motion and the reverse. So I added another variable to indicate what status is my dancer in right now to decide what step to take next then I don’t need to add more parameters to accomplish that.

here’s the link to the demo video https://youtube.com/shorts/vyFotL4d5vo?feature=share

Reflection:

1. Containing everything within the class makes it easier to combine codes together without making changes, it also make the code much more clear when we need to create more than one class.

2.We need to consider the size of what we are drawing, also, if we know what other’s drawings are like, we need to consider the style, the color and the pace of dancing together with other factors to make the picture harmonious with others’

3.For example, for my dancer, whose legs look the same, then modularity can enable me to use the same code for several times for the repeated work. Making movement and drawing separate enables me to change the things I want to change without influencing others, for example, I can simply change the parameter with in the move module to change the speed of the animation, if it’s not modularized, then I need to modify every function  with the variable in the code to change the speed. Also, I can create different animations with the same character without writing the same display code for one more time.

 

Recitation4

This time my work was totally a surprise when I was doing exploratory coding.

Basically I wanted to use for loop to draw a pattern with sine function and I got this

then I changed some variables and create to more patterns.

Then I tried to make something new by rotating the blue pattern, that’s when some unexpected changes happen. I added the code translate(300,300); rotate(90); and the result is a total surprise.

I found it really interesting and beautiful, s0 I changed the variables of size, color and intervals, or even combine two patterns together,which helped me get several more patterns

What is really a pity is that I couldn’t understand how exactly the pattern is generating, I tried to modify the code, but never succeeded in moving the pattern to the middle of the canvas.

the following is the code of my favorite pattern, the left one in the second row.

function setup() {
  createCanvas(600, 600);
  background(220)
  
  
  // YOUR CODE HERE
  // .. variables that accumulate values
  // .. loops
  // .. transformations
  // .. conditionals
  // .. randomness
  for (let x=0; x<width; x+=0.5){
    noStroke();
    fill(25,x,x*sin(x))
    circle(x,50*sin(x)+100,10);
    translate(300,300);
    rotate(90)
    fill(160,x*0.37,x*0.4);
    circle(x,25*sin(x)+100,10);
    
    
    
    //fill(242,146,27);
    //circle(2*x,50*sin(x)+100,10);
    }
  
  
  
  // AFTER YOUR CODE HAS RUN:
  saveCanvas('yourname', 'png');   // saves the canvas as a png image
} 

here’s the link to p5 https://editor.p5js.org/zzrrqqq/sketches/p69E1m8Cm

 Reflection:

1.This time the largest difference is that when drawing by computer, one may get something totally different from what they expect, and that can be a surprise, but when drawing by hand, most of the times the result is fixed, even if there is a surprise, it could only be a small one. And for commonalities, I think both ways of drawing needs designing and choosing of color.

2.I used the for loop function and rotate function, the formal one is really convenient to use and change, which means I can generate different images with the same logic with some slight changes. The latter one is quite interesting as it may create something really surprising while beautiful.

3. I think the most important factor is whether the pattern is logical. For example, if you have some dots or lines, they should either obey a certain rule or logic or represents some concrete things. If they are just randomly generated lines, even though they might be beautiful, that’s not a good generative drawing. The second factor is the choose of color, they should be in a harmony, there should be some functions instead of random generated color.

Recitation 10

I wanted to create the animation of light blooming in the dark using the following picture.

And I used a light sensor to apply statistics to control the size of the picture. The process of coding and circuiting is quite well. However, the final animation is not that beautiful, it’s mainly because the background of the picture is not black and I used black as the background of the processing canvas, that brings about problems.

The following are the codes and the video:

Arduino:

#include "SerialRecord.h"

SerialRecord writer(1);

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

void loop() {
  int value = analogRead(A0);
  writer[0] = value;
  writer.send();

  
  delay(20);
}
 

Processing

import processing.serial.*;
import osteele.processing.SerialRecord.*;
PImage light;

Serial serialPort;
SerialRecord serialRecord;

void setup() {
  size(432, 768);

  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);

 
  serialRecord = new SerialRecord(this, serialPort, 1);
  
  light = loadImage("1.jpeg");
}

void draw() {
  background(0);
  serialRecord.read();
  int value = serialRecord.get();
  imageMode(CENTER);
  image(light,216,384,value*432/1000*2,value*768/1000*2);

  
}

Video and Circuit:

 

Recitation 9

I’m paired up with Leon

I followed the instructions to make the part B and my own pattern.

For my own pattern, my inspiration came from the function of drawing graphs of Cuttle. So I just drawn a sin graph and a cos graph adjust some of the statistics and apply the relation,  they combine together to make a beautiful graph as follows.

Then I added the rectangle in the middle, however when it comes to laser cutting Andy says it wouldn’t work because of too much hollows in the middle, he added a bigger rectangle in the middle to make the whole thing stable and that really work.

 

After the laser cutting, we assembled everything and it worked quite well.

Recitation8

Task 1 

Since we have those examples, so the basic procedures went well. I connected the circuit, used analog read code to test it, and then used the example code and made some adaptions to complete the task.However, I do encounter two problems, the first is that when trying to draw the lines, there is only one point, later with professor’s help, I discovered that it’s because I put the background code in the “void draw” session, which will set the background every time the code runs, thus covering the previous dots. The second problem is that the point showing the statistics read is changing between two points even though I didn’t adjust the potentiometer. After some testing, I think one of the potentiometers is broken, after using the circuit of others(which is the same with mine). The problem is settled.

I forgot to shot a video, here’s the photos.and the code

#include "SerialRecord.h"

// Change this number to send a different number of values
SerialRecord writer(2);

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

void loop() {
  int sensorValue1 = analogRead(A0);
  int sensorValue2 = analogRead(A1);

  writer[0] = sensorValue1;
  writer[1] = sensorValue2;
  writer.send();

  //Serial.println(sensorValue1);
  //Serial.println(sensorValue2);


  // This delay slows down the loop, so that it runs less frequently. This can
  // make it easier to debug the sketch, because new values are printed at a
  // slower rate.
  delay(10);
}



import processing.serial.*;
import osteele.processing.SerialRecord.*;

Serial serialPort;
SerialRecord serialRecord;
float px;
float py;

void setup() {
  size(500, 500);

  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  background(102);
  // If the Arduino sketch sends a different number of values, modify the number
  // `2` on the next line to match the number of values that it sends.
  serialRecord = new SerialRecord(this, serialPort, 2);
}

void draw() {
  

  serialRecord.read();
  int value1 = serialRecord.values[0];
  int value2 = serialRecord.values[1];

  float x = map(value1, 0, 1024, 0, width);
  float y = map(value2, 0, 1024, 0, height);
  stroke(255);
  line(x, y, px, py);
  px=x;
  py=y;
} 

Task 2

As we don’t have enough materials, so I teamed up with Hanwen and Leon.

We worked on the code together using Leon’s computer as I was familiar with the code of servos and Hanwen and Leon worked together to make the ball bouncing . During the whole process, the servos keeps on moving randomly at first, which is because our code involves sending massage to Arduino all the time. With Professor Gottfried’s advice, we changed the code to let it only send some message when the ball reaches the margin, then it went quite well.

The following are the code and the videos.

#include 
#include "SerialRecord.h"
SerialRecord reader(1);
Servo myservo;
Servo myservo2;
int value;
void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  myservo.attach(8);
  myservo2.attach(7);
}

void loop() {
  // put your main code here, to run repeatedly:
  if (reader.read()){
  value=reader[0];
  if (value==0){
    myservo.write(100);
    delay(250);
    myservo.write(0);
  } else if (value==1){
    myservo2.write(100);
    delay(250);
    myservo2.write(0);
  }
}
} 

import processing.serial.*;
import osteele.processing.SerialRecord.*;
Serial serialPort;
SerialRecord serialRecord;
int x;
int add=10;
void setup(){
  fullScreen();
  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 115200);
  serialRecord = new SerialRecord(this, serialPort,1);
}

void draw(){
  background(0);
  fill(255);
  stroke(0);
  circle(x,height/2,50);
  if (x>=width){
    add=-add;
    serialRecord.values[0]=0;
    serialRecord.send();
  } else if (x<0){
    add=-add;
    serialRecord.values[0]=1;
    serialRecord.send();
  }
  x=x+add;

} 

Final Project: Research

The first interactive project that came to me is actually not a visual art project. Instead, it’s a kind of street magic performance which is popular in some regions in China several years ago. Which is called “I can know what your last name is even though you don’t tell me”. The ‘magician’ will dress like a Taoist priest, which is similar to the alchemist in the western world. They will give you several cards, each of them has around thirty last names on it and they’ll ask you to tell whether your last name is there. After testing about 7 cards, they can actually calculate the last name using some knowledge about the binary system. The whole process is actually not that interesting, but with the mysterious appearance and words, the experience is quite appealing. Those magicians will add some ‘spells’ or do some gestures showing they are using ‘magic’ to attract customers and make the whole experience more ‘real’. Just as what Ernest Desmond said in his article ‘Art, Interaction and Engagement’:A significant part of art making, for me, is the development of an understanding of the forms and material being used. Those ‘magicians’ have a deep understanding on what their project is, they choose the best character the best language, gesture posture and clothes to perform it, that’s what really impressed me. The following picture is one of those ‘magicians’. The clothing make people’s first impression on him is something like a prophet.

Another interactive project is actually a series of projects. I saw them in different museums and exhibitions, they usually convert traditional Chinese art masterpieces like paintings or chinas into visualized interactive project, for example, the following example make some cattle in the traditional Chinese paintings into 3D version and make them moving and interacting with audiences. This reminds me that those so-called interactive projects needn’t to be totally original, making some of the art masterpieces interactive is also a great approach. As long as the way to adapt them fits their original character and the works do make them interactive instead of just making them moving, then these can also be interactive projects. Take this project as an example, the moving cattle are moving slowly and leisurely, their interaction also obey the same character, which is also the painter wanted to show when creating this masterpiece, in this case, the interaction project is a quite successful one.

Just as what I mentioned in the documentations of the previous two projects. The interaction should always consider the experience of the audience. To some extent, the aim of the project is to interact, so it needs to make the audience willing to interact and willing to keep on interacting, so all of those projects needs to make something to arouse and keep the audience’s interest, like the gestures language and clothes of a Taoist priest in the first interactive project, the audience or the participants find it interesting, then they will explore this more. I learnt this when I found the peers show more interest in the project involving Tom and Jerry in the mid-term user testing, then our rough maze, and I believe it’s one of the most important principles. Another point is of course creativity, I ‘m not saying the project should be totally original, but it should possess something really new, something that will make people feel like ‘wow, I have never thought about this’. The it’s successful , like the project made by Zach Lieberman, which uses sensors to capture eyesight to draw graffitis. That is more Tham creative, make the whole process a surprise and appealing. So being creative is also a key factor.

References

1. manamana.net

2.Ernest Desmond <Art, Interaction and Engagement>

3.baidu.com (searching for the first interactive project)