Creative Development in Bristol
Creative development (also known as creative coding) is where artistic flair meets technical coding skills. Ooofff, sounds a bit pretentious that.
Maybe a better way of putting it, is that it’s doing things like web based animation, 3D, particle effects – anything where it has a strong visual component combined with a strong technical coding component. The fancy stuff basically.
It can work on a sliding scale too – from adding that extra layer of interaction and subtle animation all the way to going beyond websites into interactive experiences with things like 3D.
See the Pen
Phaser Platformer: 25 Lighting and Enhancements by Digitherium (@digitherium)
on CodePen.
Super square boy – the end result of a series of platformer tutorials I wrote over at digitherium recreating classic platformer tropes in Phaser JS
Web Animation
There are many ways to add animation on the web. At it’s simplest you are looking at CSS keyframe animations, then on top of that are libraries like GreenSock animation platform (GSAP).
These animations are often triggered on scroll – for instance items fading in as they appear. With GSAP you can even tie the animations to the scroller so they reverse as you scroll back up (like in this site on the homepage).
GSAP allows really granular control of animation and complex sequencing and timelines. If you’ve seen some cool transitions on the web then there is a high chance that it’s GSAP that is powering it.
SVG and Lottie
GSAP even allows animating and morphing of SVGs, so you can manipulate shapes and do some pretty crazy stuff. There is also another excellent library for SVG animation called Lottie.
Lottie allows you to create vector animations in After Effects and run then as simple native SVG code in the browser with a little bit of javascript. You can also do things like triggering it on scroll or hover. The youdoo site I built with Oku design is a great example of this and the guys from Oku have really nailed Lottie animations.
Page Transitions
Another way to enhance a site is page transitions (sometimes known as pjaxing – p = page, jax = ajax). These work hand in hand with GSAP. Instead of going to a new page when clicking a link, the content from that page can be brought in behind the scenes (this is known as AJAX) and then an animation shown to transition between these two pages.
As well as adding some visual flair, this can also make sites feel faster as the load time between pages is less visible. There are lots of libraries out there such as Barba js, Mmoothstate and Swup. This site uses Swup and GSAP.
Data Visualisation
The interactive presentation I built for Walmart Education used a data visualisation library D3, triggered on scroll with a healthy dose of GSAP. I’ve built numerous online presentations of this sort combining data feeds and animation including a corruption index for Transparency International.
The number of tools and libraries out there these days for charts, graphs and general data visualisation means you can now make some very slick presentations with minimal effort.
Mapping
I’ve done numerous complex google maps (and other mapping libraries) integrations where data from the site (often WordPress) is pulled into an interactive map with things like clustering so that pin markers combine when too close together at different zoom levels.
This can tie in very nicely with community sites in WordPress and you can create data feeds for maps from WordPress content that users can edit and add themselves.
I’ve also used the Google Street View API and even made a sort of Pokemon Go style treasure hunt.
Three JS (3D)
3D has really come a long way on the web, in a large part thanks for libraries like Three js. The 3D door configurator I built with SOS Design is one of my favourite projects I’ve ever worked on.
As well as more traditional 3D (loading in models etc) Three js is great for particle effects and image manipulation through shaders. Shaders are short little bits of code that render graphics data. There are the cheat code for lots of effects in video games – fire, water, organic movement etc.
Using Three js (and some trickery) you can apply shaders to regular HTML images on a website and do crazy things like make them dissolve or look like they are cloth blowing in the wind.
Games and Competitions
Back when facebook was actually popular I made lots of mini games and ad campaigns for the likes of Evian, Oak Furniture Land and Bloo toilet cleaner (oh the glamour). Connect 4, Pacman, Matched pair games, that sort of thing. I worked on a lot of projects with Activation Digital including the Lindt bunny on pack promotion where entry codes to a competition were printed on physical products ala Charlie and the Chocolate Factory.
These games were often made with vanilla js, but I also use libraries such Phaser JS and created a series of platformer tutorials over at digitherium.
In my spare time I am working on an old school indie video game using the Godot engine called Tangermarine.
I love games and I love interactivity. I especially love combining this with the openness of the web.