Visual+Gestural musical interface

The strength of this project is in the collaboration. I was sure I wanted to make some form of a visual musical interface or instrument for non musicians, but without any understanding of music theory, I needed to partner with someone who does. I met two students who had similar ideas around using a glove based gestural interface. We got together and spent a week ideating on possible interfaces with the given controls.

Being the primary target user without any formal knowledge of music, I had to think of suitable gestural and visual metaphors to model the interface after. I wanted to strike a balance between creating enough structure to constrain the musical output, so that the music doesn’t sound random and incoherent, and some freestyle component so that the user also has a sense of spontaneity in playing melodies. What emerged was a holistic and intuitive musical interface that combines a non-traditional graphic notation with gesture-based wearable controls that is simple and intuitive enough for a non-musician to use comfortably. It is halfway between a traditional step sequencer and Kandinsky from the Chrome Music Lab Experiments. So the step sequencer is where you would loop different instruments and use the drawing program and glove in combination to freestyle with the music.

We decided to use Tone.js library as a primary source for all the sound synthesis. Most challenging yet exciting part of this process was the convergence and divergence of each of our work processes within the team. It was a bit of a catch-22 situation where the visuals and animations were dependant on the sound and the sound was dependent on the visuals. So each of us would go exploring our own ways and build on each others work, step-by-step.

As an early POC of the idea, I put together a basic visual composition to compose a piece of music around. The idea was to prototype the translation of visuals to sound.

Visual design 1

Each color being a separate channel playing a different sound and the shapes dictating the texture and timbre of the sound. The position of the shape on the canvas dictates its frequency and pitch and finally the opacity being the amount of volume.Here’s what it sounds like –
https://soundcloud.com/arnavw/test-score-for-visual_icmpcomp

Next, I made a POC of a basic drawing program, with two different oscillators mapped to x,y axes.
sketchhttp://alpha.editor.p5js.org/Arnav/sketches/B1D0JY1xz

For the glove, we narrowed down on using 4 flex sensors (controlled by Adafruit Flora board) sown onto the glove for 4 fingers and either a light sensor or an accelerometer at the palm to modulate a certain sound parameter. We initiated the process for sourcing the BOM for the glove.

POC of interface + Serial control
This one uses a potentiometer in place of flex sensors.

By this time the team was making a lot of progress with understanding and creating sounds with Tone.js. To familiarize myself with the library and test the serial interaction with the sketch, I put together a basic generative music program with sliders to control the tempo with frame rate. As the flex sensor was giving me erratic values in p5, I mapped the slider values to a potentiometer (to simulate the flex sensors on the glove)
sketchhttp://alpha.editor.p5js.org/Arnav/sketches/Sy5pAHIlz

I wanted to create different tempo rates for different sound families and control that with a Pot. Changing the tempo seemed to be a good way to easily and quickly add a rich level of expression to the music being created.

Next step was to find suitable visual metaphors to give body to the sound. I also had to think of choosing the right animations for representing the sounds more intuitively.

Interface idea

This was an early visualization of the interface, with three basic geometric shapes and a draw program to the left, each shape produces a certain sound. The glove is used to modulate the sound and add effects to each of the sounds, which then dynamically update in the 10Print generative program to the right. So there is a certain rule system which the computer decides for you, but you too have a vast degree of freedom to modulate the sounds in real time.
But of course, as my team rightly pointed out, the tempo couldn’t have been dependant on the frame rate. We needed the maximum frame rate for animations to run smoothly.
So we decided to add one more instrument to the grid on the left and move the draw program to the right.

Max put together this compiled sketch with placeholder sounds and animations to build on.

I started figuring out the different sound analyzers in the Tone.js library and use that data to animate each shape with.

Circle / Kick
Currently I am using the tone.progress function to get value of the kick loop as it progresses through time. The returned values of which are mapped to the circle in reverse, so it swells to its peak as it hits the kick sound.
ezgif.com-video-to-gif

Square / Bass
I am using waveform analyzer on the bass. The waveform analyzer returns values as a fat32array. It took me nearly half a day to get this working. At first I tried mapping the array values to a single line but instead of getting a granular visualization of the waveform, I was only able to move a few points on the line, leading to much frustration! I ran the bass sound through a distortion filter as a naive attempt at getting a more pronounced waveform. Eventually I used the array values to make the square vibrate to its waveform. I played around with the array size and skipped a few pixels till I achieved a satisfactory amount of vibration.
ezgif.com-video-to-gif (1).gif

Dynamic dots / Piano
The piano chords are very rich in sound & the animations had to do justice to the chords. The piano loop has 4 sets of chords, each with 3 notes. I wanted a circle to fade in, each time a chord was played from any given loop. It was very challenging to achieve this as the sound/time component was part of the Tone.js library. Finally, with help from Shivanku, I was able to sync the animation with the chords. I used the Tone.progress function as a global timer and broke it down into three phases. I then initiated a different circle animation to play at each phase.
ezgif.com-video-to-gif (2)

Paint / lead
The paint program plays different notes as you paint across the screen. The notes are mapped to different zones on the canvas.
ezgif.com-video-to-gif (4)

This is the revised sketch, the triangle with snare sound is still being figured out.
new sketch – http://alpha.editor.p5js.org/Arnav/sketches/HyZAgOHZz

Parallelly, the glove was also shaping up steadily. The glove uses a simple circuit of 4 flex sensors wired to each of the pins of the Flora board.
GLOVE CIRCUIT

Breadboard POC of the flex sensor readings.
test 1

Update: Amena finished sowing everything on the glove. Only thing left is soldering all the connections.
glove 0

Final glove interfacing with the sketch.
glove 1

In the meantime I continued improving on the animations. For the snare / triangle I used the waveform again to slightly shake the triangle as it hit the snare.
ezgif.com-video-to-gif (3)

This is the final sketch. After testing the sketch on an iPad, the black background was showing too many smudge marks on the screen. So I decided to adopt a whiter background for the screen. The latest sketch is also fully responsive to work on any screen.
sketch – http://alpha.editor.p5js.org/full/HJpPK4jWf

 

Project proposal for final project_Fall ’17

I want to make an intuitive electronic music production system for non musicians.

I’ve always wanted to make electronic music but haven’t been able to do so successfully, mainly because I am incapable of auditory thinking and all the serious music production softwares are quite counterintuitive with lots of knobs, buttons and sliders as inputs for control.

I want to create a system which is directed towards people who are more of visual or spatial thinkers than auditory thinkers. It is easier for me to ‘see’ music rather than ‘hear’ it in my head. The system should feel very natural and intuitive and involve multiple senses.

I will be collaborating with Max Horwich and Amena Hayat on this project. Max is deeply immersed in the technical aspect of music and sound and Amena is interested in using soft wearables as control.

So far we have a lot of scattered ideas and we are still in the brainstorming phase but what seems to be emerging is a system which is a combination of a tabletop interface and wearable control. Perhaps the tabletop interface is where you visually design complex rhythm structures and use the wearable for all the fluid instrumentation and melodic compositions.

Phys Comp Midterm

I collaborated with Jiyao Zhang for my mid term project for this class.

Since the midterm presentation was due around the time of halloween we decided to do something around that theme.

After several rounds of discussions we finally arrived at a simple idea of releasing a ghost trapped in a glass jar which tells you your fortune….or rather your misfortune.

We started with initial project plans and early sketches of the ghost!

We wanted the ghost releasing interface to be very intuitive and something that will directly reference our real world. The childhood activity of trapping fireflies in a jar seemed like the perfect metaphor for such an interface.

IMG_5225
The jar in which the ghost was to be captured

We decided to put an illuminated PingPong ball at the bottom of the jar to symbolize the ghost. The act of opening the lid was to be used as a switch to trigger the event of releasing the ghost in p5.

 

 

compare
New home for the ghost

Unfortunately the plastic jar was lost just 12hrs before the presentation. We were forced to rethink the interface and the third iteration actually turned out to be much better.

We went back to our glass jar and decided to use it inverted without the lid, as if one was trapping an insect crawling on the floor.

 

IMG_20171030_015154271IMG_20171030_002119605

IMG_20171030_015158180
we created a switch using copper tape electrodes on the platform. The jar also has copper foil on the rim which completes the circuit when placed on the platform.

IMG_1745

The image above shows the jar placed inverted on a platform. The jar has an illuminated ball inside to symbolize a ghost. When the jar is lifted off the platform the illuminated ball turns off, as if the ghost is released and is seen on a screen. The ghost then tells you your misfortune.

Click on the image below to watch the video of the project
video

click for the p5 code

Week 7_ICM_Data viz with p5

Tried running a couple of experiments using simple text & api based data sets.

My first experiment is an early pilot of my mid term project for PhysComp. A simple project using arduino+serial com, where in a ghost appears in front of you when you let it out of a physical jar and tells you your misfortune. I compiled a list of freaky/offensive fortune sayings into a text file and used that as my data source.

Below is an example of the program. A new saying is generated every time you click on the screen.

20171025_092552

find the the code here

in my final project, each of these sayings will be triggered by the opening of a physical jar.

—————————————————————————————————————————————–

For my second experiment I wanted to use the weather api and create a simple visualization of weather. I wanted the background color to change with temperature and humidity to appear in form of particle fog on screen.

Uploading the final sketch here, the problems faced during the process is documented below.

20171027_222458.gif

 

ICM_Week 5_Objects/Arrays

For this week’s assignment I experimented with using classes, objects and arrays.
The idea was to have an array of squares fill up the entire canvas and make each one of them rotate with a slight delay.

Capture

I knew I had to use the Push/Pop feature to make the rectangles rotate independently but placing that feature in different parts of the code gave me different results.

Results of trial 1 –
placed push/Pop in the draw loop in sketch

20171011_015327

Result of trial 2 –
placed Push/Pop in the display function within the Class (Rectangle.js)

 

20171011_022107

trial 3 –

Couldn’t figure out how to create a grid using array (both x and y)
So far I could only manage arraying in x

 

20171011_042655