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.
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."
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.
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.
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!