Skip to content

andrewhariyanto/webware-a4-creative-coding

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Audio Waveform Visualizer

https://a4-andrew-hariyanto.glitch.me/

This project is an audio waveform visualizer that uses the WebAudio API and Three.js. The goal was to learn how to use shaders and the capabilities of WebGL. The biggest challenge I faced was tyring to understand how exactly to combine the WebAudio API with Three.js. It took a while to plan out and test how the output of the analyser could feed into the vertex shader for my waveform. The instructions to use the application is shown in the description panel hwoever, here are the instructions again for each parameter that the user can interact with:

  • Volume: Changes the volume of the music and consequently the amplitude of the waveform
  • Function power: (sin (x) ^ y) where y is the function power. Leads to interesting changes in amplitude, displacement, and frequency
  • Frequency: changes the frequency of the waveform
  • Color change speed: changes the speed at which the waveform switches colors
  • THere are Play and Stop buttons for the music on the description panel

Credits for the music used called "RE-IGNITION" go to Riot Games Valorant Team and featuring Emei, Jazz Alonso, and ARB4.

About

One of two options for A4 in Webware 2023

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 65.6%
  • Handlebars 19.1%
  • HTML 12.3%
  • CSS 3.0%