week 14: final project documentation (Moon)

Partner: Jerry

Project Name: Ghost Talk

Link: http://imanas.shanghai.nyu.edu/~jy2122/final_project/

  • Inspiration

In this project, we want to make a detective game. However, as we think traditional detective game may be too normal as many people have made similar games, so we decided to make some different point:

1.One important element in our project is the clock. Users can interact with the clock to adjust the time, and there will be different elements accordingly.

2.The way to “detect” is the ghost communication–the soul of the dead can talk with different things and find clues in those communications.

3.The killer, in the end, is the dead himself. Because he cannot accept the truth that his wife died 1 year ago, so he had split personality disease. Part of him act as his wife and part of him act as the husband, which makes him do a lot wired things and finally leads to his death.

Actually there were several different ideas in my mind when thinking of the story, one is about AI: maybe a AI machine in this man’s room killed him because it have autonomy, so that we can provoke people’s thinking about people and AI in the future. Another one is that the man is actually living in a virtual  world like The Matrix, maybe he finally find out that all his memory is fake and his brain, his consciousness, his sense are all controlled by machine, which could also have some profound meanings. However after discuss we decided to choose the split personality story as it is easier to convey the message.


  • Working process

First is to have a basic idea of what’s going on in this story, in other word, how split personality killed the man? Then I came up with the idea that the man’s wife has illness, and he fed his wife with the medicine that day–which is feeding himself the medicine. But the medicine is harmful and poisonous to normal people, which makes sense, and he dies because of it.

Then, we decided the materials would be in comic format, as it would be very time-consuming if we take video, also, real video recording have too much restriction, and comic picture would help convey our ideas a lot. So we began to searching for suitable pictures. As learned from my comic project, all the pictures and elements in our picture is “from the same world”, though it is very difficult to find many pictures of the same style, but it worth the time because it makes the visual effect a lot better. There are something I want to stress about the pictures:

  1. The dead man: I  make the picture all in grey, because I don’t want to show the gender of the dead very clearly at the beginning, as he act as both the wife and the husband. I first use cut out the died man part from a picture then us PS to make it into grey and deal with some details.

2.The goldfish: Because time is a important element  in this story, so at 11am, there are three alive goldfish, and 2pm, there is only 2 alive, with one dead. This gives user the information that the goldfish died because of lack of food, and the man’s wife is responsible of feeding them. At first this is the materials:(the original picture only have 2 fish)

But after some user test, people said that the dead fish in the 2pm picture is not clear enough, so we finally decided to made the dead picture out of the bowl–on the table, which is much clear.

3.picture on the wall: There is a portrait of the deceased for his wife, but the man hide it behind a picture on the wall. This is the original picture I found in the Internet:

however, the wall in the picture is not horizontal:

if put the picture directly on the wall, it looks wired, so I changed the shape to make the Perspective Effect:

Finally, because a bare picture on the wall look not very natural, so I drew a nail and lines there, so this looks more like a mural painting hanging on the wall. And in the game, users can remove the picture to find out the portrait of his wife.

4. Because time changes, so the light should be different. We put the two pictures together and adjust the opacity of each one to make it get darker. Here are the four different background pictures. (Pay attention to the light and the setting sun effect outside the window)

5. Also, because we want the “ghost” to “shaking” rather than stay still, but no css animation can satisfy us, so we first use AFTER EFFECT make this still image to a gif, then we cut the black background frame by frame to achieve the effect we want.


The Script is another important part, as we rely on the words to tell the story and the fact. Because split personality, we need to show the contradiction between his memory and the fact, so we think a dialogue between the soul and the things should be a good way rather than only the things tell what they “see”. We wrote the dialogue directly in the txt so that they can appear on website:

Then, because we think that have a voiceover would be super helpful, so we asked a friend to record the man’s voice. However, for the objects, in order to create a sense of non-human, we used virtual sound which assembles by machines. In this circumstance, we use google voice Api to constantly turns text into audio.

  • Reflection

Overall I like our project, but there are some point I think we can improve:

1.I think we can have a more logical story to make the end more surprising to users. I think it would be better if at first people assume the murder is someone else, and finally find out that it is the murder himself. But in our current story, the only suspicious people is the delivery man and the wife, and there are not many information which can mislead users to think the delivery man is the killer. Though we tried our best to form the story, maybe there are still some details that we can improve. Maybe if we have more time, we can read more detective novels and it can help us construct the story.

2.Another thing we may improve is the animation. Because our project is based on static pictures, the only dynamic thing is the “core flame”. If we have more time we may put more dynamic things on the picture to make it look better, for example, we can make the goldfish swimming, make the shadow moving with the time. Also, when the soul merge with the “core” of different things, there could be flicker to make it looks more amazing。

3. There are some minor logic problems regarding the sequence of the items. Because I wrote the dialogues based on time, so we restrict people “jumping” from time–people need to follow the time sequence. Also, inside one single period, we make the “fire” to appear one by one if there is strong logic, for example, the medicine and ring in 4pm. But inside some period, such as cup and TV in 10am, it should better to first talk to cup then talk to TV, because the conversation with TV begin with “Hi! The cup told me there was a person came here at 10am or food delivery, did you see that?”, which causes a time sequence. But we didn’t notice this beforehand, and this need to be improved.

4.I think it would better to have 2 clocks rather than one, so that users can switch from time to time more easily.

Xiaonan Li – Response to Walter Benjamin (CHEN)

It’s a very complex article to read, and it mainly talks about mechanical reproduction of arts and its influence on today. In the first part, it talks about art and its history, and in the last part,  it mainly talks about films in different aspects, like shooting skills, actors and their acting, and sound effect, etc. And the theory the author is trying to give out seems a little bit difficult for me to comprehend. He says “Mechanical reproduction of art changes the reaction of the masses toward art”, which makes me wonder what this reaction used to be before there was mechanical reproduction, and I was confused when he says “The greater the decrease in the social significance of an art form, the sharper the distinction between criticism and enjoyment by the public”.

XiaonanLi-response to Paul Rand(CHEN)

In this essay, it also discusses relation between art and technology, and in it, there is a saying that “we came here to learn how to design, rather than how to use a computer”, which reminds me of a conversation I had with Dylan. We discussed about the difference between NYUSH and a normal or less than normal university in China, he told me that in those schools, students who study for computer science begin coding from their freshman year, and they do it every day and have a very good skill coding. But if there are two students attending a job interview, one from that school and one from ours, the later one is more likely to be chosen. And the reason is that our school puts more emphasis on thinking mode, and the ability to think what to code rather than how to code. It’s the critical thinking skills that matters the most.

Xiaonan Li-Response to Rachel Greene(CHEN)

In this article, it introduced the development of net art and also the development of internet itself. And it makes me begin to think that at the very beginning of internet’s development, when most of the people are not so familiar with computers and internet, what people’s attitude and reactions would be, and what they would do with internet. And I found out that net.art is a good answer for that, which shows people are pursuing making new staffs and add innovation to this unfamiliar thing. It’s a good try for those people, and those works have been the prime ones for those in today.

Xiaonan Li-Response to Paul Graham(CHEN)

In this article, the author associate the “cold” computer science stuff with “warm” art stuffs. It holds the view that what hacker is doing is not just about science, or engineering, but also making arts, creating things. It’s not because they are using scientific methods that they are only doing things about science and irrelevant with innovation. Hackers are the makers, he points out, which in some ways makes me feel the same. I am studying computer science right now, but at the same time, I am a person crazy about arts like music or painting, or something else. Although I never actually thought about the relationship between art and science, I know they are not totally separated. And his theory gives me some enlightenment and optimism to my future career, that is, coding and program-writing do not have to be a boring and mechanical thing, they also need passion and they have flexibilities.

Final: Art project(Moon)

  • Name: Han
  • Link: http://imanas.shanghai.nyu.edu/~fh805/Han/
  • Date: May 10th
  • Partner: Quinn He
  • Inspiration: Han Fu(Han Clothes) are traditional clothes for Chinese people in the past, which also has some cultural meaning in it. But few people know it nowadays. Therefore, We want to use the web as an approach to let more people feel the beauty of Han Fu.
  • We also inspired by a series of App called fans/Sunmao/Bushi, which are all designed in Chinese style. Their excellence user experience gives us many inspirations.
  • Introduction: The web has two parts, one is for users to view different type of Han clothes, as well as learn some basic information and history. The other is giving users chances to design their own clothes.
  • Process:
    • Photoshop Part: First, we did some researchers, finding six types (3 for male and 3 for females) of clothes we want to work on. Then I  need to prepare the pictures for viewing part and designing part. For the viewing part, as the pictures are put on a Chinese style lantern, I decided to make the pictures in traditional Chinese realistic painting style.
    • The main method is first reducing all the color of original pictures, only living the outlines with Inverse-Minimum(filters), then adjust the line with curves, finally, put one colorful layer under the line one, changing the model to soft light. After these processes, I also need to adjust the color and style to make sure the style is constant.
    • The other work is preparing the pictures on design pages, considering that it will be easier for users to understand the structure of Han Clothes, we chose sketches rather than real photos on designing pages. After dealing with the images we find online, we find that the resolution of pictures is not enough for exhibiting on the web and will influence user experience. Then with Moon’s suggestions, I redraw all the pictures in Photoshop.
  • Coding Part:
    • For the coding part, I’m in charge of the design pages, which allow people to change colors and adding some patterns on the page, as well as provide a downloading function that users can save their works.
    • The most challenge we meet is how to paint the clothes base on the area, which means, when user choose a color and click on one area, all the area will be painted to the chosen color. The way we figure out is putting two same size images, one is black and white, while the other one is painting in different colors based on the area. Therefore, when clicked on the picture, we can detect which area is clicked on by getting the pixel’s color in the colorful picture, then find all the pixels with the same color in the colorful picture, finally match the serial numbers of these pixels and change the same pixels in the w/b picture to the target color
    • However, after setting the function, we find that there are misplace on deciding which part is clicked on. With Jiwon’s help, we find that the get() function is to get the pixel at (mouseX, mouseY) in the whole canvas, rather than the picture itself, after setting a map function to match the two position, the function worked well. The code is:
    • Because we have two interfaces that are color and patterns, to make it looks neat and fluent, I add two dots at the bottom and some dynamic effects on switching. I also set up different boolean values, and change them basing on which stages users are in so that different functions won’t mess up.
    • For the color chosen, with Leon’s suggestions in idea presentation, we do some research on Chinese colors, finally, all the color we chose are exactly the color people use in the past, and all the colors have their own names.
    • Because the pattern Quinn designed can’t perfectly fit the picture, with Moon’s suggestions, we put another picture on the top, which is transparent in clothes’ shapes but the same color with the background in other parts.
    • Another challenge is most of the functions in designing page is based on mouse pressed, so I spend a lot of time on how to plan different factors to avoid overlapping so that when mouse pressed, it’s able to trigger different functions based on mouse position.
    • In the end, we add a function that user can download their design for saving, another consideration is, if they are really interested in Han Clothes, they can give their design to some shops and have the Han Clothes be made out
  • Course Learned
    • How to detect areas based on color.
    • How to use p5.js in web design
    • How to control different stages by using boolean value.
  • Further development
    • Because of time limitation, as well as the difficulties in translation, we only provide Chinese version now, later we can add a language button that user is able to change the language.
    • For the color and pattern, we can provide more choices and user will have more freedom to design.
    • For pictures for design and view, the style has to much difference and users may get confused, in the future, I will try to figure out how to balance the “soft” and “hard” style.
  • Special Thanks: Many thanks to my excellent partner Quinn, who contribute a lot to this project. And special thanks to professor Moon and fellow Jiwon for their help during the process.

“?” — Net Art Project (Moon)

Title: “?”

Collaborators: Phyllis, Jack

Inspiration: As I was searching “net art” related websites on google, I found a super cool one called Colossal, which contains the gif below that led me to think about what to make for this project. The more time I spent staring at the movement of the particles in the gif, the more I love it, the stronger my sense of “chaos” and “order,” “attraction” and “repulsion” is. Then I started to think about what I could extend on top of those keywords in order to guide users to think more rather than just “surfing” a website.

Continue reading

"use strict";

var particles = [];

var maxInterval = 500;
var interval = maxInterval;

var isInteraction = false;

function setup() {
	createCanvas(windowWidth, windowHeight);

	for (var i=0; i<800; i++) {
			new Particle( random(-windowWidth, windowWidth), random(-windowHeight, windowHeight) )

  mouseX = width/2;
  mouseY = height/2;
  //setTimeout(link, 20000);

function draw() {
  stroke(255, 50);

  translate(width/2, height/2);

  for (var i=0; i<particles.length; i++) {
	 particles[i].attractedTo( createVector(mouseX-width/2,mouseY-height/2) );


	// fill(255);
	// text(particles.length, 10, 20);

  // interval things  
  // text(interval, 10, 40);
  if (isInteraction) {
  if (interval == 0) {


function mouseMoved() {
  isInteraction = true;
function updateInterval() {
  if (interval > 0) {
  } else {
    interval = maxInterval; // reset the value again

function link() {
    window.open('../transitions/infinite.html', "_self");


function windowResized() {
  resizeCanvas(windowWidth, windowHeight);

class Particle {
  constructor( x, y ) {
  	this.pos = createVector(x, y);
  	this.vel = createVector();
  	this.acc = createVector();
  	this.mass = random(1, 10);
  	this.rad = 1 * this.mass;

  	this.angle = createVector();
  	this.rotSpeed = createVector( random(-0.1, 0.1), random(-0.1, 0.1) );

  update() {
    // position
    this.vel.add( this.acc );
    this.pos.add( this.vel );
    this.acc.mult( 0 );

    // angle
    this.angle.add( this.rotSpeed );

  applyForce( force ) {
  	var f = createVector();
  	f = force.copy();
  	f.div( this.mass );
  	this.acc.add( f );

  attractedTo( target ) {
  	var vector = p5.Vector.sub(target, this.pos);
  	var distance = vector.mag();

  	if (distance > 430 ) {
      // pull the articles to the center
    } else {
      // push back

  repel( target ) {
  	var vector = p5.Vector.sub(target, this.pos);
  	var distance = vector.mag();
  	if (distance < 10) {

  applyRestitution( amount ) {
  	var value = 1.0 + amount;

  checkEdges() {
    if (this.pos.x < -windowWidth) {
    	this.pos.x = -windowWidth;
    	this.vel.x *= -1;
    } else if (this.pos.x > windowWidth) {
    	this.pos.x = -windowWidth;
    	this.vel.x *= -1;

    if (this.pos.y < -windowHeight) {
    	this.pos.y = -windowHeight;
    	this.vel.y *= -1;
    } else if (this.pos.y > windowHeight) {
    	this.pos.y = -windowHeight;
    	this.vel.y *= -1;

display() {
	translate(this.pos.x, this.pos.y);

  ellipse( 0, 0, random(1, 5), random(1, 5) );