Nine Times Infinity

Surreal Generative Art

*Desktop only, designed to be projected.

A generative art project exploring continuation of life from death. Over time, the central figure is consumed and replaced by vines, roots and flowers. The layers of growth over time is based on the fibonacci sequence, which is found in nature. 2 sets of colour hues are randomly chosen; one for the vines and roots, another contrasting set for the flowers that have a random chance to grow.

Similar theme to my other surreal art exploring minimal worlds and environments with obscure figures, inspired by the artist Giorgio de Chirico and author Olaf Stapledon.

On a technical level, many of the JS animations were repurposed from Franks Laboratory, an amazing YouTube channel showing how to work with JS canvas. The roots, as well as image mapping couldn't have been down without his work.

Audio was sourced from Freesound.org, here's a list of the artists sound clips used;
Finnssound, Philip_Goddard, Universfield

Star Generative Art

*Desktop & Mobile, designed to be projected.

This generative art project explores the life & death of a star and the creation it makes. Wanted to explore, using abstract shapes and forms, the portrayal of a stars formation, its expansion, and final death. Also playing around with audio and muscial notes as the star grows and general ambience. Life has a possibility to be created but it's rare. Idea was to project this in on a wall so desktop only, no mobile formatting.

Audio was sourced from Freesound.org, here's a list of the artists sound clips used;
kvv_audio, be-steele, jovica, rula11

Exploring generative spaces

*Desktop only, designed to be projected.

This was another experiment exploring generative art to create a strange other-worldly environment. Connected to past work like The Traveller or Formation of Structures. This, also, is inspired by surrealism and Giorgio de Chirico in an attempt to create strange worlds and spaces.

Used a combination of JS canvas (e.g. kaleidoscopes) and DOM animations. Refreshing the page or pressing the 'r' key will randomize the layout. Hitting the 'enter' key will go full screen.

Projected generative art

*Desktop & Mobile, designed to be projected.

This project is another one using humanoid like shapes and surreal environments. Designed as a wall projection (ideally), the space slowly reveals a randomly created environment with a flow field animation filling up positive vs negative areas. Inspired again by the work of Giorgio de Chirico, wanted to create and experiment building strange surreal environments. Using humanoid figures from other projects, I've been fixating on these for a while in my pure artistic type projects. The flow field code was a little beyond me, especially the perlin noise being applied to it, using a 2D perlin and simplex noise algorithm library for this. Randomization of the environment overlay was built using images that are knockout of a black filled canvas. Would like to expand and create more humanoids, buildings, etc, more assets the randomization can build from.

Our Dreams

*Design for Desktop, does not work on Mobile.

A quick project exploring a more gamified UI and story, e.g. creating a top down map the user needs to navigate through. Researched top-down games and 'tile' based games and made a simple version of this type of interface. The story for this one is simple, abstract but also quite generic, put most of my focus on getting it built and working, story took a bit of a back seat.

While the story for this might be have simple I had fun focusing on a design that utilized mostly black & white and how to create abstract shapes when exploring. Using different layer of JS canvas to achive this.

Some collision bugs that need fixing, plan on work on better collsion detection in future projects!

The Far Future

*Works on Desktop & Mobile.

This is project / story was inspired by the novel and film, Last and First Men. The story by the author Olaf Stapledon, written in the 1930's, details the existence of the human race over a period of two billion years. Both the film and novel are amazing and are fascinating explorations of what a far, unknown future could be. I was intrigued by the concept of our existence so distant from now and was inspired to write my own story exploring the same ideas.

This was a challenge as I wanted to write the story as a free verse poem, my first attempt at such a format. I also wanted to make the story both linear and non-linear, the reader can jump to any point in time within the stories flow, however this will change the outcome of the story ending. I also wanted to tie in my recent screen printing art (and The Traveller) to expand on the idea of 'the observers', unknown entities observing life, stars, the universe, for mysterious reasons.

Unlike past my projects, I did not have any technical coding goals to figure out, however thinking about how a non-linear story would be interacted within a UI was tricky. I opted for simplicity in the end and focused on the writing, which was by far the hardest part to complete. Enjoy!

Exploring Entropy

*Works on Desktop & Mobile.

A simple project exploring two elements, entropy & otherworldly environments. Wanted to create a simple walking simulator site where a traveller walks across an ethereal space encountering strange figures they can interact with. These strange figures have messages in the form of haiku's the user can read.

The experience is not long, the idea was to keep it simple and focus on telling a simple story as you walk through a space. The site works on both desktop and mobile, desktop will give you the best experience in regards to the environment, solely due to it can show more of the entire space.

As far as technical goals, with this project I wanted to experiment with creating and controlling sprites objects in javaScript as well as explore creating a side scroller with background and foreground animations. Also added some canvas effect and sound to push the story narrative.

Exploring layered art with JS Canvas

*Desktop only, designed to be projected.

Another exploration into creating art with JS and canvas. While not a fully generative art project, I wanted to push the idea of making a randomized layout or environment that changes and grows. The environment is inspired by surrealism, particularly, the artwork by Giorgio de Chirico which features strange worlds and mysterious figures.

This project uses multiple layers (canvas's) that when layered, creates the full composition. Each layer has a specific focus, starting from the background and sky and building up from there to construct the sky kaleidoscope, figures, central shapes, then the multiple particles and particle 'growth'. The composition environment is randomly build on load, colour palette, star field, how many figures and thier position / size. Originally I wanted to have more dynamic environments built but the idea was simplified. I might come back and apply more complexity later.

The artwork has an animation cycle to it, there is a morning (fade in), day time portion and then finally a night (fade out). During the day the central triangle shape has a particle for each Humanoid. As the particle moves up through the triangle, the humanoid figure the particle is connected too begins to decay. The decay is then connected to the horizon line where similar particles grow up in the background. The humanoids continue to decay, replaced with growth on the horizon. Once the day is done, the night fades in and the composition resets.

Interactive Science Fiction Story

*Works on Desktop & Mobile.

A short interactive story about a ship lost in space. The user wakes up unaware of what’s happened, adrift in an unknown location. Learn whats happened by interacting with a ship to gain access to a locked door. Works on both mobile and desktop.

The project was design with a retro look and feel. Objects and environment are based on pixel art style.

Horror / Sci Fi Interactive Story

*Designed for Mobile.

Premise of this story is that you, the reader, has purchased a used phone that still has data from its original owner on it. This leads to a mystery of what happened to them based on the phones data. The reader has to parts to interact with, a Journal App (serves as the main reading and the mystery) and a 'detection' App that was built by the owner of the phone. Using both Apps reveals clues to what happened! Note, due to the location connections to the story, this story only works in Vancouver Canada. Meant for a mobile experince but work on desktop too (aside from geo location elements!)

This project had a few goals I wanted to explore, first I wanted to experiment with creating a Progressive Web App and how service workers function. Next I wanted to experiment with geo locations (Geolocation API) and get the user to actually go to physical locations to find clues based on what the journal was telling them. I wanted to explore how to get a user to want to explore a location to continue the story.

The final focus was to build a UI that resembled a 'phone' interface. When you load the story up, the UI environment resembles what a phone would look like with only 2 apps on it. Because of this I used Google's Material design as a guide to build out elements, layering, shadows etc. Basically it sort like a phone UI within your own phone's browser.

Canvas Wall Art Experiment

*Desktop only, designed to be projected.

An October themed piece of art, wanted to explore creating a canvas animation that would be projected across a wall. Ended up using a Kaleidoscope animation with some sound captured drawings. The Kaleidoscope JS was repurposed with the help of this codepen, https://codepen.io/enxaneta/pen/LbRqNX, check it out.

The animation is based on a 60s cycle, with two elements; a 'skull' image is selected from a list of images and used as the main centre kaleidoscope, along with the mic capturing continually or 2 secs of sound which is drawn for the background kaleidoscope art.

The environment also cycles from black to white within the 60s, depending on the environment tone, you get a different texture with the sound drawn layer. The animation slow down as the 60s cycle ends, once the time is up everything resets and the cycle begins again.

Generative Art

*Works on Desktop & Mobile.

The goal of this project too was to explore html 5 canvas and create some generative art in a browser setting. The design concept was to create an object (the art) by destroying another object (a photo). Fractal coding was repurposed from an online tutorial dealing with html canvas Franks Laboratory.

The artwork is made up of fractals that reproduce exponential until the entire image is consumed. The user starts the process by sampling a starting colour and then a place on the canvas for the artwork to being from.

After the artwork is generated the user can download the created artwork. Since the canvas being downloaded is the shape of the browser / device, the artwork makes for a good wallpaper for the device you generated the artwork on.

Horror Interactive Story

*Design for Desktop.

An interactive story told through accessibility tools and functionality. This short story explores how a story built with basic html structure could be told with using accessibility.

The interface uses 2 tools, keyboard focus and the new SpeechSynthesis (Web Speech API) to tell the story. The story is purposely hidden from the user, forcing them to navigation through the interface with keyboard focus and to listen to the text being read out. The story is structured using proper html tags, so the Web Speech API is not entirely necessary, screen readers should work as well but the story JS flow wouldn't work, you'd only hear the story.

With this experiment I also wanted to learn more about accessability (general and best practices) and how content and html structure impacts it.

Science Fiction Game

*Design for Desktop, does not work on Mobile.

To Drudge is a science fiction interactive story using html5 canvas game mechanics and read through text elements. Key goals of this project was to learn how and experiment with html 5 canvas and creating a basic game. Story is simple and not long.

The game style and design is set in a retro 80's DOS esque environment, where you the programmer needs to capture data for your company. Inspired by cyberpunk novels like Willam Gibsons Neuromancer.

NOTE, this game requires a keyboard and a Desktop platform. Sorry no mobile screens!

Sci Fi / Horror Interactive Story

*Design for Desktop, does not work on Mobile.

An interactive science fiction / horror story. As a Starship Captain, remember the past to determine what happened to your ship and crew! Design and environment was inspired but old 80's space games like Starflight.

Interactive Science Fiction Story

*Design for Desktop, does not work on Mobile.

A short, interactive science fiction story. Styled like an 1980s text based keyboard adventure, where you interact with an individual that needs your help. Also experimenting with the idea, that a user needs to open new tabs and search for answers on the internet.

*Desktop only requires a physical keyboard.

Puzzle Story

*Works on Desktop & Mobile.

A interactive story where the user is trapped in a maze and needs to solve a puzzle to escape. Dying is unavoidable but part of the story and how to work out the puzzle elements.

Built 2 prototype of this story, can check out the first prototype variation. The second build took the story in a different direction based on feedback from the first.

Story was inspired by the movie 'Cube'.

Interactive Horror Story

*Design for Desktop, does not work on Mobile.

A short, interactive horror story where you, as a lowly employee, are tasked to sort through emails, texts and logs to solve the mystery of a silent Observatory. Works on both mobile and desktop.

The project has sound elements, you can toggle off as they set the mood but are not entirely necessary to make it through the story.

Typographic story experiment

A typographic layout for the short story 'How the world was saved', by Stanislaw Lem. Experimented with CSS grid and typography, using the golden ratio to control type scaling.

CSS variables are used to control user contrast toggling. Grid was used to create a visual layout.

Science Fiction movie/animation

One of my two silent robotic movies made using my old cybershot camera. Basically the goal was to create a silent film type story with robot toys and cutouts. An older project but I had a lot of fun making them.

Science Fiction movie/animation

View movie