In a 4th year SIAT course, we were tasked with creating a tool that would “help people be creative”. We decided to create a glitch art creation tool. This tool works by running images through audio effects, creating unique and surrealist distortions.
The app’s design was a collaboration between me and Taylor. We used Figma to explore various User Interfaces. Taking inspiration from design patterns found in many audio applications such as Izotope’s Ozone, we settled on the above design.
I opted to use Electron so I could bring my current web development skills to the desktop. I used Vue.js to create and implement the interface using reactive templates. I also utilized the Web Audio API to apply the audio effects to the image along with an audio effects library called Tuna.js.
The biggest challenge was with the technical implementation of the glitch effects. Surprising as it may be, audio effects libraries are not designed to process images so converting compressed images into raw image data that could then be converted into PCM sound data was a fun challenge that involved a combination of external libraries and type conversion.