All Articles

Final Project - A Square's Expedition

Introduction

A Square’s Expedition is a web-based music visualizer. It tells the journey of a square exploring the universe.

Meyda.js and p5.sound library are utilized in this project for extracting audio features which affect the visual in the folowing ways.

  • FFT / Amplitude Spectrum: The background stars are mapped to different frequency where their size shows each amplitude.
  • Chroma: The direction the square is heading is controlled by the chromatic pitch class (C, C♯, D, D♯, E, F, F♯, G, G♯, A, A♯, B) which range from 0 to 360 degree.
  • Loudness: It’s Affecting the size of the square and scale of the whole scene which creates an illusion like a tracking camera. (I was trying to provide the feeling of 2D RPG game.)

Try it or get the source code on Glitch.me

Music: Debussy - Clair de Lune