Brief Shader & Creative coding overview

Here’s a list of projects I’ve worked on that I haven’t had the time to document “properly” but still have some merit in being shared. Bare in mind most of what is in this section is either WIP, an experiment, or part of a game jam so the polish isn’t what you’d expect from a 100% completed project.

Glory

Glory Is a game I made as part of a game jam. One thing I really wanted to play with as part of the jam was using a 2d lighting effect I had seen before, as well as experimenting with Unity’s rendering pipeline to produce something that was “retro inspired” but not truly retro. The rendering system uses a fake constraint of one color per “block” of pixels, similar to how ASCII games work. There times when the rules get broken, like when an enemy is frozen by a power up they rotate at an odd angle that doesn’t make sense on retro hardware. I wanted a sort of “uncanny” note-quite right feeling, as the game itself is meant to be ‘spooky occult pac-man’.

Rendering happens in several passes in different screen buffers.
1. All white pixels are rendered, this includes the world and the player
2. Colored blocks of pixels are then rendered, if two collide with one another the most recent one takes precident
3. The 2d light effect is rendered

The screen buffers are then combined as follows
1. The 2d lighting is combined with the white pixel buffer, inverting any pixels it contacts
2. The tinted color buffer is then combined with anywhere in the source image that the lighting does not touch
3. A fullscreen “glitch” effect is applied to a varying degree based on events in the game, damage done, screen transitions, and when player lives are low

The lighting uses this algorithm:

https://www.redblobgames.com/articles/visibility/

Plant Growth / Wind Sway

This is a project I undertook to explore animating growing plants in Unity. It uses a combination of fragment shader based growth, vertex based animation, blend shapes, and rigged animation. It also uses a toon shader that supports emissive / rim lighting. It’s incomplete but I intend to pick it up once I have time again.

Mesh Particles and shader animation

An experiment in vertex animation using Unity’s particle system. Each butterfly is an independent particle that can have forces applied to it. Animation is done through a very cheap vertex shader which flaps the wings at a set frequency. Using this method hundreds of thousands of butterflies can be added to a scene cheaply. Future work is planned for breaking up the timing of the wing flaps as well as improving lighting to reduce flicker.

TrashBot Tango

For GGJ in 2020 I wanted to work exclusively in a tech artist role. A challenge we ran into early on was that our “kit bashed” environment had a very, very small source set of assets. To differentiate between piles of trash I wrote a shader that took an object’s world position and shifted the UVs around to pick a random artist-defined color. This means that in the above image the “5 sided dice” looking shape ends up having fewer repeated color combinations. This adds visual interest, but also helps with way-finding when a player is very close to a pile, which happens a lot as there is a first person climbing mechanic.

Reaction Diffusion Wall

Downstream has an awesome touchscreen video wall that I often felt was underutilized, I wrote an interactive in some downtime that used the Gray-scott chemical reaction model in a shader to generate novel interactions with user touch input. It can be seen in motion in the background of some videos downstream uses publicly here: https://youtu.be/HDevqZxPG2I?t=85

It cycles through preset black and white seed images and settings for the chemical reaction, generating a lot of different interactions, and users can draw on it, etc. It was meant as a tech demo, and was an attempt to get designers to bite on using it in an app at some point. It gets pulled up still several years later when students are visiting, or for more informal client visits.

Red Hat EBC Background Effect

This is an effect I wrote for an interactive at Red Hat's sales center. I feel like it's a good example of taking something commonly done (cellular automata) and doing something unique with it (adding multitouch interaction, expanding rules, interaction with UI elements). It's also a good example of the type of shader work I did most at Downstream-  where a client wants something cool but doesn't have any ideas in mind, final result has to be on brand, and can't steal the show from the meat of the experience.

The actual effect can be seen in the background of some of the images here, the ones further down the page are better. It admittedly doesn't photograph well because of how subtle it is.
https://www.isaacgoodfellow.com/red-hat-boston

A breakdown of the effect is here- with a hopefully running browser version of the basics (minus touch interaction / color grading / image overlay). The actual shader responds to user touch, UI elements moving across it, and is consistent across most displays and interactives in the space. I haven't had this public before because it doesn't work as well in some browsers, and wasn’t written for the web in the first place. If there is not a shader demo (in black and white) running, hit refresh a few times.

https://www.isaacgoodfellow.com/blog/2017/9/1/systems-gpgpu

A note on the below content: Unfortunately since this page was created instagram embeds have changed, but you should be able to click on the ‘broken’ images and get taken to an instagram video.