SnafuCreated with Sketch.

Snafu

Design + Dev

View Project
Snafu

Snafu is a desktop app that makes creating glitch art more accessible to beginners and more creative for professionals. It processes images using audio effects using a technique known as databending to create truly bizarre creations from even the most banal images.

Tools

  • Unofficial_JavaScript_logo_2Created with Sketch.
    Electron
  • Unofficial_JavaScript_logo_2Created with Sketch.
    JavaScript
  • Vue.jsCreated with Sketch.
    Vue.js

Background

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.

Design

Design

The app's design was a collaboration between me and Taylor. We used Figma to explore various User Interfaces. Taking inspiration from from design patterns found in many audio applications such as Izotope's Ozone, we settled on the above design.

Development

I opted to use Electron so I could bring my current web development skills to the desktop. I used Vue.js to create 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.

Challenges

The biggest challenge was with the technical implementation of the glitch effects. Surprising as it may be, audio effects library 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.

Design & Implementation by Josh Stuible in Vancouver