Building Generative Glitch Art Tools

Glitch art is a visual style characterized by using digital or analog errors for aesthetic purposes, whether that be intentional (that is, "faking glitch" and obtaining a similar aesthetic through design) or by accident (a true manifestation inside of the system without human intervention) - 99designs

One of my first introductions to glitch art came quite a few years back when I stumbled across the work of Vancouver-based artist Sara Cwynar. Sara's darkroom scans are manipulated in a way that adds a shaky RGB effect into the otherwise black & white images. The process involved in creating this unique style of imagery immediately drew me into the medium.

Sara CwynarSara Cwynar

Then, at the beginning of 2020 I came across this awesome CodePen by Fabrice Lejeune:

The "glitch painting" is created using 100 <div> glitch elements, with varying heights and X coordinates for each. The cool part about it all is it's constructed with only a little bit of HTML and CSS.

As mentioned in the JavaScript section of the CodePen, Fabrice's work was inspired by the art of Madrid-based artist, Manuel Fernández. Manuel's BG Paintings are created using ultraviolet inks on canvas to create glitched out gradients, which Manuel describes as: "blurring the boundary between computer graphics and painting, (and) between virtual and real."

Manuel FernandezManuel FernandezManuel FernandezManuel Fernandez

glitchart.io

Seeing both Fabrice and Manuel's work inspired me to build a generative tool which allows the user to create and save the same style of art using a set of input parameters. Glitch gradient colors, amount, distance, direction and border-radius can all be set by the user. Implementation-wise, I took a similar approach to Fabrice. I used individual <div>s for each glitch and positioned them using translateY and translateX CSS properties, using a random number between 0 and the "Distance from the center" amount. Generated art is guaranteed to be unique every iteration.

Glitch Art Generator Screenshot
Glitch Image SampleGlitch Image Sample

glitchyimage.com

The second generative tool I chose to create plays on the same style of work, this time using an image instead of a gradient as the foundation of the generative art. For this project, I wanted to utilize JavaScript's Canvas API as the means for generating the new image. Doing so opened up a whole new range of functionality that could be utilized. One property I was really interested in using is the canvas rendering context's globalCompositeOperation. This property provides various blending modes for the glitches which are drawn onto the canvas, resulting in some pretty unique imagery.

Glitch Art Generator Screenshot
Glitch Image SampleGlitch Image Sample

Creating these generative glitch art tools has been a lot of fun, and has opened up my perspective to what's possible when you combine art and code. I'm looking forward to seeing what path this leads me down next!

Adam Fuhrer — 2021·12·28