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.

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.
sketch – http://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)
sketch – http://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.

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.

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.

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.

Paint / lead
The paint program plays different notes as you paint across the screen. The notes are mapped to different zones on the canvas.

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.

Breadboard POC of the flex sensor readings.

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

Final glove interfacing with the sketch.

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.

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.

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.

 

 

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.

 

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.

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

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.

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.

 

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.

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

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

 

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

 

Interactive sketch in p5.js

Find the sketch here

Class 2_Some more sketches

Animated rectangular gears

Sketch that didn’t work

Trying to create a parallax clock (cant figure out how to loop the animations)

Computational media and my first sketch with P5.js

Computational media simply means, using computational power to manipulate tangible or intangible media.

On the first day of ICM class last week, we discussed the possibilities of computational media and some moral conundrums in technological progress. This was illustrated using a thought experiment, in which an automated car heading towards an impending collision has to decide between hitting either a group of people or a single person!
As a philosophical problem, it is seemingly unanswerable, as one would get lost in a moral labyrinth the moment one starts to put conditions on who the unfortunate people/person could be. For example, the group of people could be fugitive criminals and the individual person could be a kind philanthropist.
Should you then choose to self-destruct? And what if the passengers are innocent kids?
Anyway, as a designer, I would resist indulging in philosophical puzzles and instead treat this conundrum as a ‘use case’ to think of possible ways to solve these problems. Mega issues like these which lie in the civil domain need intervention on multiple levels, including infrastructure development, city planning, policy making, civil engineering, etc. In a well-designed world, such a dilemmic situation shouldn’t arise. Perhaps in the future, all of our road infrastructure will be tiered with separate highways for different modes of transport or maybe separate concealed lanes for driverless cars.
Computational power is sufficiently developed for driverless cars to watch traffic or obstacles much further in space by using satellite imagery, and algorithmically calculate their trajectories ahead of time to avoid collision.

In the future, I wish to be in a position where I’ll get to deal with problems of such magnitude, both in terms of scale and complexity. I am fascinated by the physical scale of things for its immersive/emotive impact and a kind of surreal experience it sometimes creates. I particularly recall two new-media projects dealing with scale on a macro and micro level respectively-

• Squidsoup’s submergence

Squidsoup is a digital arts group from UK, they often combine sound, space and virtual worlds to create immersive experiences. Pictured above is one of their famous pieces called submergence. It is a monumental 3D grid of LEDs which can visualize animations in 3Dimensions. Follow the link above to see it in action!

 

• Mind controlled paramecium

A weird yet brilliant project using a cheap EEG device and Arduino to control paramecium bacteria.
Sinister or not, is open to debate but I find it fascinating to see technology being used to manipulate our natural world with sheer will, in real time!

 

Having a product design background, I am also interested in using code to shape 3D form. I love the work of Zaha Hadid studio that uses generative design to conceptualize gigantic buildings which are extremely fluid and organic. Nervous System is another one of my favorite studios which combine organic generative design and digital fabrication methods.

 

First P5.js sketch

So with big hopes and lot of excitement I took baby steps toward mastering Javascript by making my first ever sketch using P5.js. I thoroughly enjoyed the process but was a bit annoyed with having to gauge where the shapes would lie in a coordinate system, mainly because the coordinate points were at the scale of pixels! I am too used to using Photoshop for visual design work so the lack of an intuitive interface for arranging visual elements was a bit frustrating!

Although, later I discovered a simple workaround to this issue on Carrie’s blog which is to simply draw the shapes in illustrator first to get the exact coordinates.