VOID
WebGL on Canvas 06.2015
WebGL on Canvas 06.2015
All art is created from nothing into something.
Our imaginations piece together concepts which we then transform and manipulate mass to fill space.
We use the VOID to house these pieces, and we see the emptiness that surrounds them as potential for new ideas.
VOID is an experimental audio / visual storytelling experience.
The initial idea for the project came about from several generative artworks I made as a way to teach myself WebGL and threejs. A small group of us at Hi-ReS! gathered together and started to brainstorm how we could develop this into a larger concept.
“All art is created from nothing into something.
Our imaginations piece together concepts which we then transform and manipulate mass to fill space.
We use the VOID to house these pieces, and we see the emptiness that surrounds them as potential for new ideas.”
Soulbath, which was one of Hi-ReS!’ defining projects, provided little guidance for the user navigating the experience. User exploration was key to uncovering content through unusual and obscure interactions. This served as the framework for our user interface. To keep the user’s attention on the art throughout the experience we kept the user interface minimal.
We divided the experience into chapters like a book, taking the user on an immersive journey in a world where the art would deform, shake and explode through their interactions. Although the experience had no overarching narrative, we wanted the user to progressively explore the artworks instead forming their own narrative about the space they’re in.
After the user is taken through a black hole they land on the first artwork - Black Ice.
Subdivision became a favourite technique of mine creating generative art. Appling randomness to each subdivision iteration created a rough jagged surface. The more I started to play around with shaders I came across reflective environment maps. Using the flat normal of each shardcreated an interesting and mesmerizing visual effect reminiscent of fractured glass.
As the user clicks down the artwork subdivides more and more, creating more complexity in the form. Using the drag and drop web API the user can drop new images onto the canvas to dynamically change the cubemap reflections.
My early journey into generative art lead me to fractals, from 2D to 3D these structures have become a tradition for me to create when learning a new software or a graphics API.
Elements were the result of many years of creating these structures through various softwares and technologies. Inspired by Plato’s love for the platonic solids, we named each one after their reference to nature. Earth, Air, Fire, Water and Cosmos.
Visually I imagined these structures being kilometers in size, so I wanted to emphasize depth and scale as the user panned around. Exponential fog was used to help visually achieve depth in the scene.
Each fractal has the potential of containing thousands of instances of the underlying geometry. To optimize this I merge all the geometries together which creates a single draw call when rendering.
A colleague at Hi-ReS! proposed the idea of deforming the structures into a sphere, I thought this was an interesting idea to try out. Unexpectedly I found inverting the scale lead to some really interesting shapes. Dragging left to right causes the fractal to inflate and deflate.
Kubik was originally created by a colleague Henrique Matias in Quartz Composer.
Henrique is an advocate of visual programming / node based languages. After examining his Quartz Composer patch I recreated his artwork in WebGL.
The shape may look very organic under various rotations but is interestingly formed from 160 cubes rotating on different axes and angles. With the first two artworks in VOID being very structural and visually heavy Kubik was a calming break midway through the experience.
Animating the camera’s field of view when the user clicks down creates some interesting distortions of the pattern.
Our self-titled piece “Hi-ReS!” was collaborative artwork created for VOID by the team.
This is the only piece in the experience that uses real time generative audio. Henrique Matias composed the audio in CoffeeCollider, a CoffeeScript implementation of SuperCollider. Many Hi-ReS! employees had a musical background making sound design something of great importance in this experience.
As the user clicks down and pans left to right the audio distorts along with the triangle shards, vibrating and creating visual noise. Aesthetically we wanted to create a composition that represented Hi-ReS!’ strong artistic nature.
If you ever walked into the Hi-ReS! office you’d likely come across various skulls. It became the company’s unofficial mascot, even so someone created a 3ft card version from a 3D model that we’d use in various prototypes.
I asked Scott Ashmore, one of Hi-ReS!’ creative developers to create an artwork for halloween. Scott used a shatter effect in WebGL to explode the geometry into thousands of little shards. As the user holds down they can see a glimpse of the original form. Upon release it explodes and the shards dissipate all throughout the surrounding space.
Liquid Ice began as an investigation into realtime liquid effects. Marching cubes, an algorithm that constructs a geometry each frame based on points in a field, is a common technique within the creative developer community.
I thought it could be interesting to use this algorithm to create an artwork that juxtaposes the form of Black Ice.
As the user clicks down they’re taken inside the liquid mass and the audio fades to an underwater loop.
Closing Thoughts
At Hi-ReS! we received a lot of recognition among our peers and the creative community for this experience. WebGL art websites we’re not too common up until 2015 and many people who I met at conferences or online said it reminded them of Hi-ReS!’ earlier flash works.
Up until this day I’m still using code and methodologies I developed whilst creating this website 🖤.