Joseph Gray

Portfolio

I'm a creative technologist and artist balancing commercial collaboration with independent practice — bringing clarity, form, and human-centered expression to complex ideas.

My work moves between design, technology, and contemporary art. I help studios and organizations create meaningful interactive experiences, while developing artworks that explore light, geometry, and transformation.

Across both practices, I approach projects with the same curiosity: turning complexity into something elegant, useful, and alive. Whether collaborating with creative teams or pursuing independent commissions, I bring a balance of technical fluency, conceptual depth, and visual clarity to each project.

Commercial Work Artworks

Artworks & Commissions

Outpost Basel

June 2015
Projection on architectural surface, custom code in Processing, 3 projectors, 3 CPUs, 3 depth cameras, cables, network.

Design Miami 2015 Basel, Switzerland.

In collaboration with Olson Kundig and Reilly Donovan.
abstraction, architecture, generative, installation, interactive, network, processing, projection mapping

Seattle based Architecture firm Olson Kundig invited Reilly Donovan and I to create an interactive, projection mapped installation within the VIP Collectors Lounge they produced for Design Miami/Basel 2015 in Basel, Switzerland. Design Miami is the sister fair of Art Basel focusing on primarily interior design, art jewelry and architecture, the exclusive lounge area serves as a resting spot for collectors attending the fair.

We arrived in Basel with a few pieces of code sketches and then worked in the environment itself for a week prior to the fair opening so that the piece could be optimized both aesthetically and technically to the temporary fabricated environment that Olson Kundig created. Before hand arrangements were made to install three projectors, driven by one CPU each, to cover three walls in the lounge to immerse visitors in generative light art. This system acted as the paint and plaster of an immersive generative mural.

Custom code written in Processing generated the brick pattern to precisely projection map the physical environment. A calibration mode brought up custom controls to set brick size and spacing in situ, along with four corner pin keystoning allowed us to accurately match the architectural surface.

Three depth cameras were also used to track general movement in the room. This tracking data was then used to subtly offset the brick mappings themselves, creating a sense, often out of the corner of one's eye, that the walls were breathing slightly.

Each brick was coded as a discrete object in our application, an individual brick's transparency was then governed by slightly offset LFOs, creating the cascading pattern. Additional horizontal lines constantly drifted upwards creating the gradient effect. Vertical and horizontal lines traced the surface, also coded as independent objects that controlled their own animation. The entire time scale was slowed to an architectural pace, to create a relaxing, conversational and pensive environment.

Outpost Basel image 1
Outpost Basel image 2
Outpost Basel image 3
Outpost Basel image 4
Outpost Basel image 5

Frisson

June 2019
Custom Software, dimensions variable, duration infinite.

Premiered at Fremont Studios, Seattle.

A generative art piece written in Processing and GLSL. This piece was premiered at Fremont Studios for the Wunderman/Thompson merger launch party on the Studios' giant projection wall as an ever evolving backdrop and mood setter for the duration of the event.

The piece uses randomness, simplex noise and low frequency oscillators with heavy use of custom coded vertex and fragment shaders written in GLSL. The work can be rendered at any size or duration.

Creative director Jared Lovejoy of Tashkent Park Creative contacted me to provide visuals for this party. Notably Grandmaster Flash did a set at this party.

Frisson image 1
Frisson image 2
Frisson image 3
Frisson image 4
Frisson image 5

Angry Fruit Salad

July 2010
Joseph Gray (software) & Keith Tilford (sculpture).

Materials: Foam core, adhesive, acrylic paint, gesso, spackle, fasteners, digital projector, IR web cam, computer, cables & custom software written in Processing.

Exhibited in ACTION! at Ghost Gallery, Seattle 2010. Curated by Cait Willis & Laurie Kearney.

Photo credit: Gabriel C. Herbertson
installation, interactive, projection mapping, sculpture

Reductivism, Schwitters, formalization, Lobachevsky, Euclid's parallel postulate, new geometries; that the consistency of an axiomatic system cannot be proven within that system. Gödel. Endless endlessness. Cantor. Pure indifferent multiplicity. void setup( ){actual = new Actual(virtual);} 'Post-contemporary' bricolage. Differentiation. Dialectics and diametric oppositions. Histories instead of History (Badiou). Entropy, Brownian motion, the clinamen, Meillassoux's 'hyper-chaos'. Machines. Non-organic life. Contingency and incompleteness, the passage of idea and concept through form. Glitch, crunchy fuzz.

Complexity Theory, Vitalism, Kool-Aid, Tang, Consciousness, the Brain and Commodore 64. Litanies. Realist Ontologies. Speculative metaphysics, materialisms and topologies. The scientific color pallet. Interactive technologies, open-source software, isomorphisms, new forms of life and forms of thought. New politics. Ideas of the commons. Diaspora: impossible, coming, interoperable. Try again, fail again, fail better (Beckett). Undecidable propositions. Art and philosophy and moving trains. Also, Quaternions and involution. K holes and Halo. New Rave and aging detritus. Noise. Wii rhetoric and Agambenian inflections. Gaming. The dice throw.

Angry Fruit Salad image 1
Angry Fruit Salad image 2
Angry Fruit Salad image 3
Angry Fruit Salad image 4
Angry Fruit Salad image 5

Crystalline Chlorophyll

September 2009
Paper, acrylic gesso, PVA, foamcore, two video projectors, two computers, two IR web cams, custom software in Processing. Dimesions variable.

Exhibited in Kerfuffle at Bumbershoot 2009, Seattle. Curated by Lele Barnett and Chris Weber.
abstraction, installation, interactive, projection mapping, sculpture

Crystalline Chlorophyll is an interactive digital sculpture. Its surface starts as an icy-crystalline shimmering and is slowly overcome by a verdant-green growth of texture during the course of the exhibition based on the movement of the visitors observing it. By tracking movement in the room it randomly adds a bit of green to the surface using generative pseudo-organic image algorithms. When the sculpture is left alone for a while the mossy layer decays revealing the crystal-like surface again, waiting for the next group of visitors.

The physical sculpture is built from a 3D virtual model using cutouts from it's flattened triangles printed on 11X17″ card stock. The surface of the sculpture is painted with white gesso. The original object was designed in Blender, it's facets were unfolded using the “unfold” python script. The unfolded meshes are then exported as .svg UV maps. More information on the technique of going from 3D model to papercraft can be found in this tutorial.

Two ceiling mounted video projectors project from opposite sides onto the sculptural surface. The images are corrected for distortion by mapping textures to a 3D model of the real-world object, utilizing techniques also found in video game technology.

The work's software was written in the Processing programming language. The software loads a 3D model of the sculpture, made in Blender, and allows for manual rotation, scaling and positioning of the object so that it can be aligned to the real world object. When the two models align the physical version has a projection-mapped surface that can be treated as though it were a 3D software texture-map. The software generates a real-time texture on the object's surface using camera tracking to seed random image generation. Virtual lighting completes the effect.

Camera tracking is done with a simple difference algorithm. Each channel (RGB) of each pixel of the camera image is tracked for the amonut of change from the previous frame. If the number is above a certain threshold a random number is generated to determine if the associated pixel in the real-time texture map should change. A height map generated in Blender partially determines the probability of a pixel changing from the static “ice-crystal” texture to a “mossy” one. Other influences are neighboring pixels values and the amount of change in the camera pixel.

Crystalline Chlorophyll image 1
Crystalline Chlorophyll image 2
Crystalline Chlorophyll image 3
Crystalline Chlorophyll image 4
Crystalline Chlorophyll image 5

Cube Etude 2.0

February 2014
In collaboration with Reilly Donovan.

Wood cube painted with gesso, two projectors, one CPU, Blender, BLAM plugin.
formalism, projection mapping, sculpture
Continuing the fine 21st century tradition of projecting a virtual cube onto an actual cube to align them into a physical simulacra. This time using BLAM for Blender 3D. Made during a generous residency provided by Cornish College of the Arts as part of the newly formed Institute of Emergent Technology + Intermedia
Cube Etude 2.0 image 1
Cube Etude 2.0 image 2
Cube Etude 2.0 image 3
Cube Etude 2.0 image 4
Cube Etude 2.0 image 5

Cube Etude 1.0

May 2008
Particle Board, acrylic gesso, two video projectors, two computers, web cam, software patch in Quartz Composer. Dimesions variable.

Exhibited in OBVious at 911 Media Arts Center, Seattle. Curated by Steven Vroom.
formalism, generative, projection mapping, sculpture

A simple cube one foot square on each side with one corner cut so that it can stand on end. Moving imagery is projected on all 6 surfaces of the cube. The projected image is a 3D real-time generatively texture-mapped cube.

In occular perspective things farther away appear smaller. Images projected on irregular surfaces will distort, with the portions farther away from the projection source being larger than those closer. An image of an object rendered in the correct perspective when projected on a real object of the same proportions will automatically correct for the projected distortion. The cube demonstrates this phenomenon.

Projected on the surface of the cube are a checkerboard patterns on three faces and a live camera feed on the other three. The checkerboard patterns change density over time, being governed by LFO chains to create a seemingly random and continuous timing. The live camera feed is aimed directly at the cube creating visual feedback and allowing the viewer to interact with the medium.

The work is also a conceptual abstraction commenting on the human obsession with ninety degree angles. It also exists partially to blur the boundaries between the virtual and the real; and to demonstrate the virtual becoming real (i.e. a virtual texture-mapped cube becoming a real texture-mapped cube).

Cube Etude 1.0 image 1
Cube Etude 1.0 image 2
Cube Etude 1.0 image 3
Cube Etude 1.0 image 4
Cube Etude 1.0 image 5

Culturevirus Photo Booth

July 2012
In collaboration with Brent Watanabe during our tenure at Superfad, fabrication by Metrix:Create Space.

Custom video arcade console with custom software and network feeds.

Exhibited at Unicorn/Narwhal in Seattle for Capitol Hill Block Party 2012.

Curated by artist Cait Willis and Ghost Gallery gallerist Laurie Kearney.
code, interactive, network, sculpture

An arcade console that finds your face and puts someone else's face on it, then makes an animated GIF and uploads it to Tumblr.

The console has no hands-on controls or instructions, rather it uses a webcam embedded above the screen to recognize faces. Faces are then captured and stored in a database. On occasion it sees things as being faces that are not actually faces. Previously saved faces are then randomly selected and placed on the current viewers faces. Additionally a set of venue specific iconography is added to the viewers likeness. In the case of the CHPB version these included sparkly unicorn horns and fancy top hats.

The console was designed in Adobe Illustrator and cut on a CNC router and etched with a laser cutter. Electronics include a CRT monitor, mini CPU and webcam. Software was written in processing using a combination of video, OpenCV, GIF and network libraries.

Culturevirus Photo Booth image 1
Culturevirus Photo Booth image 2
Culturevirus Photo Booth image 3
Culturevirus Photo Booth image 4
Culturevirus Photo Booth image 5

Daughters of Air

June 2010
Visuals and sculptural sets: two projectors, two computers, smart phones and custom software, tulle fabric, wire and fasteners.

Concept and Composition with Kelli Frances Corrado and Ivory Smith.

Presented at On The Boards as part of the Northwest New Works festival 2010.
generative, live projection, new music, performance, set design

The Daughters of Air is a musical-visual performance evoking fairytales under the sea. The aqueous world is formed with sound, light, costume and sculpture. Non-traditional vocals, utilizing electronic audio effects, create the ethereal narrative sound score. Visualists paint with light, using digital projection, on an environment of organic costume and set pieces.

Daughters of Air is inspired by the notion of “mermaid heaven” a concept that appears in Hans Christian Anderson's original ending to his fairy tale The Little Mermaid. In his vision mermaids, being non-human, do not have a soul, turning to sea foam when they die. The central character in his story does a deed of such unselfish goodness and is so true to her own conviction that she transcends her soullessness gaining eternal life in, presumably, a mermaid heaven.

Music composed for this work by Kelli Frances Corrado and Ivory Smith utilizes live and pre-recorded sounds: effected vocal scores, songs, live sampling, electronic instruments and percussion, and samples from the Antarctic ocean. Samples of natural aquatic sounds, eliciting an otherworldly effect, are processed in the studio and additionally modified live in the performance.

Visuals for this performance are generated live with custom software written in the Processing programming language by Joseph Gray, leaning heavily on the MSAFluid Library. The controller used is the MSARemote, a multi-touch OSC controller for iPhone. Both MSAFluid and MSARemote are the creations of Memo Akten (memo.tv) Two visual performers control the light of two separate projectors whose imagery combine on translucent set pieces visual performers control the light of two separate projectors whose imagery combine on translucent set pieces and costume.

Sponsors:
Initial project funding was provided by On The Boards as part of the festival. Additional support for sets and visuals development was provided by 911 Media Arts Center 911media.org with funds from the Andy Warhol Foundation for the Visual Arts warholfoundation.org

Daughters of Air image 1
Daughters of Air image 2
Daughters of Air image 3
Daughters of Air image 4

Geo Chroma

September 2016
Custom software, Fisheye Camera, CPU, Video Wall.

Installed at Progenics, One World Trade, NYC

Geo Chroma is an interactive video wall installed in the lobby of Progenics offices at One World Trade in New York, NY. The piece was commissioned by NBBJ Architects and produced by Samuel Stubblefield, a principal at the firm whose group focuses on environmental design.

The piece uses motion tracking of passerby to generate colorful three dimensional geometry that rises and fades over time. Colors and lighting in the piece are modified by the time of day and year, making the work an ever changing response to both its immediate interior environment and the exterior conditions of seasons and hours.

Geo Chroma image 1
Geo Chroma image 2
Geo Chroma image 3
Geo Chroma image 4

Infinite Sunset

July 2014
Custom software in Processing, HTML5 Canvas.

Runner up in Google's DevArt Competition 2014.
abstraction, canvas, data analytics, generative, html5, processing

A net art piece depicting the sun infinitely setting into an oceanic horizon. Color palettes are pulled from images found via Google's image search feature. This piece was a runner up in Google's DevArt Competition.

The piece was formerly hosted at http://infinite-sunset.com but is now only a code repository on GitHub: https://github.com/grauwald/Infinite-Sunset

Infinite Sunset image 1
Infinite Sunset image 2
Infinite Sunset image 3

Light_Paper_Sound

February 2006
Joseph Gray (sculpture/video) and Gabriel Herbertson (audio) with original music by Beth Fleenor (clarinet) and Paris Hurley (violin).

Hand-cut paper, string, fasteners, 3 digital projectors, 3 computers, 6 speakers, custom Flash application "aXiMaL". Dimesions variable (room sized).

Exhibited at 911 Media Arts Center, Seattle, February-March 2006. Self-Curated.
generative, new music, projection mapping, sculpture

This exhibition is an installation using randomly cross-faded digital drawings projected on sculptural paper surfaces synced with randomized audio tracks played on six speakers. The overall effect creates a unique environment of dynamic color and sound.

Light_Paper_Sound image 1
Light_Paper_Sound image 2
Light_Paper_Sound image 3
Light_Paper_Sound image 4
Light_Paper_Sound image 5

MapSculpt

September 2011
Laser-cut acrylic sheet, spandex (pearlized surface), thread, video projector, computer, custom software in Processing. Dimesions variable.

Exhibited at Cornish College of the Arts Main Gallery, Seattle, 2011. Curated by Cable Griffith.
generative, installation, projection mapping, sculpture

mapSculpt is a digital projection-mapped, bas-relief, landscape painting. The physical sculpture is constructed of spandex with a projection screen coating sewn to laser-cut acrylic supports. A ceiling mounted digital projector casts the image of a landscape with the same proportions as the sculpture. The combination of the real world object and virtual model align, physically, to be perceived as a single construct.

The design of mapSculpt utilizes the technique of height-mapping which is found primarily in 3D video games. Height-mapping translates a flat 2D grayscale image into a 3D mesh where the height of each vertex in the mesh is determined by the brightness of the corresponding pixel in the 2D image. Both the physical and virtual components of mapSculpt use a 16x9 pixel image as their blueprint. As a result there are 144 acrylic supports and 144 corresponding vertices in the 3D mesh.

The virtual image is texture-mapped with a perlin noise algorithm modified by the original height map and colored with a woodland palette. There is cutoff, also based on the height map, that determines if a pixel will be rendered with the yellows and sepias found in some pastures as opposed to being set to the color range of a dense forest seen from above. This image is much higher resolution lending a more visually complex surface variation to the low polygon model it is textured onto. A virtual water line is created using undulating translucent planes. Passing virtual lights mimicing a sun and moon rotate around the 3D model.

A suite of custom software is used to both construct and present the piece. This allows for a near infinite variation (improvements) on the same theme and technique. This software is written by the artist using the Processing programming language. This sculpture can be stored in a small box and transported, then set up again with different hardware. Because the software is written in Processing it is also easily portable. The software suite also includes a tool to create the laser paths for fabrication, and the tool for creating the image file and is therefore completely “stand-alone” in terms of creating new variations of the artwork.

MapSculpt image 1
MapSculpt image 2
MapSculpt image 3
MapSculpt image 4
MapSculpt image 5

Night Rider

December 2008
24 dual head tripod halogen worklights, theater lighting gels, 6 DMX dimmer packs, 6 DMX cables, programmable DMX controller, several hundered feet of power cables, a hundered or so cable ties. Dimesions variable.

Elements Too Building, Bellevue, Washington. Curated by Van Diep.

Technical and Fabrication Support: Joel Cain, Michael Foltz, Randy Moss, Christopher Overstreet, Rebekah Slavin.

Community Support: Abigail Guay and Laura O'Quin of Open Satellite. Steven Vroom and Ian Harrison of 911 Media Arts Center.
architecture, electronics, light sculpture

24 industrial work lights are hooked up to 6 DMX lighting control dimmer packs. The lights are arranged across the entire floor of a downtown Bellevue Washington construction site. A stand-alone DMX controller is sending an oscillating wave of light fade commands, creating an undulating stripe of light flowing across the width of the building.

This work was a commision from Su Development and the Elements Too building to celebrate the holiday season and enliven the Bellevue skyline during the darkest month of the year. Additional support came from Open Satellite and 911 Media Arts Center.

Night Rider image 1

NYC4ft3rm4th

November 2007
Two video projectors, two computers, concrete blocks, scrap wood, wire, plexiglass, styrofoam, custom patch in Quartz Composer. Dimensions variable.

Exhibited at the TK Building, Studio G, Seattle, 2007.
assemblage, new rave, projection mapping

A hastily created installation furthering the study of video projection augmenting sculptural surfaces. A random collection of used building materials is fashioned into a generic portrait of a city skyline. Bright colors and patterns flash on the various surfaces governed by a series of LFOs.

The piece was inspired after the artists first trip to NYC (and the East Coast US as a whole), and a series of visits to various other N. American cities. The modern skyline is fairly consistent across these cities, begging the question “what is the difference between them in a post-contemporary, communications overloaded, age?”

Seems to mostly be a difference in weather, though in modern travel it is possible to not leave a climate controlled environment whilst globe trotting. Going from the condo, to the taxi, to the airport, to the airplane, to the hotel, to the conference center, to the mall and back again.

The work is also inspired by the New Rave movement that was being carefully constructed as the next “big thing”, primarily in London, NYC and Tokyo. New Rave is a conglomerate of former popular styles, and in a very self-conscious way. It is by definition not meant to be taken seriously. New Rave could be considered a deeply pop-educated extension of rave culture, punk rock and hip-hop. It's distinguishing characteristic is sound and colors that immediately barrage the senses; chiaroscuro on growth hormones.

NYC4ft3rm4th image 1
NYC4ft3rm4th image 2
NYC4ft3rm4th image 3
NYC4ft3rm4th image 4
NYC4ft3rm4th image 5

S34sc4p3

February 2010
Paper, PVA, fishing hooks, wire, video projector, computer, IR web cam, custom software in Processing. Dimesions variable.

Exhibited at the Seattle Art Museum Gallery, Seattle, 2010. Curated by Barbara Shaiman.
interactive, projection mapping, sculpture

S34sc4p3 is a multi-media interactive installation that tracks movement outside of the gallery that controls generative wave animations projected onto the sculptural surface suspended in the gallery window. The piece is best observed at night. The custom software was written in the Processing language, a code format designed for artistic applications.

S34sc4p3 image 1
S34sc4p3 image 2
S34sc4p3 image 3

Light_Paper_Noise

March 2007
Paper, string, microphone, video projector, computer, software patch in Quartz Composer. Dimesions variable.

Exhibited in Paperwork at Unit B Gallery, San Antonio, Texas. Curated by Catherine Walworth.
generative, interactive, sculpture

Light_Paper_Noise is similar to the previous work Light_Paper_Sound, except rather than generating new mixes of audio from recordings, it listens to the ambient sound of the room to affect the real-time animation projected on the paper surface.

The piece was created entirely in the gallery within a few days time. Catherine Walworth curated the group exhibition of paper based works entitled Paperwork which also included artists Rhonda Kuhlman (San Antonio, TX), Sachi Komai (Madison, WI) and Michael Velliquette (Madison, WI/San Antonio, TX).

The images in the photographs show how the piece appeared during daylight hours.

Light_Paper_Noise image 1
Light_Paper_Noise image 2
Light_Paper_Noise image 3
Light_Paper_Noise image 4

Schroedinbug Descending a Staircase

July 2011
Keith Tilford (sculpture) & Joseph Gray (software).

Projection-mapped interactive sculpture: hand-cut acrylic and acetate sheet with acrylic paint. Custom software written in Processing running on two computers, two digital projectors, two IR webcams. Wall mounted approx. 8'w x 4'h x 2'd.

Exhibited at Ghost Gallery, Seattle, 2011. Curated by Laurie Kearney.

Documentation photography and videography by Gabriel C. Herbertson.
installation, interactive, projection mapping, sculpture
Schroedinbug Descending a Staircase image 1
Schroedinbug Descending a Staircase image 2
Schroedinbug Descending a Staircase image 3
Schroedinbug Descending a Staircase image 4
Schroedinbug Descending a Staircase image 5

Design Collaborations

29Rooms 2016

September 2016
In collaboration with Reilly Donovan for Refinery29 and Fossil Watches.

Interactive video wall installation using depth camera tracking and generative animation.
advertising, fashion, generative, interactive, processing

Refinery29 commissioned Reilly Donovan and myself to create an interactive video wall for their 2016 fashion week event 29Rooms. We created a custom coded platform integrating designs from Refinery29's creative team, with custom generative animation. The visual style was in support of Fossil Watches Q line, the room's sponsor. The software, dubbed “29Mirrors”, tracked visitors to the room outlines using a depth camera and filled them with colorful animations against various backdrops.

Over the course of the weekend event thousands of visitors played with the installation and posted hundreds of photos and videos to social media of their virtual silhouetted selves.

29Rooms 2016 image 1
29Rooms 2016 image 2
29Rooms 2016 image 3
29Rooms 2016 image 4
29Rooms 2016 image 5

Biologistex UX/UI refresh

June 2017
UI/UX designs
Client: Biologistex
design, illustrator, ui, ux

Biologistex is a medical shipping company who creates IoT enabled cold storage shipping containers. They engaged me in late 2016 and early 2017 to redesign their online shipping application, both in terms of user flow and interface design.

The process began as a high level analysis of their existing app and an audit of all of it's functionality. This audit produced a functional outline that hadn't existed as the previous UI was created organically as the product was being developed. Using the outline as a guide wireframes were then developed and once approved given a refreshed design polish. Google's Material Design language was used as it lent itself naturally to the functional needs of the app.

The Biologistex containers are tracked with an app designed primarily for tablets and desktop computers and provides location and various sensor data, along with the ability to create and manage shipments. Because the contents are bio materials the app needs to show what the internal and external environment is at fairly regular intervals and send alerts when the sensors detect that conditions have gone out of range. These created certain challenges on how to intuitively present the combination of shipments and individual device data. The resulting high level comps of the suggested redesign is shown in the slides above.

Biologistex UX/UI refresh image 1
Biologistex UX/UI refresh image 2
Biologistex UX/UI refresh image 3
Biologistex UX/UI refresh image 4
Biologistex UX/UI refresh image 5

Garden of Health

April 2019
Client: Adventist Health
Agency: Schema Design
Role: Creative Technologist
data visualization, generative, installation, medical, three.js, web app, webgl

Adventist Health is a California based medical provider focused on preventive medicine as a core part of it's practice. Schema Design was commissioned to create a data visualization for their Roseville HQ lobby utilizing near real-time patient interactions with the health network across physical sites.

This project was my first collaboration with the Schema Design studio, who brought me in midway through the project to provide both creative and technical support. By the time that I arrived into the project the concept of a garden of flowers filled with butterflies had been approved by the client. The flowers represented patients currently receiving care within the health network and butterflies represented healthcare providers working with these patients.

Creative director Sergei Larionov and technical director Jeff MacInnes had made significant headway with the concept, data wrangling, and an overall development framework based on three.js. The data wrangling, which was complete by the time I joined the project, was particularly complex as the personally sensitive patient data had to be anonymized and offset before it could be shared via a secure API.

My contribution to the piece began with the client not being completely satisfied with the initial design direction. After becoming familiar with their feedback I recommended we take classical still life painting as a visual reference, particularly baroque era paintings of flower arrangements. This visual direction was brought to the client and was approved.

To achieve this look we created a flower designing web app just for this project that allowed adjustments of parameters to create unique, fantastical, breeds of flowers. These flowers used GLSL shaders to both modify their coloring and shape. These custom shaders were built from scratch to elicit the aesthetics of still life paintings, including a custom lighting shader to give them a dramatic chiaroscuro effect. Additional animation effects, like wind and changes in time of day, were also generated using shaders.

Garden of Health image 1
Garden of Health image 2
Garden of Health image 3
Garden of Health image 4
Garden of Health image 5

Grindline Skateparks

September 2014
Client: Grindline Skateparks
Role: Lead Designer & Developer
css3, google maps api, html5, javascript, wordpress

A refresh for Grindline Skateparks, a top rated designer and builder of custom concrete skateparks for civic and private clients based in Seattle's Duwamish River area. I was honored to be able to create their new site, focusing particularly on designing an interface for skaters to find their parks and for civil engineers to learn about Grindline's professional qualifications.

Grindline Skateparks image 1
Grindline Skateparks image 2
Grindline Skateparks image 3

HBOD 2015 Video Wall

June 2015
Client: Refinery29
Collaborator: Reilly Donovan
Role: Creative Technologist
Media: Interactive installation with depth camera tracking and generative animation.

Her Brain on Digital (HBOD) is an annual industry event hosted by fashion influencer Refinery29 where leaders from major brands attend to gain insights into the latest in digital marketing techniques. Reilly Donovan and I (under the moniker Glymmer) were brought on board in 2015 to create a 96 foot long interactive video wall developed in coordination with R29's design team, collaborating remotely between Seattle and NYC. The piece was installed in less than 24 hours at Industria Superstudios in NYC for the one night only event. A smaller two screen version of the wall also travelled to the HBOD 2015 event in Los Angeles where it was installed by Benjamin Van Citters and Brandon Aleson.

The NYC version used eleven HD screens scattered up the entry ramp along one side. Eight Microsoft Kinects tracked attendees movement as they entered, and later left, the event triggering videos and quotes as they passed by. Subtle background graphics shifted in response to the general flow of foot traffic.

Each display was powered by it's own CPU networked together to sync graphics across screens. Schematics, install logistics and custom software (written in Processing) were developed in the month and a half prior to the event.

Audience, and client, response to the entry was overwhelmingly positive.

HBOD 2015 Video Wall image 1
HBOD 2015 Video Wall image 2
HBOD 2015 Video Wall image 3
HBOD 2015 Video Wall image 4
HBOD 2015 Video Wall image 5

Microsoft: Focus/Forests

March 2020
Client: Microsoft
Agency: Schema Design
Role: Creative Technologist
css3, data visualization, gis, javascript, mapbox, python

Microsoft commissioned this piece to showcase their AI cloud computing capabilities. Using Silvia Terra's (now NCX) vast data set of forest composition across the continental US, the site doubles as a story about the effects, and improvements, we, as humans, can have on our beloved forests.

This is one of the first projects I collaborated on with data visualisation studio Schema Design, working with fellow creative technologist Caprice Carstensen starting with a brief on the story they wanted to tell, wrangling insanely large forestry datasets with help from then technology director Jeff MacInnes, concepting an interactive map-based UX and engaging scroll based UI, and implementing the whole thing with polished fit and finish using cleaned up static designs from art director Jeff Paletta.

We used a combination of custom MapBox layers with bespoke PNG renderings of the large datasets that were wrangled and exported using Python. These PNG files were then hand finished in Photoshop to give a painterly blending between various levels of basemap resolutions as the user zooms in and out of forests and explores the data story. 3d charts aligned to maps of each showcased forest region providing a visceral view of the risks these forests face. All of this was wrapped in a responsive scrolly-telling environment for a smooth user experience.

Microsoft: Focus/Forests image 1
Microsoft: Focus/Forests image 2
Microsoft: Focus/Forests image 3
Microsoft: Focus/Forests image 4
Microsoft: Focus/Forests image 5

PacSci Data Exhibit

January 2020
Client: Pacific Science Center
Agency: Schema Design
Role: Lead Creative Technologist
data visualization, education, installation, interactive, museum, processing, projection mapping

The Pacific Science Center (PacSci) in Seattle commissioned Schema Design to concept, design and produce an exhibit to teach what data is, on the most fundamental levels, to young folks visiting the museum, and to explore what the outcomes of sharing individual data can be.

I was brought in later in the design/ideation phase and helped steer the overall vision and concept after a few initial drafts weren't sticking with the client. Working with designer Dwayne Franco and content strategist (and artist) Eryn Kendig we developed an experience model around whimsical questions about participants' opinions of specifically Pacific Northwest concerns, such as whether the Sasquatch is real or not along with a few personal, non-identifying, demographics requests.

This was then combined with a highly abstracted design system of particles whose aspects represented each opinion from the survey. For instance, if a participant preferred sun over rain their particle would have a warm color gradient, while those who profess belief in Sasquatch would get a “hairy” outline treatment to their particle. Once a survey was complete participants could optionally share their particle to a larger projection screen where it joined others to be sorted by various cross-references of demographic and opinion data from the survey.

Along with exhibit designers at PacSci I worked on general layout of physical screens, hardware selection and infrastructure, and general UX and UI. PacSci provided the physical and interior design from their internal team, riffing off of the design system we created at Schema.

Once the core creative was approved Dwayne Franco created polished layouts based on rough comps and user flows I created. Creative director Sergei Larionov provided final design guidance and on-site fit-and-finish to the digital aspects of the interactive during final installation with things like typography updates and layout adjustments to make everything feel right in the actual physical environment.

I led software development, along with technical infrastructure and digital install, with the help of developer Anna Peng and tech wizard Jeff MacInnes. As is often the case with fairly complex on-site interactive installations some of the software development was done literally in the exhibit space so we could tailor everything to be as natural feeling as possible to our audience of enthusiastic young data scientists.

PacSci Data Exhibit image 1
PacSci Data Exhibit image 2
PacSci Data Exhibit image 3
PacSci Data Exhibit image 4

Ripple Effect

March 2015
Client: Microsoft OneNote
Agency: Possible
Collaborator: Reilly Donovan
Role: Creative Technologist
Media: Generative floor projection installation using Twitter API and Processing.
generative, installation, interactive, processing

Interactive agency Possible commissioned Reilly Donovan and myself to create a generative floor projection to enrich the onsite experience of an event thrown by Microsoft OneNote at Pennsylvania State University for their Collective Project series. The theme of the event, ripple effect, was based on a quote from student Neha Gupta whom the event honored: “It is our time to be the igniters of change. Find a cause that touches your heart. Convert your empathy into action and let those actions ripple out.” Neha is a champion of access to education for orphans in her home country of India and worldwide.

To give a unique energy to the environment where the event was held we created and installed a custom piece of software projected on the floor throughout the space. Whenever a post on Twitter was detected with the hashtag “#rippleeffect” or “#collectiveproject” an animated ripple would spread out from a random location on the floor. The entire piece was concepted, approved by the client and executed in less than three weeks.

Ripple Effect image 1
Ripple Effect image 2
Ripple Effect image 3
Ripple Effect image 4

Wrong Lobby

March 2017
Client: Wongdoody
Collaborators: Wongdoody Creative Team
Role: Creative Technologist
Media: Interactive installation using depth camera tracking and generative animation.
advertising, generative, installation, interactive, processing

Wrong Lobby is an interactive installation in the lobby of the Wongdoody Seattle HQ, commissioned as a collaboration with members of Wongdoody's creative team.

Wrong Lobby image 1
Wrong Lobby image 2
Wrong Lobby image 3
Wrong Lobby image 4
Wrong Lobby image 5

Technology Collaborations

SuttonBeresCuller: Pan Optos

October 2010
Concept and Artists: SuttonBeresCuller.

Media: Large scale robot, camera, artist curated exhibit, wi-fi devices, computer, flat screen, joystick, Arduinos, Internet, Flickr.

Mechanical Engineering: Paul Shemeta.
Electronics and Code: Joseph Gray.
Electronics, Code and Technical Review: Chuck Harrison.
Electronics, Camera and Network: Matt Westervelt.

Exhibited as part of Vortexhibition Polyphonica at The Henry Gallery, Seattle 2010-2011. Curated by Sara Krajewski.
arduino, electronics, flickr api, installation, network, processing

Panoptos is a giant, room-sized, robot that allows the viewing of a gallery exhibition by driving a remote camera around with a joystick while looking at an HD screen. The camera is positioned close to the artwork giving a unique, displaced, experience of an art collection that would be rarely seen otherwise. The joystick control is coupled with a shiny red button that when pressed takes the current image being viewed by the robot and uploads it to it's own Flickr stream.

SuttonBeresCuller hired me to consult with them on the technical aspects of this project during its earlier development. I designed the majority of the overall electronics system and wrote all of the software that runs the exhibition. Matt Westervelt of Metrix Create Space also worked with the team closely through out the entire process providing technical logistics and ideas. Matt also setup the wireless network and got the camera stream to look pretty. Paul Shemeta, an industrial design veteran at Boeing, drew up the schematics for the mechanics and structure of the robot from the artist's original concept renderings. Chuck Harrison, a robotics designer and MIT alum, provided support and technical review of the code and electronics.

Technical Overview
The robot motor logic was run on a standard Arduino with a WiFi shield that connected to a remote computer running an Apache server. The robot retrieved motor instructions via HTTP from a plain text file containing motor speeds multiple times a second. The text file was updated by a Processing sketch that listened to a second Arduino attached to a ruggedized joystick (salvaged from a giant crane) that gallery patrons could use.

Moving the joystick changed the numbers in the text file which was then read by the robot and used to set motor speeds for both the x and y axis. The two 24V motors were driven by a Sabertooth 2X25 dual motor driver which received instructions from the WiFi enabled Arduino on board the robot via software serial. The Arduino WiFi Shield library was modified to increase the clock speed enough to make communications capable of parsing real-time control data streams multiple times a second.

An Axis IP camera sat on the y-axis chassis feeding it's stream via ethernet to an Ubiquity wireless router sitting adjacent to it on the chassis. The stream was then relayed via local area network to the computer attached to the joystick Arduino. The stream was played using VLC on a large HD flatscreen positioned in front of the joystick, thereby creating the round-trip visual feedback of the joystick control.

The final element was a red button beside the joystick that uploaded the current still image from the camera to the Panoptos Flickr stream. This button was connected to the same Arduino as the joystick. The same Processing sketch that handled motor control data from the joystick also created an FTP connection to a remote server host and uploaded the still image capture to a folder there. The software then made an HTTP request to a PHP script on the remote server that uploaded the image to Flickr using their API and added the image to the Panoptos collection.

SuttonBeresCuller: Pan Optos image 1
SuttonBeresCuller: Pan Optos image 2
SuttonBeresCuller: Pan Optos image 3
SuttonBeresCuller: Pan Optos image 4
SuttonBeresCuller: Pan Optos image 5

Processing and Arduino in Tandem

August 2010
Course author and teaching: Joseph Gray.
Producer: Elisabeth Robson.
Video Production: Creative Live.
arduino, education, online video course, processing

An online course created for O'Reilly media on learning coding for creatives with Processing and a simple method for diving in to integrating Arduino. Course page: https://www.oreilly.com/videos/processing-and-arduino/9781449399832/

Processing and Arduino in Tandem image 1

projBox 1.0

May 2010
Designer: Joseph Gray.
Fab Lab: Metrix Create Space.
Advisor: Matt Westervelt.
arduino, craft manufacturing, electronics, laser cut

The projBox is an open hardware project enclosure for prototyping with a standard electronics protoboard and an Arduino. This project was created originally as a supplementary toolkit for the course Processing and Arduino in Tandem.

It is designed for projects that use an Arduino as a physical interface for software running on a separate computer.

The lid is removable and has holes for attaching components like switches and knobs. Ports in the end of the box allow access to both the USB and power jack of the Arduino.

The entire box can be constructed from laser-cut 1/8″ thick baltic birch plywood, which is a sturdy but easily tool-able material for drilling additional holes or adding other modifications. The schematics for creating/modifying a projBox enclosure are freely available on the templates page in a variety of vector formats.

projBox 1.0 image 1
projBox 1.0 image 2
projBox 1.0 image 3

Gary Hill: Writing Corpora

February 2012
Artist: Gary Hill.
Production: Reilly Donovan & Joseph Gray.
Exhibition: Active Presence - Action, Object and Public.
Venue: Museo MARCO, Vigo, Galicia (Spain).
Curators: Sergio Edelsztein and Kathleen Forde
installation, interactive, kinect, performance, processing, projection, sound

When first getting hired on at Süperfad I created a set of custom software for media artist Gary Hill's 2012 work Writing Corpora. The new work was created for the international group exhibition Active Presence: Action, Object and Public, which debuted at the Museo MARCO in Vigo, Galacia (Spain) during February of this year. The exhibition, curated by Sergio Edelsztein and Kathleen Forde, focused on artists whose practice contains both performance and installation elements.

The overall gist of Writing Corpora, without paraphrasing the artist too much, is physical gestures triggering text, video and audio relating to idiomatic phrases that refer to the human body (i.e. “put your foot in your mouth”), in both English and, in this version, Galician (the native tongue in Vigo). The piece is a continuation of the artist's conceptual work focused on the convergence of body and language utilizing our current era's ever evolving new technologies for self-expression.

For this project Süperfad provided technical support and code development, creating a software framework that allowed the artist to play back media elements throughout the gallery space with no physical controller other than the performers movements. The result is a full-featured toolkit that can trigger any audio and/or video media with practically any body pose or gesture.

Gary Hill: Writing Corpora image 1
Gary Hill: Writing Corpora image 2
Gary Hill: Writing Corpora image 3
Gary Hill: Writing Corpora image 4
Gary Hill: Writing Corpora image 5

Contact

For inquiries or collaborations, feel free to reach out directly: