Chris Uehlinger
Credit: Shealyn Jae
Hi there! My name is Chris Uehlinger. I'm a... well I do a lot of stuff, including web development, projection/video design for theatre, VR development, voiceover work, 3D graphics and I've taught programming both abroad (at โรงเรียนเซนต์คาเบรียล in Bangkok) and stateside (through talks at charmCityJS and volunteering for Baltimore NodeSchool).
Shows
The Battle of Broken Mirrors
The Scattered Players, October 2020
Role: Producer, Full Stack Engineer, 3D Animator, Actor (Widget of G'Mail)
Tech: WebRTC, WebGL, Three.js, React, Redux, Redux Saga, Docker, Janus WebRTC Server, Express, Websockets, ARKit
This was the second online interactive immersive theatre show produced by the Scattered Players. Conceived by Brett Messiora and directed by Teresa Attridge and Deirdre McCallister, this show explored themes of good and evil through the lens of high fantasy.
Shattered Space
The Scattered Players, June 2020
Role: Producer, Full Stack Engineer, Actor (Chad Fastcannon), VO/Mocap Actor (Colonel Panic)
Tech: WebRTC, WebGL, Three.js, React, Redux, Redux Saga, Docker, Janus WebRTC Server, Express, Websockets, ARKit
This was a fully-online interactive piece of theatre produced during (and as a response to) the COVID-19 Pandemic. I built a platform that allowed audiences to fly around a 3D solar system in groups of 5, interacting with characters played by actors from across the east coast, all acting out of their own houses on their own devices using whatever they had available for setting, props and costumes. The apps involved had to work on desktop, tablet and even mobile browsers (many actors were using phones since they have better webcams) and had to adapt to changing network conditions and unpredictable user device constraints. This is the most technological complicated project I've ever worked on, and I'm really proud of how it turned out.
You can read more about this show (and my process for building all the tech it ran on) on my blog.
Love and Information
Fells Point Corner Theatre, January 2020
Role: Projections Designer, Engineer, Video Editor (also staged and shot some of the video pieces)
Tech: Express, Websockets, QLab, Adobe After Effects, Adobe Premiere Pro, WebRTC, Nexrender, Raspberry Pi
This show consisted of about 50 sketch-length pieces about communication and relationships in the digital age. Some of these pieces were accompanied by projections, some involved live communication between onstage and projected offstage actors via WebRTC, others were completely filmed and then edited by me, one of them involved coating the walls with nebulae using 7 projectors driven by Raspberry Pis.
Space Kumite
Baltimore Rock Opera Society, November 2019
Role: Video Designer, Engineer, Live Voice/Mocap Actor (Biome and Nav)
Tech: Unity, ARKit, Electron, OSC (over Websockets), QLab
This was a Space Scifi musical where the audience could make decisions about how the show would progress. I built a system that allowed 3 voice/mocap actors (including myself) to perform live as 5 different "AI" characters (whose voices were modulated with QLab effects).
Lizzie, the Musical
Guerrilla Theatre Front, October 2019
Role: Projection Designer, Video Editor
Tech: QLab, After Effects, Premiere Pro, WebGL, Unity, Electron, Siphon
This show (about real-life historical person Lizzie Borden) was less technical than many of the others I've worked on, and my work was more focused on building complex QLab cues using sequences I built in Adobe After Effects.
Welcome to Shakesville
Baltimore Rock Opera Society, May 2019
Role: Projection Designer, Engineer (live video monitoring system)
Tech: WebGL, WebRTC, ARKit, Electron, OSC (over Websockets)
This was an excellent locally written musical and was my first time working with the BROS. My main contribution was the portal between our world and Shakesville, which I built using an open source WebGL fluid simulator. I also built a live video monitoring system that could run over the LAN using WebRTC and the Janus media server, which allowed the band (who were backstage) to see what was happening onstage and take their cues. Towards the end of the run I introduced an ARKit-based effect that allowed the Deputy Mayor (the show's supervillain) to perform her first song of the show via live motion capture.
Thank You, Dad
Rapid Lemon Productions, January 2019
Role: Projection Designer, Video Editor
Tech: Adobe After Effects, Adobe Premiere Pro, Express, WebRTC, WebSockets
This was a locally written one-man show about the cult leader Jim Jones. It featured heavy use of sequences I built using Adobe After Effects (this was my first time using it), as well as one effect where I captured live video of the character from an iPhone embedded in his pulpit, streamed it over the Wifi via WebRTC and projected it behind him for a sort of "Wizard of Oz" effect. I hadn't yet heard about software like QLab, so for this show I build my own cueing webapp using Express and Websockets.
The Rocky Horror Show
Haute Patooties, October 2018
Role: Projection Designer, Actor (Phantom)
Tech: ARKit, WebRTC, WebGL, and Neural Style Transfer applied to old scifi movies
I got my start in Projection work creating an effect using ARKit that allowed the actor playing Magenta to perform a pre-show monologue as the iconic Lips from the Rocky Horror Picture Show via live motion capture. I later built a video sequence for Science Fiction/Double Feature using clips from the mentioned movies but thrown through a Neural Style Transfer algorithm, as well as a 3D sequence built with Three.js and one short moment where we cut to a webcam pointed at the audience.
Demos
Lesson on Expansion
November 2015 - January 2016
This is an animated, interactive lesson about the shape of the universe complete with synchronized audio narration. It's built with Reveal.js, D3 and jQuery (which seriously pulled a ton of weight as an audio engine?!). This project involved a combination of project planning, writing, editing, recording, audio editing, performance testing, cartography and a whole lot of trigonometry.
Crocus
October 2015
Crocus is Node.js based tool that visualizes how much space each part of your file tree takes up. Hover over an area of the graph to see a breadcrumb of its file path, along with how much space it is taking up. If something seems to be taking up a large amount of space, click on it to zoom in and get a more detailed look.
Aristotle's Puzzle AI
September 2015
This is another AI experiment, this time using a game called Aristotle's puzzle. The game is built using React, Redux and React Hot Loader. The AI uses a fairly brute-force approach, the challenge came in making the validation as predictive as possible in order to reduce the number of brute force tries the computer would attempt.
Quantum Blob
August 2015
After my visit to the LHC in August 2015, I was inspired to make this fairly rough sketch that I may use later in a lesson about Quantum Mechanics. The two colored blobs can be dragged together, causing them to combine into a single purple blob. However, the two blobs are discrete, and can be separated by multitouch gestures even though they seem homogenous when combined.
Touch Math
May 2015
This lesson prototype presents the student with a simple arithmetic problem. They can solve the problem by dragging one digit on top of another and performing operations on the "combined" digits. When they are done, a teacher can "play back" their work and see all the steps that were taken to get to the answer playing in realtime.
Reactions
May 2015
This lesson prototype takes the abstract concept bonding energy and makes it into a more visceral phenomenon. Atoms and molecules can be manipulated with multitouch gestures, with bonds breaking if they are stretched too far. The amount of stretching required varies with the energy of the bond.
Monsoon Marketplace
April 2015
Another next generation lesson prototype. This one is based on the awesome work by ThoughtCafe in the Crash Course World History lesson, the Monsoon Marketplace. Clicking or tapping on any of the cities will animate you into an article about the city and its role in the economic trade of the time (content from Wikipedia). Clicking the links to other cities will take you back to the map, where you'll be "transported" to the article about that city.
BRICS
April 2015
A prototype for a new kind of geography lesson using D3. As you scroll to each country's section of the lesson, the globe swivels to show that country. This demo is built using content from the Wikipedia pages about the BRICS countries, Mike Bostock's World Tour demo and a JQuery plugin called Waypoints
λ Bubble Pop!
September 2014
This was a fork of λ Lessons, a project by Jan Paul Posma and Steve Krouse. I "redecorated" the function editor so that each function application was a bubble, which could be "popped" to reveal the result. This was a lot of fun to make, and managed to land on the front page of Hacker News as well as /r/haskell
St. Gabriel's C Study Guide
August 2013
During my first semester teaching programming in Thailand, I built a study guide to help my students learn C. This was my first experience building a dynamic website, and included animated demonstrations of running code, as well as inline code editors where students could try out what they'd learned. I wrote about my experiences building this site on my blog.
Talks
WebRTC: A STUNning TURN of Events
charmCityJS, December 2020
This was my second of two talks about WebRTC. This one focused on RTCPeerConnection and the why/how of ICE. You can see the whole talk on YouTube!
WebRTC, But Hold The Ice
charmCityJS, October 2020
This was my first of two talks about WebRTC. This one focused on getUserMedia, MediaStreams, and what you could do with them. You can see the whole talk on YouTube!
Unshattering the Audience: Building Theatre on the Web in 2020
charmCityJS, July 2020
This talk was based on my blog post of the same name, and was a quick run-through of how I built the software that ran Shattered Space. I don't have a video of this one, and my slides are a bit incomplete (it was heavily demo-focused), so I'd recommend checking out the blog post instead."
Let's Do The Timeout Again: Using Javascript to make Projections for Theatre
charmCityJS, February 2019
At this point I had only done projections for two shows (Rocky and Thank You, Dad) but a lot of the concepts I cover in here (particularly ARKit and basic WebRTC stuff) formed the basis for a lot of my future projections work as well. This is also the only talk I've done that was recorded at the meetup where it was given, so I recommend checking that out."
Copywhat? Licenses, Patents and that Weird React Thing
charmCityJS, November 2017
This talk was a response to that whole thing where Facebook changed up the licensing of React (and other projects) in a way that created a lot of confusion about people's liability. Many people working in software have only a cursory knowledge of how software IP works, so it felt like a good time to review the basics of IP law and how it affects us. In a blistering 25 minutes I rampaged through the concepts of Copyright, Fair Use, Licenses, Patents, Patent Grants and then the issues surrounding Facebook's actions and what they meant (spoiler: it's a bit unclear but it might be fine but I am not your lawyer).
I also yelled the entire 3rd paragraph of the MIT license at 70 people.
Introduction to D3.js
charmCityJS, February 2017
D3 is an incredible tool that many developers find intimidating at first. This talk was a basic tutorial in making a bar chart in D3, but with a focus on how you don't need to understand all of D3 in order to be very proficient in using it. I also highlighted the awesome amount of examples on bl.ocks.org and how you could use them as both inspiration and as a starting point for your own visualizations.
Three.js and WebGL
charmCityJS, December 2016
This talk was a brief intro to working with Three.js. I began with a supercut of some of the amazing stuff the community has made and then went on to a walkthrough of the official Three.js tutorial, showing the results of each step and explaining how each of the new vocabulary terms (Geometry, Materials, Textures, etc.) relate to each other.
Teaching JavaScript as a Foreign Language
charmCityJS, March 2016
This is a talk I've given at charmCityJS and the Loyola University ACM series (which was recorded). It's about my experience teaching programming in Thailand, and some of the lessons I learned that helped me become a better teacher and communicator.