All posts by robshearing

3:03 Friday

At MullenLowe we put out an internal weekly eDM for all staff. I designed and managed the eDM and created a unique header animation for each issue. I used this as an excuse for some creative coding and for most of the issues I used Canvas and WebGl effects as a basis for the looping gif animations.

These are some example executions, click on each image for a see the effect:

 

 

Accelerometer experiment

This is a demonstration of a WebGL effect controlled by an Arduino. The objective was to pipe realtime data from a MEMS accelerometer through to a streaming data socket that javascript on a webpage could use. Using an WebGL GLSL shader, realtime accelerometer data is passed into the vertex shader as a data attribute to modulate a Simplex3D Noise function. It has the effect of visually reacting to any nearby vibrations such as those created by a person walking by. The tech stack includes a number of technologies to achieve the effect:

  • Accelerometer (ADXL345)
  • I2C Data protocol
  • Arduino
  • USB Serial Data
  • Node (Express, SerialPort, Socket.io)
  • HTML/JS
  • WebGL (GLSL)

 

youtube

 

 

Face Swap

In the lead-up to a new permanent gallery opening at the Australian Museum, I created an interactive SnapChat style filter application that allowes visitors to switch their face over to one of three famous Australians. The app was built in OpenFrameworks and is derived from an experiment done by Kyle McDonald and Arturo Castro. The installation has two touchscreens powered by mac minis housed inside a mobile enclosure. The app has a feature where an image can be emailed to a user, allowing it to be shared on social media. With a background in Industrial design, I was able to produce CAD drawing of the enclosure and consult with the cabinet makers to manufacture the custom unit. The app has been running continuously without any crashed or maintenance required for over 14 months and is used daily by visitors to the Museum.

Casestudy

Early prototype

Demo

 

 

MapBox WebGL

I have done many executions with maps including creating a number of custom map tile renderers, however using an API is always easier. Google maps are dominant on the web but I try to use MapBox whenever I can. The api allows shapes to be extruded up from the map surface. This is typically used for buildings and landmarks but it can also be used with data. In this experiment I’m using the GDP data for Thailand. It includes data at different region levels which is linked to map zoom levels.

Clearly there is a strong city/country divide in Thailand.

 

 

TKMAXX

I worked within a team to build this site. My responsibility was the store location map, fan finds and blog pages. The site is using AngularJS, Google maps, Masonry, and it has a wordpress/Sitefinity backend.

 

 

Audi Q5

I created this 3D scene for the Audi Q5 as a side project during some down time at work. The scene is created in Three.js and the model was purchased from Turbosquid. For a tech demo, this was used with a Leap Motion controller to use your and to interact with the camera.

 

 

Smartest A4 Paper

This a prototype for a digital engagement that allowed a piece of plain paper to interact with content on a mobile device. Data was transferred from electronics embedded in the paper to the app via audio encoded message known as Chirps. This was decoded using the Chirp SDK. The circuit was designed to be only 3 mm thick and be embedded in the spine on the edge of the paper. Engineers were engaged and manufactures in China identified.

Prototype

 

 

Cockatoo

This dancing cockatoo was in response to a challenge to replicate Pablo the Flamingo. There are a few tings goin on here to achieve the effect. The rendering is done with Three.JS and I used Blender to rig theĀ bird modelĀ from a flat image. The motion was achieved by mapping vertices to a "soft-body" structure using Physics.JS. It is possible to change the audio that the bird dances to. To get the volume levels from the audio I preprocessed the audio track with Sound.JS, this creates a bitmap image where each pixel colour corresponds to a volume level at a time point in the audio track. This bird briefly appeared in the contact us page of the old 303 Lowe website.
This sketch demonstrated how the bird is modeled on a soft body physics structure.

 

 

Golden Helmet

This was used as an April fools joke for Harley. It was quickly put together in one evening, but it just so happened that I was working on a 3D model of a bike helmet the same day so I was able to get the page up quickly.

The model was sourced on Turbo Squid and is about 30000 polygons which is a good size for webGL. I used Three.js to bring the model in and apply the different textures, materials and shaders to the different meshes. It also works on mobile and the rotation can be controlled by tilting the phone.