Web animation, multimedia processing, and frontend web applications.
I learned to code in order to make things move on the web, but also because in my video, design and animation work I was already using F/L OSS
tools which let you use code or commands to manipulate media in powerful and creative ways.
It felt like I wasn't using my tools to their full potential when I was just clicking around a graphic user interface.
Now I use my own custom software all the time! I use Python to automate tasks in Blender , export and convert images with Inkscape or ImageMagick , or combine FFmpeg commands to batch-process audio & video files.
In my web projects I’ve predominantly used ‘vanilla’ programming languages ( HTML , CSS , SVG , JS ) and relied upon web standards like Web Animations or Canvas in order to get a good low-level understanding of graphics and animation in the web ecosystem. I’ve also used TypeScript , anime.js , Vue , and svg.js extensively. This website is made with Svelte .
How Lowe Can You Go
Meme generator to create mock billboards
I started this project with my friend Mix Irving, out of frustration at the way that the real estate agency & property management firm Lowe&Co have been flooding our city with billboards. Lowe&Co's billboards are often 'edgy', gloating about their success, while Wellington suffers in a housing crisis that's forcing many to move away, others to live in unhealthy, unaffordable rentals, and others to live under the life-long shadow of an unsustainable mortgage.
This tool allows people to take control of the narrative, to edit Lowe&Co's billboards to more accurately reflect the current housing crisis, and the role of estate agents, landlords and property managers in that crisis, then share their creations online (using the native
Web Share API,
Clipboard API, or downloading, depending on their device).
As it turns out, many others share our frustrations!
Convert Anime.js Animations to CSS
Writing web animations with the help of Anime.js feels very natural. You make a timeline, and tell your story:
first: the triangle rotates to point towards the circle then: the triangle anticipates an action, compressing and vibrating then: the circle squishes down, ready to jump then: the triangle charges! then: the circle jumps out of the way! then: the triangle slumps to a stop. then: the circle bounces to a safe landing.
Of course, this isn't exactly what an anime timeline looks like, but the key is that you can tell the interdependent story of the triangle and the circle together, as one chronological timeline.
However, if you have a looping SVG , animated with CSS , it gives you the crispness and lightness of web animation, in an image file which can be added to a site just as readily as one of those big clunky old GIFs.
It's just a pity that writing CSS animation is such a drag: you need to write one animation for the triangle, and separate animation for the circle, and try to keep everything synched up:
10%: the triangle rotates to point towards the circle. 30%: the triangle anticipates an action, compressing and vibrating. 50%: the triangle charges! 80%: the triangle slumps to a stop.
35%: the circle squishes down, ready to jump 55%: the circle jumps out of the way! 85%: the circle bounces to a safe landing.
If you need to make changes (you always need to make changes) then everything else in the animation gets messed up. I've written complex CSS animations before, and it's a horrible experience!
So this script enables writing animations with anime.js, but publishing as either anime or CSS.
adapt SVG designs for your local CC chapter
This was a fun tool quickly pulled together for the 2019 Creative Commons Summit - the Dutch Creative Commons chapter had been preparing stickers and badges with the CC heart logo combined with a Dutch flag. The idea was to make their local chapter members identifiable and to swap swag with friends from other chapters. I thought it would be fun for other chapters to be able to adapt their idea to their own country's flag.
Video to SVG
convert videos to lo-fi animated SVGs
This script converts a video to a image sequence at a low framerate, then converts each
frame to a vector image of basic shapes.
Each of these vector frames are added to an SVG file in a vertical 'filmstrip', which is then pulled down through the
using a frame-by-frame CSS animation.
I have no idea if there is a practical use-case for this, but it makes teeny tiny files which can still be somewhat discernable, and I think the result looks cool.
People Against Prisons Aotearoa
Contributing to F/LOSS and prison abolition
Incrementally improving the design of an existing project
People Against Prisons Aotearoa (PAPA) has created custom F/L OSS tools for giving members an overview of the organisation, for coordinating advocacy work, and for communicating with prisoners, enabling the organisation to be really effective and spend their energy where it counts. I've done a small amount of work in PAPA's Design and Tech working groups on improving visual design, usability and accessibility, and doing odd media-related jobs (like fixing flickering videos using Python + FFmpeg).
Interested in creating interactive digital media, or adapting creative software tools to make your work easier, and fit your particular needs?