WorkAboutContact

Project info

Agency
Self-initiated
Year
2022-2024
Technology
ReactJS, typescript, NPM, ThreeJS, P5
Role
Design, development
Born out of my own need, I’ve created an editor that can quickly be added to creative coding projects and provide powerful tools to enable discovery

Problem

Solution

Problem

I always need extra tooling while developing creative coding projects. It's always hard and time consuming to make my own UIs for every project. need something that I can setup quickly and has an extensive set of tools that I can customise for my needs. Existing tools are often too light or too hard and bespoke to setup.

Solution

Magic Circle is my attempt at creating that tool for my creative development needs. It's a multi-functional user interface inspired by tools like dat.GUI, Unity and Framer. Think Storybook.js, but then for creative coding. It is a very small bit of code (~5kb, no external dependencies) to add to a project but it allows me to create a fully extensible user interface with tools to play with for these project.

The aim of this tool is not only to allow for easier and quicker development but also to promote collaboration and playfulness inside the teams I’m working with. Everyone should be able to play with the tech you make and add a meaningful contribution. You don't need to be a coder to improve a piece of creative tech. With this tool people can play with your project and share their results.

I named this tool Magic Circle, which according to Huizinga (Homo Ludens, 1938) is the place where play takes place. A place whereby the rules and reality that guard normal life have been suspended

Preview

Works with anything

THREE.js
p5.js
Regl
React
Pixi.js

The features I needed

Control my variables

Enables me to play around with variables. All controls are configurable and adaptable to play nicely with most data sources. It comes with a good set of versatile controls for numbers, text, booleans, functions and colours.
controls emoji

Completely reproducable presets

Nothing worse then losing old variants of a project since you no longer know how to get it back in the same way. Magic circle enables me to create the exact same scene by saving the values of your variables, seeding value and your git state. I can save a preset and always go back in time and exactly recreate it.
box emoji

Screenshots

Take screenshots easily and in high-quality. The current state of the variables is saved with a screenshot as a preset. This means I can recreate that screenshot again. Especially since the current git state is also being stored, I can go back in time to re-create old presets.
camera emoji

Recordings

Render my content into a screen recording by exporting it frame by frame without lag. Enabling you to export videos in high quality without loss of quality or jankiness like for example a manual screen recording would.
video camera emoji

Timeline

Create a timeline with keyframed values based on my variables. Use it to experiment with values or create production-ready animations.
clapper board emoji

Performance measurements

Measures and displays performance metrics like Frames Per Second and memory usage so I always know if my projects run smoothly.
chart emoji

Small client

The UI embeds my projects into a frame. This means the client code (the code you add to your project) is very very small (~5kb) since all the heavy lifting is done inside the UI which isn't part of my project files. You don't have to fear that Magic Circle will get bundled into your project. If you load your project outside of Magic Circle, it will just work as-asual.
chicklet emoji

Custom plugins

Since all projects are unique, some projects need custom plugins that might not exists yet. I can make bespoke ones if needed.
worktools emoji

Deploy

I can build and deploy this setup, so I can share it with others in my teams or the wider world.
rocket emoji
Lesson learned
Its possible, and needed, to create your own tooling so that you can improve the quality, efficiency and collaboration of the projects you work on.

Projects

Click on a project to read more

Flow

Reinventing mechanical engineering
2020-2022
OMM logo

Nike Euro Cup 24

Motion-tracked experiental storytelling for Nike
2024

3D Cities

Making cities come to life with data
2014-2018

Magic Circle

My open source editor for creative coding projects
2014-2018

Gentrification Forecast

Predicting gentrification in London
2017

Echo System

Analyising and visualising online tribal behaviour
2018
OMM logo

WebAR

Leading the development on multiple media campaigns
2023

Refactoring collaboration

My thesis about collaboration for creative technology
2017

Lick

Launching a new home decor brand
2020

Smart Telemetry

Visualsing driving behaviour in the UK
2018
Go to experiments

Writing

I sometimes like to write about design, creativity and technology
Magic Circle: My editor for creative collaboration 5 min readRefactoring collaboration 90 min readWhy play can improve the interdisciplinary collaboration in your team 13 min read on MediumPragmatic design: how does design thinking fit into the real world? 9 min read on Mediunm

About

scroll down to go to about page