Introduction to Computer Media

Introduction to Computer Media, Subtraction

CNC Puppy Lamp

This is a puppy lamp. IMG_4760


For its head, I built four joints and glued them together. At first I want to build the bind joint. But I forget to pocket the finger shape inside, I thought there are just rectangle shape pocket inside. I spent some time to figure out how the four joints can make a perfect square and also I can put the bottom square in it. So after I built the joint, they fit really well, and they are very tight after I glued them together.

And there is another joint connecting the head and its neck. For the body part, I used bolts and nuts to put legs and tail together. I used two bolts on each side. And I drilled a slightly smaller hole on the tail to keep the two bolts stay still inside. Otherwise, they won't be tight enough. Also I got the bulb, socket, and the wire. And I also get the chance to use my Othermill assignment.

Screen Shot 2015-03-06 at 1.43.50 AM

Screen Shot 2015-03-06 at 1.43.00 AM

This is my first complete fabrication work.  I'm very exited. I learned how to make different joints, and I'm getting more and more familiar with CNC machine each time.





Introduction to Computer Media

"Already Home": ICM Final Project documentation

Description: This is a visual animation that can change along with my favorite song. The song's called Already Home. I used minim library to detect the beats and the frequency, used subtitle txt file to add lyrics, and add 3d background. I love the song because it can calm me down, I hope it will be relax and peaceful experience. The audience will be the people who like listening music and like to picture the lyric and the melody.

Screen Shot 2014-12-11 at 5.25.51 AM Screen Shot 2014-12-11 at 5.26.56 AM

In the future, I also want to add some user interaction. There will be two spheres flying around. One is about beats, the other one is about the frequency. And users can use keyboards to control one sphere. If the two spheres are close to each other, the background will light up, otherwise the background will be dark again. So users can follow the two spheres explore the space. It will also be a relax experience.
















Introduction to Computer Media

ICM Week 9: Final Project Proposal--Visualizing Music

visualizing music

  • a visual animation that can change along with a song(the volume and the frequency).

How did I become interested in it?

  • I like listening to music very much. I always wear my headphones when I'm in the subway, and when I'm doing my homework. Music always calms me down and helps me focus on my mind. And when I was thinking what to do in my final project, I listened a song named "already home" by A Great Big World(a band in New York City). This is one of my favorite song. The lyrics really got into my head. One of the lyrics said "If only New York wasn't so far away, I promise the city won't get in our way ". I started to visualize the song, the picture of new york city, the street, as well as the sound wave of the piano. So I think it would be interesting to visualize a song using processing.

Who is the audience?

  • the people who like listening music and like to picture the lyric and the melody.

Something visual for us to look at in class: drawings, images, video, etc.

  • First of all, I want to create a processing sketch that changes according to the song's volume and frequency. Here's some music visualization from iTunes. These are several light planets and many particles. It's very beautiful when you see it changing along with the music.

Screen Shot 2014-11-11 at 7.28.45 AM Screen Shot 2014-11-11 at 7.28.29 AM

  • secondly, I want to add related pictures in the sketch by using the google image API. I want to divide the screen into two similar pictures to express the story in the song. Below are some pictures from MV "already home". It seems the boy lives in California and the girl lives in the New York City.

Screen Shot 2014-11-11 at 8.03.29 AM

A sample Processing sketch that demonstrates a first step

Screen Shot 2014-11-11 at 11.03.28 AM

Questions for the class (conceptual or technical)

  • how to make visualization like iTunes did? or other visualization ideas?
  • do I need to cover all the songs, so people can search one song and play it, or focus on one particular song, to make the animation and pictures matching the melody very well?
  • do I need to add some lyrics into the animation?

Things I need to do:

  • make better visualization.
  • add pictures, use google image API, generate the pictures, divide the screen into two and put two similar pirctures.
  • make the sketch interactive. Users can press some keys to change the animation, or they can add pictures into the animation as background by themselves and create their own MV. for example:

           The [+] and [-] keys allow you to progressively Increase or Decrease the intensity of the particles.

           The [A] and [S] keys let you Add or Subtract particles to the visualizer you are currently viewing.

           The [R] key will Reset the intensity and particle count to their default values.





Introduction to Computer Media

ICM Week 8: Data

For this week, we learned about data and text. My home work is about counting word frequencies in two different novels (The Hungry Game and The Power of Throne), and visualize the words. For now, the words are arranged by frequency on the y-axis, and the different color represents different novel. Originally, I wanted to draw different size of circles to present different frequencies, and also made them bouncing in the screen. But the problem is that I don't know how to link the circle and the word properly. I'm not satisfied by the visualization, so I'm still thinking about a more interesting way for visualizing the words. Screen Shot 2014-11-04 at 12.01.52 PM


Introduction to Computer Media

ICM week 7: Pixels

I made a "textmirror".  Instead of pixels, certain letters compose the image. The brightness of every letter decides the font size of every letter. As you can see, my hair is darker, so the letters on my hair are bigger. The default letters are "zero". I can type anything on the screen to compose my portrait.

And when I press the arrow up and arrow down key, the font size will increase or decrease. When I press the arrow left and arrow right key, the hue of every letter will change.

And if I press the mouse, the program will save the image as .png file. The name of the file is the time when you save the image.

So, in this way, everyone could have his customized portrait.

Screen Shot 2014-10-28 at 7.43.51 AM Screen Shot 2014-10-28 at 11.01.56 AM

Introduction to Computer Media

ICM Week 3: flowers

This week we learned function. The homework is to take the idea for a design and break it out into its own function. Add parameters to the function so the design can be drawn differently based on the selected parameters. Draw three or more instances of the design on the screen to show the differences possible by changing the parameters.

I built a function called flower, it has four parameters to decide the position, the height, the size, the number of petals. And when you move the mouse vertically, the center flower's size will change; when you move the mouse horizontally, the number of the petal will change from one to 60.

Here's the screen shot of my work:

屏幕快照 2014-09-23 上午8.26.57 屏幕快照 2014-09-23 上午8.27.12


here's my code:

Introduction to Computer Media

ICM week 2 assignment: catch the bubble

This week, we should work with rule-based animation, motion, and interaction. I made a bouncing bubble that will change color when it hit the boundary of the screen. And also, if you click the mouse when the bubble is in the gray rectangle, the ball will get stuck in the gray rectangle.

I also want to draw more bubbles, but I encountered many bugs. I'm trying to figure it out.

屏幕快照 2014-09-16 上午10.56.50And here's my code.




Introduction to Computer Media



The first assignment is to create our own screen drawing, using only 2D primitive shapes and basic color functions. Because I love Oreo cookies, I decided to draw an Oreo cookie face. Here's my first original design of the Oreo cookie.


Then I went to calculate the coordinates of the ellipses, points, triangles and arcs. At first, I used the standard equation of circle to calculate the coordinates of the ellipses. It worked out. However, I found another simple way to draw these ellipses. I used "rotate();" function to make all the ellipse rotate a small angle around (0,0). I did the same on the points, triangles and arcs. Here's my sketch.


And in the processing, I used for () loop to  make one ellipse rotate(PI/18) at a time. Here's my black Oreo cookie face! I had a great time to draw this!

屏幕快照 2014-09-08 上午11.29.57

Finally, I put some color on the cookie face. This is my Oreo cookie face! :D

屏幕快照 2014-09-08 上午11.23.26