Jiamin Zhang | Capstone progress (Greenspan)

Research essay

My topic has been changed for several times. From social media’s effect on anti-domestic violence campaign in China-taking Crazy English Lee Yang domestic abuse as a case, to the history of anti-domestic violence in China, especially after adoption of new media. After talking with professor Shirky, I decided to have an approach from the media’s advantage in emotional synchronization which form individuals into community. Thanks to the internet, feminist in China discovered a low-budget way to create platforms for women under abuse to share their own stories, and to make these private and personal stories public and communal. The online solidarity then entended to real life, which rewarded on those feminist group and help them thrive. Since my interactive project is focused on the experience of being a woman under abuse, the research essay will support it from how media could enhance the synchronization when people have such immersive involvement rather than reading or hearing several line of literal story.

My current resources are a multimedia project documented feminist campaign and interview of ngo leaders, a documentary produced by Chinese official broadcasting channel CCTV about domestic abuse in China and  several other journals. I’m still looking for more theoretical ones for new media’s effect.


Interactive project.

After several discussions in class, it seemed that some visual for my page is pretty essential. As I working on my p5 interaction, I use online interior design tool to generate a basic room for my page, and adjust it in Photoshop for the night effect that I want. I’m still working on it , here are some image I got.


For my audio, I’ve been collecting cooking sounds for a while. Here is an example of composition of the sound.



For human voice, I’m still talking with my voice actor and actress, and revising my script.

Jiamin Zhang | Capstone Production Schedule (Greenspan)

  • Week 1
    • Basic storyboarding
  • Week 2
    • Collecting audio materials
    • Refine the story
  • Week 3
    • Combine all the materials into an audio narrative
    • Collecting audio materials
  • Week 4
    • Break the story into parts to add the interactions
    • Design interactions
    • Collecting audio materials and making visual ones
    • Building wireframe
  • Week 5
    • Audio narrative with interaction draft 1
    • Adjust interactions and adding visual content based on user critique
  • Week 6
    • Draft 2
    • Adjust the content based on user critique
  • Week 7
    • Draft 3
    • Adjust the content based on user critique
  • Week 8
    • Draft 4
    • Adjust the content based on user critique
  • Week 9
    • Draft 5
    • Adjust the content based on user critique
  • Week 10
    • Finalize my product
  • Week 11
    • Final presentation

Final project: Bardentity

(Image to be updated)

For my final project, I started with one of my favorite things in the world, eating. After many iteration and communication with professor, it evolves to my final project “Bardentity”, which is more convincing and makes more sense.

I started with some scattered ideas such as “the sound of eating chips is great”, “ASMR should be cool”, “it need to be interactive”, “people would love me if they can take something with them from my project”, and “I want to use the laser cutter”. They are all about how I want to present my data, but I forgot to think about the data that I’m look into.

It became quite far-fetched to pull those ideas together. My first version of project was asking people to bite into a type of food and generate a soundwave, making a poster of the soundwaves, a paper sculpture of the soundwaves or etch the soundwave to the food itself. It is purely formalistic and blurred in what message to convey.

Thanks to the time constraints, I narrowed it down to biting chips and generate soundwave. Label printer was added but again, it is formalistic. Addition or removal of a label printer didn’t improve or deteriorate my concept at all. I worked on this project for quite a long time. And noticed that I’m working towards a wrong direction after a talk with Professor Feng.

He questioned my weakest link in the project, which is the huge gap between biting a chip and identity. I didn’t get my focus clear, since there are so many things better represent human identity than biting a chip, why I chose this to be my project. I was into eating but rather than adding everything I like into the project; it is more crucial to work towards a clear direction.

After being questioned and questioning myself, I came up with the final concept of Bardentity. Eating is a primary activity of everyone, and everyone has different chewing pattern or eating habit. To present this difference, I chose to record the sound of eating. To enlarge the sound, I chose chip as a media since its sound is crunchy and loud. It actually doesn’t matter what to eat. To make the difference of sound easy to be observed, I decided to visualize the soundwave. Since I want to make it a representative of each person, I made it into a barcode label, just like the one stick on product in the supermarket.

I started my interface on P5 and the printing code on processing. Tons of thanks to Professor Feng for the memobird printer’s code. The user flow is put one’s name in, click button to start recording and click button to stop. It generates a barcode and download to my processing data folder inside of my dropbox folder. Thanks to AJ’s idea of using IFTTT to connect Dropbox and Tumblr, the barcodes are automatically sync to Bardentity’s Tumblr page. Then the user put the name in the processing input box to prnt the label out.

Looking back to the evolution if my concept, I noticed that the deviation of my focus is somewhat due to my weakness in skill base. I’m thinking about different forms all the time because I tried them little before. Lack of practice makes me curious about every new form of presentation, which distract me from the core of my project. When I started a project, I was thinking about what new type of skill I can use, rather than what message I want to convey, or what data I want to look into. It’s a misunderstanding of after-class practice and final project. Fortunately, I was able to turn back onto the right track at the last minute on this project, though it still sounds a little far-fetched and looks like finding reasons for what I do. It’s one of the most important take-away I have from this course.

Interactive Website

my website:

I come up with some trouble regarding playing audio while elements are hovered and image display in the Fancybox. Thanksfully I fixed them in the end.

My project is a recommendation website of 8 food channels that I love on Youtube. My progress can be divided into 3 stages.

First of all, I generated my contents. I reviewed most of the videos that I have strong impression from each channel and got a sound clip. The sound is a representative item or action of the Youtuber. Then I got some reference of the icons online and draw icon of each item in Adobe Illustrator, in order to have a svg file available for animation. Files are named accordingly.

One of the issue I ran across is that it takes quite a long time to collect materials, while they may still not be useful when embed in my website, thus I nee to regenerate them. It is kind of dilemma that I couldn’t start without these materials but they can be obsolete in the end.

Second part is embedding my audios. I struggled a little bit on the hover autoplay and assign different audios to each div. Dreadfully I ran across some last minute meltdown and was not able to get everything work during the presentation. I was really upset and sorry for that. Thanks to Alex and Sabrina, I was able to take a look at their code under their permission and fix my own one. Though the away of using index didn’t work for mine website since my divs were under different sections, I used .data() to assign numbers to divs.

Then I did the animation. I’m interested in svg animation for a long time and always want to adopt the technique in my own website. The library I used this time is still my favorite one called vivus,js. I’m still testing I the greensock svgMorph and hope it will work some time.

Finally I added lightbox to jump to the recommended channels. I’m thinking about removing it after hearing the critique in-class. Probably a resource page will be a better choice.

Final project proposal

My idea for my final project is having a series or physical data expression related to the theme “identities from eating”. I got the inspiration from various art works combined.

The project will be composed of visualization of sound wave generated by different people bite into the same kind of food, for example, apple, chips, biscuits etc. To meed the requirement of 100 data points, I will have 4 to 5 types of food and around as many as people I can find to record the sound. The visualization will be realized by laser cutting generally. Some of them will be etched directly to the food itself (apple slices, tortilla etc.) if they can be flattened to meet the requirement of our laser cutter. Other will be presented by other material such as paper , which can be combined with the food when finally presented if the food itself is hard to be etched, such as chips.

Another point to mention is that food are easy to spoil. To ensure that my work can last for a longer time, the etch directly on food will be taken into pictures and redesigned into posters or simply a gallery for final presentation.

Below are some related art works that inspired me.

Food sound/ food ASMR:

Massimo Bottura lasagna (in-class)


This is the video we watched in class. I got a deep impression on the last several bites the chef takes. It is the ideal sound that I want to get as my data.

My comlab project


This is my own project in another class. The video is mostly about chips but the idea of teh sound could be inherited.

Multi-layer paper cut (for chips)


This is Maud Vantours’ multi layer paper cut. I’m thinking of creating this type of paper cut on the edge of paper, and subtract a rectangle from the center by laser cutter. Then I can pile them up into a frame which can stand on desk-top. In the center hollow part, I could put into a piece of chip.

Below is another example cut from acrylic board.


For food that can be etched directly on itself, I found some design for the sound wave.

Circular soundwave design (applicable on tortilla, apple, etc):




This is the example of etching on vegetable that XY shown in class


Response to Rachel Green Web Work

In Rachel Greene’s “Web Work: A History of Net Art”, the author presents a history of the development of web art from mid 90s and later. There are two points catch my eyes. One Is the work of Jodi.org which exposes programming as art, the other is cyber feminism.

It seems that we call programming language as “language” but we never seriously take them the same as our daily speaking language for example English, Chinese, French etc. For me personally, using programming language is more like playing with mathematical functions. It’s more science rather than art, or literature. It is interesting to see how it is presented in the opposite way in Jodi.org. It has less importance regarding functionality and has an increasing visual impact.

Feminism has been an all-time topic around the world. I’m interested in Green’s cyber feminism in this article because Russian Olia Lialina’s work shows that women can have different approach and understanding when creating art pieces. Internet nowadays as one of the major media people receive information is crucial for female to advocate the concept of gender equality.

Final project proposal

In my final, I’m going to make an interactive ASMR website which involves SVG animation. I was attracted by SVG animation last semester but atill haven’t taken good command of it. I wish that I could practice it in my final and reach a satisfying result.

My inspiration of SVG animation is from a JavaScript library called Vivus (https://maxwellito.github.io/vivus/). It allowed people to create drawing animation on SVG easily by setting up some simple parameters. In its documentation I found their inspiration which is a mind blown article on codedrops by Mary Lou (http://tympanus.net/codrops/2013/12/30/svg-drawing-animation/). The examples are amazing. I want see what different they can make on my own website.

While SVG animation is a tool that I want to adopt, the major content of my final website is food ASMR. It is also an idea I have for the audio project. It was deviate to some really cool stuff during the group work but I still want to realize my original idea in the final website. It will look like a simple display interface with svg icons of different food presented on the screen in grid. User can have interaction with the icons with mouse, and the sound track will play when icon is clicked. The source of ASMR sound will be recorded by myself hopefully. If some are not applicable due to the time constraint, I will have some clips from my favorite YouTuber.

Response to Computers, Pencils and Brushes

The author presented a worry that learning design by computer may harm students’ basic ability of design by hand. The advancement of computer far exceeds what pencil and paper do thus it inevitable substitute a lot of practice that should have with pencil and paper. These processes of practice and learn are critical for learning design.

I personally have strong reflection with this point of view in my own study of design. Though I’m just a primary learner, I can still figure out the difference between people around me who have learned art by hand or not. Some basic skills in art are not achievable through solely computer training.

In my junior year, I was taking a design class in New York when I was study way there. The teacher was impressive and I learned a tons of thing from her. However, though I took every effort to improve my skill in using Adobe Suite, the time I took for generating one version r variation ofmy design is extraordinarily long, especially when I played with colors. The light and shadow, strokes and patterns confused me a lot. It should be something that I have learned by hand on paper trained with my eyes, before I learned design.

Response to Hackers and Painters

I’m really happy to someone connecting art and another field of profession together, because I’m also trying to do the same thing.

The author make a quite interesting approach on the similarities between hacking and painting. He pulled both end a step closer to the middle, which is engineering and architecture. The reason why he made that approach is that he could use some well acknowledged concept in art to justify his point of view in hacking, such as if judging hackers by publications is acceptable.

He also answer some questions through this logic. For example, in the end, he made the statement that since great painting pieces during the time of being made are under the uncertainty of coming to glories or not, we can say that these are the glory days of hacking.

I have  a different approach regarding connecting art and other fields. I’m a double major of business and IMA. For most of the times, people can’t understand if there is any connection between this two. I’m not trying to find any similarities, as the author did for CS and painting, I’m trying to utilize these two in order to reach a better result. IMA, while being considered as a pure form of art, can also be considered as a medium which is useful in any field including business. and Business while being considered as a profession or a work can also be taken as a way of thinking, which can be applied in art producing. It is not the similarities but the complementarity attracts me to pursue them at the same time.

Project: video


We got our inspiration from the movie Triangle. We want to create a similar structure which composed of loops that trap our protagonist.

There are four loops in all. The first two loops are ended with protagonist’s death and the third one ends with a regular night. The fourth one goes with an open end which allows the audience to guess.

The story is connected by the scene that our protagonist waking up in the classroom. A hidden clue is the dropping sound of his ID card. It plays a role as the key to the next loop (or escape).

The biggest problem we encountered during this project is time management. Our actor is not from our class so we have to work with his time schedule. Therefore, our shooting process takes most of our time. Editing with Premiere is rewarding. I’ve play with iMovie a lot but this is my first try of PR. It is more complicated and as more functions. It is also a little annoying when I don’t know what all of these are doing, which make my interface pretty messy.

Overall it’s a fun project. I wish to have a deeper understanding and better command of utilizing the software in the future.