<a href="//zsa.io" target="_blank" rel="noreferrer">ZSA.io</a> is a maker of ergonomic mechanical keyboards.
Many of us spend our days typing, but do we really pause to consider what that feels like in our body?
This experience is an opportunity to do just that.
The app was built on top of React, with WebGL visual elements using a custom shader written in GLSL. The app also relies heavily on WebVTT for cueing subtitles and orchestrating the experience.

<a href="//keyboardyoga.space" target="_blank" rel="noreferrer">Visit the site to chill out and mindfully-type and admire my undulating WebGL</a>

large_keyboard-yoga.png

medium_keyboard-yoga.png

small_keyboard-yoga.png

thumbnail_keyboard-yoga.png

keyboard-yoga.png

Keyboard Yoga

ReactJS

WebGL

The hat of communication.

Web VTT

Many of us spend our days typing, but do we really pause to consider what that feels like in our body?

large_keyboard-yoga-thumb.png

medium_keyboard-yoga-thumb.png

small_keyboard-yoga-thumb.png

thumbnail_keyboard-yoga-thumb.png

keyboard-yoga-thumb.png

As part of my foray into autonomous agents (thank you <a href="https://natureofcode.com/" target="_blank">Daniel Shiffman</a>), I built a generative tree grower.
 
The code starts with a single agent and then iterates with this agent. Each iteration the agent can split into one or more child agents, die, change direction, grow a leaf, the positions are then merged into a buffer geometry, creating a 3D tree.
 
Each initial agent has a set of parameters that will define the subsequent behaviour of the tree's growth, it's leaves and it's overall shapes.
 
The "growing" is animated by moving the gl drawRange on each frame, giving the impression of the tree growing.
 
Hopefully I don't need to tell you that these trees don't really exist in the real world?
 
You can view the full version <a href="https://www.lesmoffat.co.uk/sketches/trees" target="_blank">here</a>.

large_a-random-tree.png

medium_a-random-tree.png

small_a-random-tree.png

thumbnail_a-random-tree.png

a-random-tree.png

Generative Trees

collaborate on a coding / art project.

JavaScript

Growing things with autonomous agents

large_a-random-tree-thumb.png

medium_a-random-tree-thumb.png

small_a-random-tree-thumb.png

thumbnail_a-random-tree-thumb.png

a-random-tree-thumb.png

FlightRadar24 is the world’s most popular flight tracking app with roughly 1.5m daily active users.

As part of the Map Kanban Team, I was responsible for maintaining the web map / associated UI with migrating the significant legacy codebase. Tech included, but was not limited to, VueJS, SASS, ES3 (for legacy code), TypeScript, GoogleMaps API and GoogleAds amongst others. Due to the high amount of traffic, UI performance was an integral part in architectural decision making. Given the nature of the legacy code we also implemented e2e testing with Cypress.

large_Screenshot from 2022-02-18 11-37-51.png

medium_Screenshot from 2022-02-18 11-37-51.png

small_Screenshot from 2022-02-18 11-37-51.png

thumbnail_Screenshot from 2022-02-18 11-37-51.png

Screenshot from 2022-02-18 11-37-51.png

FlightRadar24

The hat of team playing.

VueJS

The hat of Agile Methodology.

The Hat of Problem Solving.

HTML5

JestJS

Gulp

jQuery

NodeJS

Webpack

CSS / SASS

The World's most popular flight tracker

thumbnail_Screenshot from 2022-02-18 11-38-09.png

Screenshot from 2022-02-18 11-38-09.png

As Freelancer working with creative agencies, I was lucky enough to work on an AR Experience for Johnnie Walker as part of their launch. The project was an AR web experience using an animated dire wolf or dragon (depending on which bottle you had) that interacted with the scene. I was responsible for UI development and some webgl bits and pieces.

large_Screenshot from 2022-02-18 11-43-57.png

medium_Screenshot from 2022-02-18 11-43-57.png

small_Screenshot from 2022-02-18 11-43-57.png

thumbnail_Screenshot from 2022-02-18 11-43-57.png

Screenshot from 2022-02-18 11-43-57.png

HBO / Johnnie Walker Dragon Glass

Web Platform

Redux

Whisky is coming...

small_Screenshot from 2022-02-18 11-39-50.png

thumbnail_Screenshot from 2022-02-18 11-39-50.png

Screenshot from 2022-02-18 11-39-50.png

More art than utility: a whimsical WebGL clock that playfully pushes the boundaries of usability. This unique timepiece revels in the irony of making you waste time trying to read the time. Crafted with WebGL, it transforms the simple act of checking the hour into an engaging and perplexing experience.

<a href="//www.lesmoffat.co.uk/sketches/weird-clock-1" target="_blank" rel="noreferrer">Check the time here.</a>

large_a-weird-clock.png

medium_a-weird-clock.png

small_a-weird-clock.png

thumbnail_a-weird-clock.png

a-weird-clock.png

A Strange Clock

Time's up

small_a-weird-clock-thumb.png

thumbnail_a-weird-clock-thumb.png

a-weird-clock-thumb.png

STV is the largest commercial broadcaster in Scotland. Initially responsible for front-end working with SASS / ES6 / Gulp / PHP / Twig templating and Angular 1 across different projects. Initially dealing with development on our legacy news app, I moved on to being part of the transition to full stack / universal JS using React / Redux / Next.js / Express on a daily basis working on STVs flagship Player application, data products and news sites. Other tasks included working with HTML video and ad tech and working with the design team.

large_Screenshot from 2022-02-18 11-35-38.png

medium_Screenshot from 2022-02-18 11-35-38.png

small_Screenshot from 2022-02-18 11-35-38.png

thumbnail_Screenshot from 2022-02-18 11-35-38.png

Screenshot from 2022-02-18 11-35-38.png

ExpressJS

Next.js

Scotland's largest commercial croadcaster

small_Screenshot from 2022-02-18 11-39-28.png

thumbnail_Screenshot from 2022-02-18 11-39-28.png

Screenshot from 2022-02-18 11-39-28.png

Whilst working on STV's news app, my colleagues and I were constantly presented with depressing stories, it can affect your mental health.

So I built a chrome plugin that makes the world seem just a little bit nicer. The plugin hits up an API to get a list of words to pull the 'ol switcheroo on and subsequently swaps out any images for that of a baby animal. So for example "man murdered by drug dealer" becomes "man hugged by small child". The project is discontinued now but a former colleague and I are looking to resurrect the plugin and get it on the chrome store.

Work.