Author: Thomas Tai

For this week’s assignment we were asked to come up with ideas for how to generate melody. 

Pong Random Melody Generator

Upon loading, several balls are placed onto the canvas with random velocities and positions. The user can interact with the balls to click and drag around. When they hit an edge, a note, short melody, or chord will be played to the user and the ball will change color to the note that was played.

 

Drag and Drop Melody Interface

The user can select from a library of generated melodies that range from classical music to rock and roll. Pieces of music that pair well together will be grouped together, such as music that is at a similar BPM or key. When the user is ready to play, a cursor will show up on the timeline which shows what is currently playing on the screen. Lastly, an option could be made available to export the given piece to midi or mp3.

 

Virtual Guitar

Similar to a real guitar, the user can strum over notes using his or her mouse. Notes to the left are at a lower frequency, and notes to the right are at a higher frequency. Frets will be displayed on the image of the guitar, which will allow the user to select which note to play. 

For this week’s assignment we were asked. tot find a piece of music we found melodically engaging, and to draw the melody in the piece using our visual language. I just started playing this piece for private lessons and found it to be relaxing and soothing. The piece is written for solo violin and orchestra, from the opera Thais by Massenet. The height in the drawing represents pitch, the bumps represent rythmn, and the width represents time.

According to wikipedia: “Thaïs takes place in Egypt under the rule of the Roman Empire, where a Cenobite monk, Athanaël, attempts to convert Thaïs, an Alexandrian courtesan and devotee of Venus, to Christianity, but discovers too late that his obsession with her is rooted in lust; while the courtesan’s true purity of heart is revealed, so is the religious man’s baser nature. The work is often described as bearing a sort of religious eroticism, and has had many controversial productions.”

Drawing:

Demo: http://thomastai.com/markovchain/

Introduction

For this week’s project, we were asked to create a project that explored aspects of rhythm. Since we had been exploring Markov chains in class, I decided to create an interactive experience around it. I wanted to create a natural interface that could allow the user to change the probabilities of notes in real time. Notes and probabilities are represented as a graph, with directed edges with probabilities and vertices with sound file names. I created a version with drums and violin just to hear what it would sound like. 

Implementation

While I had first thought about using p5.js, I quickly switched to a different library for data visualization. I found a javascript library called vis.js which allows me to create interactive graphs. However, the type of data structure that Tone.JS uses  is different from the one that vis.js uses, so I had to create code that could convert the object with nested dictionaries into two separate arrays for nodes and edges. I also added a play and pause button as a workaround for audiocontext blocking the initial call on some devices. While the concept is easy, coding it was more challenging than I expected. There are some issues that need to be fixed, such as probabilities not summing up to one and the tone.js loop randomly stopping every once in a while. If I were to work on it in the future, I would add images, make it more aesthetically pleasing, and add more sound files. 

Video

Live Sketch: https://editor.p5js.org/thomastai/sketches/LWnAr-XQ

For this week’s assignment, we were asked to create our own version of the drum machine. For the theme, I added Windows XP sounds to make it sound like a computer from a decade ago. I made a few changes to the example shown in class. I added more tracks, labeled beats and track name, and allowed the user to change the tempo and volume. One small detail which I thought was important to add is to make the cursor change when it is hovering over a rectangle. I also added margins and rounded the rectangles to make it more visually appealing. Naturally, the colors of each track are Windows XP logo colors. Below is a video demo of the project: