Composition & Visualization

Shift Creator Space 2020–2021

Fengjin Cui
shiftcreatorspace
5 min readMay 11, 2021

--

Music has always been a part of my life. It has taken me on vivid adventures through the human experience, whether it be told by Beethoven, Tchaikovsky, Marvin Gaye, Childish Gambino, or Dizzy Gillespie. But, I’ve only ever been the listener or the performer, never the composer. So at the beginning of this year in Shift, I decided to start my journey as a composer.

Composing is different from listening, just as writing is from reading. It’s an open-ended question, allowing for an endless range of expression as an answer. In addition to offering possibility, composing also calls for an intuitive, mechanistic understanding of music and craft. From my experiences performing as a pianist, singing in choirs, and conducting ensembles, I’ve developed some intuitions about how music works. However, as someone unfamiliar with the creative process, I wanted to take this opportunity to get involved.

In the fall, I started with the lofty goal of composing a tone poem based on 《蜀道难》 by Tang dynasty poet 李白. Tone poems are usually long continuous musical works that tell some narrative, and this Tang dynasty poem is no exception. The poem, possibly written as a warning, depicts the difficult roads to the state of 蜀.

A tone poem by Richard Strauss

Learning the poem was the first step I took, because I believe understanding the narrative is crucial for basing any composition of this type. I spent weeks analyzing stanzas, consulting dictionaries (one of them being my mom), and translating the poem to English. The most exhausting part was trying to find the right English expressions for the Chinese stanzas. It forced me to dig deep into the perspectives, meanings, and contexts within the poem to find key aspects to include in my translations. I also chose to experiment with English sentence structures to somewhat match the original ones. Here is the end result, which I’m quite proud of (despite it being a bit unintelligible).

The second step was to draft the composition based on my understanding of the poem, but I quickly realized that I lacked the compositional experience to sustain such a large project. So, I decided to register for a music composition class in the winter semester and set this project aside for later.

Over winter break, I decided to turn my attention elsewhere: toward building visualizations on the computer. Coupled with interactivity, computer graphics is one of the computer’s most important capabilities. For example, think about how immersive video games have become or how easy text editing is. I wouldn’t want to write (and erase) this article by hand.

To stick with the theme of music, I built a tool called Cacophony using Vue.js, WebAudio API, and D3.js, a JavaScript library for visualizations, that shows the wave graphs of different harmonies. It was inspired by my desire to grasp why each chord sounds a certain way, and if you play around with it, you can notice some interesting patterns. It’s always cool to see the physics behind music.

Cacophony

After building Cacophony, I spent time juggling my work for the composition class and ideating for the rest of the year. I played around with ideas like using QR codes as a means for more persistent, scannable storage and building a mobile application. It wasn’t until towards the end of the semester when I found another project: building a personal encyclopedia.

This personal encyclopedia is in a similar vein as my project from last year, where I prototyped a hierarchical note-taking web application. However, instead of focusing on note-taking, this project is more about accumulating recent thoughts and putting them in a presentable format.

The main motivation behind this project is teaching as a way of learning better. A person doesn’t know something well enough if they can’t explain it to someone else. Also, because this project started as a web application, it stores my learnings in an accessible and interactive way.

The architecture of the project is relatively straightforward. All of the articles for the encyclopedia entries are written in Markdown, a lightweight markup language, and stored in a local directory in the filesystem. Each article has its title and tags, which is used for categorization. I then used GraphQL to pull these articles into the application and used React and D3.js to make the visualizations. Of course, I had to use CSS as well for styling.

The prototype is available here, filled with some sample articles based on two of my classes this semester.

Untitled prototype

As mentioned earlier, I took a music composition class during the winter semester to build a better foundation in composition before tackling my goal of composing a tone poem. For the final class project, I actually composed a smaller piece based on a shorter poem 《春晓》 by 孟浩然. Although I have a little ways before I can continue on my original goal, I believe this is a good first step for the future.

That’s all for this year! Thanks for reading.

About Me

Fengjin is going to be a senior studying computer science, music, physics, and complex systems at the University of Michigan.

Besides Shift, he sings in the University of Michigan’s Men’s Glee Club, one of the oldest and finest collegiate male choruses in the nation.

--

--