Music Visualization

Simple DJ keyboard that allows users to enjoy music during Covid at home

Make Technology
Achievable.

Processing

Prototyping & Development

Generative Art

Music Visualization

Although haptic feedback is part of every physical interaction, it is mostly neglected due to its complex design process. Hapticlabs.io is a toolset to democratise haptic feedback, allowing designers to identify opportunities and easily create functional prototypes. It consists of two parts: A prototyping kit which does not require any expertise in coding or electronics, as well as an online knowledge base, which provides easy to follow background information and guidelines.

YEAR

2020

Project Type

Physical Computing

OVERVIEW

This project is a simple game of musical performance using a music visualizer. This music visualizer reads audio data from different instruments, simulates a simple sampler with the computer keyboard, and represents different data with various visual effects.

Initially, I was just really interested in the concept of music visualization by program and wanted to learn and design it. During the exploration, I found out using my own emotional understanding to represent different music with various visuals is also fascinating. I can make it into a game to entertain people in that way.

Make Technology
Achievable.

Processing

Prototyping & Development

This project is a simple game of musical performance using a music visualizer. This music visualizer reads audio data from different instruments, simulates a simple sampler with the computer keyboard, and represents different data with various visual effects.

Initially, I was just really interested in the concept of music visualization by program and wanted to learn and design it. During the exploration, I found out using my own emotional understanding to represent different music with various visuals is also fascinating. I can make it into a game to entertain people in that way.

YEAR

2020

Project Type

Academic

01 Step One - Ideation

Storyboard

Visual Element Ideation

Kinda explored different approach...

At first, my idea was using a piezo sensor to read the vibration value of a record player while it playing music. But this program can only visualize the vibration of each song.

Code

Testing

MUSIC VISUALIZATION USING MINIM LIBRARY

During the second week, I choose to use Fast Fourier transform (FFT) to analysis music. I decided to use the scale of shapes to represent tempo and bobbles to represent the active state while playing songs. And also added some interaction with mouse and keyboard to change the shape and color of each elements to make more interesting as a visualizer.

The visualizer reads the audio data in concise time slices and does a Fourier transform on each slice, extracting the frequency components, and updates the visual display using the frequency information.

FFT Recognition

For the music, I want to have different instruments as different music samples for the user to interact with. So I use Apple’s Garageband to create a piece of simple music.

Final Outcome

During the second week, I choose to use Fast Fourier transform (FFT) to analysis music. I decided to use the scale of shapes to represent tempo and bobbles to represent the active state while playing songs. And also added some interaction with mouse and keyboard to change the shape and color of each elements to make more interesting as a visualizer.

The visualizer reads the audio data in concise time slices and does a Fourier transform on each slice, extracting the frequency components, and updates the visual display using the frequency information.

The whole idea revolves around how to get people to simulate being a DJ at home with their computers, so I chose to use a laptop keyboard as the main trigger instead of a sensor. Each key controls a type of track so that you can play music and party at home!

Music system and visuals

The final codes

Works

About

Resume