Category Archives: Javascript

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

 

 

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.

 

 

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.

 

 

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.

 

 

IGR

I was part of a team that created a campaign website for the Intergenerational Report (IGR) in 2015.  The project features 360 video sequences that transition the site between different states around Australia - like a road trip. This process of capturing these images involved scraping sequences of high res-panorama image tiles from Google. I used some javascript to extract panoramaID's from Google streetview  into a JSON object and then built an Air app to download, compile and save out the image tiles from each pano location.
I had a bit of fun with these images and created a stereographic projection version here: