Zeyao-PDS-Final- Beijinger in NewYork

Slide: https://docs.google.com/presentation/d/1g51PzYn8LIo5OPoxQldYnr0dGWC2uUIjo8axHlEC51k/edit?usp=sharing

Code: https://github.com/zeyaoli/Beijinger-In-NewYork

“Beijinger in New York” is a programming design book that explains the cultural differences between Beijing and New York. It is a visual exploration via coding about the distinctions of these two great cities where I lived at.

The book targets the children from primary school and junior school who are curious about the culture all around the world. It contains a consistent visual aesthetic for the reader to understand the differences and similarities in between Beijing and New York. The book also reflects my life experience in both cities.

Since “Beijinger in New York” is fully made in JavaScript, each pair has similar algorithm to draw the objects with slight changes. Through the code, I want to emphasize that the small changes in the algorithm can cause big cultural differences, yet we are all human beings created by a similar gene.

This book is the final project for “Programming Design System” class taught by Prof. Rune Madson, and it will continue as an on-going project. It is inspired by “East Meets West: An Infographic Portrait by Yang Liu” and “Paris versus New York by Vahram Muratyan”. If you have any idea about the comparison, shoot me a message!


Some examples from my book:



For this week’s assignment, I recreate 2 artists’ artworks with code.

The first one is Wolfgang Tillman’s Sendeschluss.

code: https://editor.p5js.org/zeyaoli/sketches/rkyqKWlTm


Also I tried to use noise for the first code… I don’t think it fits the work but it looks weirdly aesthetic. So I decide to put it here.


The second one is Vija Celmen’s Untitled (Large Sky Night)

Code: https://editor.p5js.org/zeyaoli/sketches/Hy2casHp7

Zeyao – Exhibition – Broken Heart Museum

Broken Heart Museum is a mixed reality museum that brings the visitor to a room of broken heart. The museum is the final work of a 7-weeks class “Exhibition: Next”. The class explores how emerging technologies can be applied to the museum and exhibition design to enhance museum visiting experience. Broken Heart Museum is a museum that digs into possibilities of mixing the physical world and the virtual world, and blending both of the worlds together. The museum is heavily inspired by “Milk and Honey”, a collection of poetry that is written by Rupi Kaur, about the experience of violence, abuse, love, and loss.

Broken Heart Museum contains 3 parts. The first part is the physical experience. Once the visitor enters the physical space in the gallery, the visitor can start experiencing it. I recreate a working space of a teenager who has a broken heart, thus the visitor can feel the vibe of it immediately. Salt and Tear, a series of digital illustration that I remixed from the illustration in “Milk and Honey” is hung on the wall.

The second part is the digital experience of the museum. On the PC screen, the visitor will see the online museum that leads to the virtual bedroom of the teenager. The visitor can interact with the furniture or other objects in the room by clicking it or getting close to it. The online museum is based on aframep5, a wrapper that makes user write Web VR on p5.js. The wrapper is initially created by Craig Kapp, updated by me.

The museum also provides the VR immersive experience. It supports Google Cardboard or other mobile phone VR headset. The visitor can enter the museum through the browser (preferably chrome) on the phone, and put the phone in the VR headset to experience it. The visitor can click the “tile” on the floor to move around.

Zeyao – Exhibition – Reading Quote

  1. Here, communication lies at the heart of exhibitions, whereby the communicative medium is not a neutral transmission of information but something that contributes to the positioning and controlling of the spectator in a space of display (p.90).

Comment: Communication is the key. The flow of the exhibition and the position of different objects can convey a lot of things to the visitor. When a curator creates the exhibition, think about what is the storyline that you want to tell the visitor.

2. They (Exhibitions) are political tools for maintaining the status quo – modern ritual settings that reinforce identities, whether these be artistic, avant-garde, gender, racial, subcultural, regional, national, international, global, etc (p.91).

Comment: The exhibition is similar to a piece of artwork. When you create it, think about the concept behind it. The exhibition as a collection of different exhibited work needs a bigger size’s concept for it.

3. Connections and movements between spaces, things, and viewers are manifested, navigated, and transformed through “relational techniques.” (p.95)

Comment: This recalled what I commented under the first quote. I believe that curator plays an important role to make the presentation of artworks better. David Shrigley says: “the first job that an artist needs to do is to fill the space.” It can be applied to curator’s role as well.

4. Yet his argument – that the invisibility of the curatorial hand can reinforce the “belief that art speaks for itself” and that curating is a “necessary, if insufficient, medium through which the communication between art and its audience takes place”

Comment: Agian, communication. The role of the curator can let art speaks for itself. It can connect the audience with the artwork.

5. Rather than texts waiting to be read, exhibitions have the potential to activate discursive processes that enable dialogical spaces of negotiation between curators, artists, and their publics.

Comment: I think we talked about this in class that there are 3 important parts of an exhibition: the curators, artists, and the audience. To connect these 3 components together and arouse a discussion is really important for the curator.

Zeyao – PDS – Midterm Idea

For my midterm project, I decided to create generative logos for my friend’s fashion collections. It will change based on the color palette and the general shape of each collection.

other stores X gogo is a fashion collection that is designed by my close friend gogo wang.
The collection is chic and elegant. It is designed for women who just stepped into their professionals. I am helping her to create generative logos for the collections. The logo will change based on the color board and the shapes of different collections. 

3 Collections are named “Laydown, Dress Up”; “Super Easy Fall” and “Two Months to Winter”

Here are some previews of the collection. The third collection is not online, but my friend will send me the preview tonight and I will upload it here.

link: https://docs.google.com/presentation/d/1Nj5-V09KkdqHQpqV2pz6xZmTq8SokpfW6zAI3YAknOg/edit?usp=sharing

Zeyao – PDS – Typography

For the typography assignment, my design is inspired by the chinese chess (五子棋). So I decided to create the one with black and white ellipse on the grid system. This is only the first prototype of my typography design. My code at the moment is really messy, and I did a lot of repetitive work on it. However, I will work on the algorithm and simplifying the code. Eventually I want to make a dynamic typography with the color shifting from one chess to another one.

Here is the github link: https://github.com/zeyaoli/Typography-Oct13th

Zeyao – Exhibition – Final Project Proposal

Museum of Broken Heart

Has your heart been broken by someone that you deeply loved before? Have you tried to deal with your broken heart in your tiny bedroom, with no one else being next you? Museum of Broken Heart is an online interactive museum experience, that aims for letting the user get into a teenager’s bedroom and feel connected with the broken heart.

My initial research topic is the Museum of Hard Feelings. However, the term “Hard Feelings” sounds so wide to me. What I wanted to do with the further research is to narrow down the topic, and to think about what causes the hard feeling. Coming from my own experience, I relate to aftermaths of the break-up the most. So, I decided to define my museum as the Museum of Broken Heart.

Inspired by the best-selling poem “Milk and Honey” by Rupi Kaur, I connected the common objects that are placed in the bedroom with the sad feeling after the break-up. Museum of Broken Heart is a web-based 360 interactive museum. The museum itself is a virtual teenager’s bedroom. The visitor can explore the museum by exploring the furniture and the other objects in the room. When the visitor gets closer to the furniture or click on it, the interaction will be triggered. A poem that is related to the object will be played and let the visitor experience the connection between your daily life and the aftermaths of break-up. Besides the sounds, the visitor will also get participate in short conversations from the museum. There are other interactions that will be developed. The museum is also adapted to Google Cardboard, which is a simple VR headset. Once the visitor visited the museum website and placed the phone in the cardboard, they can have a virtual reality experience.

I used a-frame, a library that is developed from Three.js to create my museum experience. For the visual aesthetic, I decided to make everything low-poly, because low-poly models will be easier to render on browser. Also, it makes the visitor feel more welcomed. The color in the room is vibrant, since the vibrant color creates a cozy apartment atmosphere. The sound trigger is based on user’s position. I set the boundary detection on each object. Other interactions will be also created on Javascript. It might require a 3d to 2d canvas if I created a pop-up conversation window. I will also add subtitles for the sounds, in case people can’t listen to it. Another function that may be added is the audio detection. Once the user say the object’s name, user’s position will be teleported to the object and trigger the interaction. I am thinking about using makey-makey to connect the keyboard, so when I exhibit the museum, I only need the visitor to play on the controller that is made by play-doh and a mouse. It will reduce the distraction for the visitors.

Here is the prototype / my visual of my final project:

Zeyao – Exhibition – Paper Circuit

For the paper circuit assignment, I just followed the instruction of the paper, and tried 5 different circuit. When I made the first one, I accidentally cut the tape too short for the first circuit. So the LED did not connect to one side of the circuit. So, I failed my first try of the paper circuit! But it’s okay. Learning from my failure, I tried the second circuit. This time, you can tell the circuit looks much better, and it worked!! Then I just followed the guide and finished the rest of the circuit. I actually didn’t know the switch was also the conductive tape until I asked Cici, and she told me it was just a simple circuit. When you connect the tape (switch) to the circuit, it would work. So here are some pictures of my circuits!