Final Project : Encounter

<The Encounter> : A close encounter with someone is the moment when each universe meets.


The reflection of users on the screen is filled with glittering stars and creates an unexpected moment when they are in close position to each other. As an engaging interactive installation for one person, or as a chance to the close encounter for two people, this project aims to provide users an experience of emotional contact generated by physical touch. Processing and kinect v2 are used.








Demo video (screen ver.)




Ideation Process





Project inspired by contents below.





Question for Users

_ If you have made gravity(change) on the screen, what was your trigger point for that behavior? (What made you play with the screen?)

_ What did you feel when you were standing very close to someone, even a friend or a stranger?

_ What do you feel after experiencing this project with someone else?


Final Project Concept & Interface

I was supposed to go in team(History of Communication was our presentation subject), but after a long discussion, I decided to go alone. This is because we consist of three people and failed to fine the suitable balance in terms of scale and idea which will suit with the quality from three people. Even we spent a week for idea development, and there were lots of great ideas which were beyond our current ability, I consider those time as a resource for future works.

After that, I did a intense ideation. I tried to bring subject from my surroundings, and came up with this idea. “Touch” or “Contact”. I would like to express the great moment when people hug each other, or touch somebody. I will use kinect v2 to capture people’s motion, and processing.


The shapes of people will be reflected on the screen, covered with universe sketch image. And if people get closer and hug each other, firework particles will appear randomly. I will use the average point of each people by dividing the screen in two areas so that program can recognize the points as different.

For now, I succeed to draw the universe image inside the shadow, and detecting two average points of users.



  1. How can I make users hug each other?
  2. What other interaction points can be added? e.g. sound


I would like get feedback on these two things at the user test.

Brainstorming for Final

History of Communication

Our final idea is based on the history of communication and media. We would like to use physical inputs and digital outputs through conceptual context.


How to create suitable visual output. We temporary decided to put human image on the screen with the different dimensions, but I think symbolic expression is better. We will explore further ideas.

Idea development still on process.


Week 8 : Marvel Studios Fanfare

Marvel Studios Fanfare : playing with video and sound

I’m a huge fan of Marvel series, and whenever I listen to its brand theme music before movie starts, I feel excited. That’s the reason why Brian Tyler is my second favorite musician.(after Hans Zimmer) The goal of this project is making artistic video image with shape figures and sound input which controls the size and color. And I want to express those in universe visual tone.(Because I’m fascinated with it)

Mouse click controls playing and pausing music, and according to the amplitude, the size of the moving stars and color of ellipse changes.

I tried to make black boxes move to their position when music is playing, it didn’t work. So I temporarily decided to leave that part. Video is divided into scale, and the size and color of ellipse in video is connected to the mean value(r, g, b) of each video pixels. Stars at the top and bottom black boxes, are pushed into arrays and implement through loop.


I tried more things making screen shape with ellipse. This aims to express scenes like universe stars. Size changes along with the amplitude. Random ellipses moving from left to right fill the color value from video. (get function)



I wanted to make these screen like mirror, and tried to change codes, but failed.  I guess this is because ellipses are defined as object. Help me!!!! How can I make mirrored screen when the “get”  and “fill” functions are inside the object???

-> Woah! just solved this part by updating the codes below. I changed the px value from (x) to (width-x), and it worked. Nows screen reflects the image like mirror.

Also, I changed the background to (clear) so that more concrete but abstract image appears.



Week 7: Data visualization with NASA API

Visualization of asteroids data from NASA API

NASA provides asteroids information based on day by day, and I would like to use this API information to visualize the daily near earth asteroids status.

API link page fas information as below. Since I wanted to make the interface shows the different visual by input, I made input box and button to update the input and reflect those status. Then, I imported the diameter of each asteroid from API and use those information in ellipse size to represent each diversity size. For better visual, I increased the size scale by 8000 times bigger compared with the earth’s scale. Now day-by-day asteroids reflects comparative size towards each other.

One of the big trouble I encountered was loading JSON information which has hyphen. It cannot read the JSON information until changed slightly as below. It took almost two and half hours to realize this. 


Then, I used each asteroid’s closest distance between earth to arrange them by distance scale. Since the JSON data is complicated long codes were needed. I used the sin and cos to randomly position the asteroids within the matching distance. 


However, it could only read the first input value, not the next one. It could still read other value such as element_count(I checked through console.log), but I guess the problem is in long codes for loading size and distance scale. The string is long enough to cause the loop crashed or stuck. I would figure out further solutions for this.

week 6: html

Playing with existing website

First, I succeed to put canvas and ellipse on the page.


Next, I wanted to control the size of image(I gave its id as ‘sky’) with slider, but failed. Also, I wanted to highlight the paragraph when mouse is over, but it didn’t work. Above is my code and what’s my problem? One more, when paragraph is declared and call-back function is running, canvas and ellipse didn’t appear. Why?

I was able to change the color of texts(p) and background-color. I manipulated these in html, <style> </style>. In addition, I replaced the gif image with another gif, its size controlled by the mouse click.


Second try for further application. I changed some of the existing wind map website. Caption added, spongebob image added and controlled with mouse over, mouse ellipse color controlled by slider.


I wanted to change body color with slider, and tried to call the body part of html into java script, but failed. How can I do that? Can I change body color with slider.value?


Updated work

The last work aims to express the hardship at ITP. With all backgrounds on html, CSS, and java script I’ve learned until now, I made simple page that has interaction.


  1. Can I change image with .html function? (e.g. call-back function with mouse over, can I change one image to another image? ) Text can change, but image didn’t work.
  2. How can I deal with changing the text size except @@em? I changed the font-size number, but didn’t work.
  3. How can I change the image size with slider? img.size(slider.value(), slider.value()); didn’t work.

Week 5: Object-oriented

I want to make a bunch of balls moving randomly like nature, and control those with user interactivity such as mouse click, dragging, or keyboards. I like the moment when total disorder changes to order, which makes me feel catharsis. In this case, I aim to gather all balls with random speed, position, and color into a mouse point at once.

First, developing works from class, I added gathering function managed by mouse press input. And I set the color in random, makes color change on every meet. Distinctive object was created as “Ball”, generating balls with loop.


For more entertain, I added edge ellipse to control the bouncing area of balls within the shape. Size can be changed by keyboard. Finally, I thought that text or signage explaining the function are needed.

Final link :



How can I make balls bouncing in actual direction inside the circle? In my work, ball bounces from xspeed to -xspeed(yspeed to -yspeed), so it doesn’t reflect the bouncing angle. That means, in some part, only xspeed should be changed, and both to be changed in other part according to ball’s entering angle towards the edge.


Week 4: re-organize

What I wanted to try for this week are as follows.

  1. Getting used to making function, and object.
  2. Deeper understanding on creating slider, button, rotating.

In order to push myself into tough environment for better study, I started from the beginning, not using my previous work. First, I made an object to draw multiple rectangles rotating by various speeds. Through completing this code after tons of hour, I could easily make extra rectangles.(This is why we use objects…) I cannot forget the moment I succeeded with this.

Then, I added center ellipse which follows mouse move. This is also broken out of draw() function. Sliders, buttons are added to control colors, and movement of the third big rectangle. Finally, being learned from the videos, I added random bubbles. Though there are lots of elements, I tried to clean the draw section as much as possible.

Finally, I included the bubble moving in diverse speeds and direction, by exclusive function.


Final :


Week 3: Group Assignment using Button and Algorithmic Function

Week 3 Group Assignment


<Matrix > is one of my favorite movie. Referring to the functions I’ve learned, I would like to implement the matrix world using simple random algorithmic function and button function. Below is my ideal outcome. Random words and numbers falling down in random speed which complete the abstract visual of matrix world.(from the movie)



First, just like movie, you can pick one from two pills.


And if you choose blue pill, matrix world begins with random numbers between 0 and 1.


Red pill brings you to white backgrounds.


I failed to :

1.  make text disappear when blue pill is clicked.
2. make automatic number loop start from the beginning when blue pill is clicked
3. use random numbers and alphabets
4. make contents falling in random speeds


Week 2

Week 2


Through this assignment, I wanted to explore the diverse codes with deeper imagination and application.

First, I made the small ball that continuously and independently moves inside the canvas.


Then, I made another ball which moves along with the mouse. Now there are two different balls, one with independent movement and the other with the interaction movement. And, I wanted to make these push each other when they meet. I make this flow with the distance function, which changes the direction of x, y axis whenever it becomes shorter than the sum of both radius.



But, the biggest problem happened when the distance(d) goes shorter than the sum of two radius(80). Circles were not able to escape from each other, being overlapped. (In my guess, this is because ‘if’ function changes the speed direction every seconds.) I will go through deep review to solve this problem later.


Lastly, I used random function to make randomly-glittering rectangle at the bottom. When two balls meet each other, it shines with different colors on each encounter.


The final link is as follow.