Lawrie Cape

Hi! I'm Lawrie, an interacitve developer.

I like making things - thinking up an idea, working out the steps needed to bring it to reality and then making it happen! I've been building things for the web for over ten years, with projects ranging from data driven websites and interactive training lessons, to games and applications with millions of users all around the world.

I specialise in creative front end development and have worked for a number of top UK digital agencies, producing work for many high profile brands and companies. I have a wealth of technical skills, and take a keen interest in UI, UX, illustration, typography, creative ideas and innovative uses of technology. I'm proactive and an enthusiastic learner, always on the lookout for challenging projects and eager to learn and expand my skillset.

Work

I am currently a Senior Front End Developer at Equator - an industry leading digital agency in Glasgow, Scotland. I enjoy a varied workload, including large and small scale development projects for a wide variety of clients, such as Axa, Beazley and Vitality Health, maintenance and upkeep of legacy projects, team support and development, and rapid prototyping.

Over the years, I've had the pleasure of working on a huge variety of exciting projects. Here's a brief selection of some recent ones:

Vitality.co.uk

I produced the front end architecture, build tools, page templates and a library of functional components for the rebuild of the Vitality Health website.

I planned the approach with Vitality's in-house development team, to whom I delivered the front end code and documentation for CMS integration.

In subsequent phases, I recieved the updated codebase, which they had been building upon, to complete a suite of additional components and templates for their staff servcies portal.

View the project here

Love Holidays - Holiday Memories

To help Love Holidays illustrate the changing nature of British holidays over the last 100 years, I created an interactive timeline and map, to display users' holiday memories.

First, a Facebook competition was held, asking people to submit their favourite holiday snaps. These photos were then stylized as postcards from the relevant era, geotagged and and added to the timeline and map displays, along with key dates from UK holiday history.

The site makes use of 3D css transformations and transitions to bring the selection of postcards to life. The project received widespread coverage and was awarded the CSS Design Awards site of the day, Awwwards Site of the day, Awwwards Developer Award and I was asked to write a walkthrough of the 3d effects for Web Designer magazine.

View the project here

Beazley.com

I worked with The Beazley Group, a FTSE 250 specialist insurance business, to rebuild thier website from the ground up.

Working closely with a team of talented designers and developers, I led production of an automated styleguide, a library of components, base styles and page templates.

Working to a tight deadline, we dealt with numerous design challenges and supported two external development agencies with the implementation of the front end codebase.

View the project here

Amplifon - The Art of Hearing

The Art of Hearing is an interactive 3d webGL soundscape built for Amplifon. Users must locate the source of sounds in various panoramic locations amidst other noises. The user's accuracy is measured, and compared to other users of their age and gender.

The site is built using three.js to power the webGL panorama, howler.js for the 3d positional web audio, GSAP for the animation of the camera and custom fragment shaders, which allowed me to create the complex transitions between the initial, partially obscured views and the revealed watercolour panorama designs.

The site has received media coverage in both the Daily Mail online and the Metro, and has won a coveted FWA Site of The Day award.

View the project here

Malmaison & Hotel Du Vin

Malmaison and Hotel Du Vin were completing a large scale site refresh. Within a larger team, I took ownership of the Content Hub section of the sites, and worked with a small team of front and back end devlopers to deliver them.

Working to the site's existing codebase and structure, and helped build the new functionality required, building upon on the sites' existing styles and functionaity, to maintain consistency of code and finished product.

View Malmaison here View Hotel Du Vin here

Amplifon - Cycle Tracks

Cycle Tracks is an experimental interactive project built for Amplifon. Visitors to the site are invited to import data from their Strava account (a cycling activity tracker) and this data is used to create an audio and visual representation of their ride.

I built the initial rapid-prototype of the 3d visualiser - taking the user's cycling data and mapping the 3d position and time, managing the camera's position throughout the timeline and setting up the three.js objects, materials, lights and shaders. This formed the basis of the finished piece, which was developed other team members. The final piece was named FWA Site of the day and also won the Adobe Cutting Edge Award.

View the prototype here View the final project here

Epiphany Search

I led the front end build for the Epiphany agency site. Working closely with members of the design and backend development teams, along with stakeholders in and out of the business, I built multiple templates and reusable components to meet a hard deadline.

The site was a mobile-first, responsive build and uses progressive enhancement techniques to add additional styling and functionality where available - such as the animated SVG timeline, webGL staff carousel and streetview office tour.

View the project here

AXA - Never Have I Ever

I was briefed with creating a creative content piece for Axa's Business Insurance division. The piece aimed to be an engaging interactive tool, highlighting some of the potential perils of business ownership and the value of professional indemnity insurance, in a fun and engaging way.

I worked closely with the designer, to create the polished SVG animations and transitions on display in the final piece.

View the project here View a video of the project here

Zuto - 88 miles per hour

If Back To The Future was set today, what car would you choose as your time machine? We asked a sample of people this question, and built this site to showcase their choices. Built with very limited development resource, this project was a race against time, with an immovable deadline of October 21st 2015 - Back To The Future Day.

Working with illustrators and motion designers, I built the front end, using the beautiful SVG cars, custom motion graphics and a host of both css & javascript animations and transitions.

View the project here

Rightmove - Home of the Future

Working closely with the copywriting team, designer and 3d modeller, I built Rightmove's "Home of the Future" - An interactive timeline which visualises how changing consumer technology may change the face of the home over the next 15 years.

The site was received good feedback and was featured on high profile sites such as the Mail Online and Creative Bloq and was awarded a CSS Design Awards Site of the Day award.

View the project here

NHS - Platelets Donation

I worked with the NHS Blood and Transplant Special Health Authority to implement a program of updates and additions to their existing Blood Platelets donation microsite.

I applied a thorough CSS Refresh to both bring the site in line with their updated branding, and also to add responsive layout elements, to help optimise the experience for users visiting from mobile devices.

I also developed a new "sign-up wizard" for the site - using a custom Google Maps based interactive section to find the nearest platelet donation centre to the user and help simplify the sign up process.

Epiphany Cardboard

For Christmas 2014, Epihany wanted to send out an interactive agency Christmas card using the newly released Google Cardboard.

Using three.js, I built a web based stereoscopic 3d animation through which we delivered our Christmas wishes. Multiple flat illustrations were added to the scene and animated through a mixture of javascript tweens and webGL shaders, to bring the scene to life. Clients received an Epiphany branded flat-pack Google cardboard and instructions on how to view the piece.

View the project here

Crest - Sensi Stop Strips DSA

I built a 20 page interactive Digital Sales Aid for Crest, to help demonstrate their new Sensi Stop Strips.

Developed using Backbone, and delivered through proprietary P&G software, the app was built specifically for in the field demonstrations by sales teams using iPads.

The piece used animations, video, animated graphs, interactive sliders and more, all contained in a custom, easy to use, touch and swipe based menu system.

Assorted smaller projects

Here's a few smaller projects I've built recently - single page sites for various clients.

  • Rosetta Stone - Build you career with a second language
  • Kempinski Golf - The science behind the perfect swing
  • Kempinski Golf - The history of women in golf
  • Nuo Hotels Beijing
  • Pizza Express - Christmas party guide
  • Syke Cottages - Travel Trends report
  • Keepmoat - Moving the goalposts
  • Rightmove - Happy at Home Index

Personal Projects

Whether it's as a training exercise with a new language or framework, a creative idea bursting to get out, or just for the fun of it, I adore getting stuck into a new personal project. Here is a selection of my favourites -

Gigfi

Gigfi is a web app for creating and listening to custom playlists, made up of songs by bands who will soon be playing in your city, no matter where in the world you are.

I planned the core concept and wrote the backend functionality, and collaborated with two colleagues on the design and front end build.

The site has garnered high praise, receiving 50,000 visits within 24 hours of launch. It reached the front page of Reddit and has been featured on Fast Company, BuzzFeed and BBC News.

“A simple, powerful mashup is the best thing to happen to music on the internet in a little while.”

Matt Buchanan of BuzzFeed
Watch the BBC Click segment here

Unfortunately, due to recent LastFM API changes, the site no longer functions.

Rompola

Rompola was a project to create an informal 3d sketching environment running directly in the browser.

Built using webGL (through threeJS), TweenLite, PreloadJS and EaselJS, Rompola is a expressive and fun to use drawing app.

Draw with your left mouse button and rotate the stage with the right. You can zoom and pan using your mouse wheel, and there are numerous other options to play with, which allow you to create a wide variety of styles and effects.

View the project here Watch a video demonstration

Tangent Spaces

After discovering the beautiful geometric designs created by graphic designer Tilman Zitzmann for his Geometry Daily project, I was inspired to see how I could recreate them, and bring them to life.

Tangent Spaces is an open source project which aims to explore the designs using various interactive web technologies.

Tangent Spaces makes use of the excellent 2d rendering engine PixiJS for super-fast webGL rendering, with a canvas fallback, and is featured on the PixiJS showcase.

“This is so awesome, it’s ridiculous!!”

@Tilman - Geometry Daily designer
View the project here

Cellular Automidi & Flash Midi Server

To explore the idea of generative systems and music, I developed Cellular AutoMidi, an audio application, which creates music based on a modified Cellular Automata algorithm.

Designed to be enigmatic but playful, Cellular AutoMidi was released as an open source project and was featured on the influential music production blog Create Digital Music

Attempting to draw together my passion for music and programming, I developed Flash Midi Server, a Processing application and Flash library to allow AS3 applications to both send and receive midi signals.

This allows generative audio applications (such as Cellular AutoMidi) to play music using software or hardware audio equipment - vastly increasing the possible sounds. It also allows hardware midi controllers to be used as input devices for Flash applications.

Watch a video demonstration Watch a video of FMS powering a hardware synthesiser

Creative coding & generative arts

I’m fascinated by creative coding, generative arts and emergent behaviours, which feeds into many of my personal projects.

Feedback Cam is a recent project, which uses cutting edge web technologies (webGL, webRTC streaming video and fragment shaders) to explore the beautiful and complex patterns that emerge from recursive video loops.

Watch a video demonstration of FeedbackCam

Wiblr is an experiment using concentric cirlces, a simple physics system and webGL as a novel interface for photographic manipulation. It allows users to upload an image, or take on from their phone camera right there in the browser, then lets them warp and deform it in fun ways.

View Wiblr here

inParticular is a project which uses some basic mathematcal formulas and randomisation to create highly complex 3d formulaic geometries. These patterns are then processed with webgl shaders, leading to very striking and diverse images. A simplified version of Wiblr was featured on the CodePen homepage.

View inParticular here Watch a video demonstration of inParticular

See also in this gallery - An Arduino & processing powered sewing-machine guitar pedal, a mobile time-warp photography app, depth detection and particle animation using a Microsoft Kinect and a procedurally generated concept for record sleeve.

Contact

Do you have an amazing idea for a web app? A question about generative music systems? Or just looking for someone to hang out with at next mathrock gig? Don't hesitate to get in touch; Drop me an email or a tweet, or have a look over my profile on LastFM or GimmeBar.