- Shelly Peleg
- 1 day ago
- 3 min read
Your name
Link to concept website
Your creative role and link to your own portfolio website
Developer / designer
Tell us a bit about yourself, your role, and how you found your way to a creative career
I’m Michael, a creative technologist based in London, originally from Perth, Western Australia. I started off as a graphic designer and illustrator, but a few years ago I landed an internship at a studio called Pretty–Soon. There I was asked if I knew how to do 3D, motion, type design, coding etc. I said yes to everything, and that night I would teach myself through Youtube tutorials. For each project I challenged myself to use at least one new piece of software, technique, anything. I became pretty good at being pretty bad at things. More recently, I’ve landed a role as the creative technologist for branding agency, Ragged Edge.
Please explain the concept of the site in a few words
You point a phone camera at something and the app will take all the colours and map them into a polar grid. As you move the camera around the colours will dance around and readjust.
What led you to create this website — was it a personal project, collaboration, or commission?
It started as a failed experiment when I was at Pretty–Soon. In between projects I was given the space to experiment with new methods and techniques. I came up with the idea and sketched it out quickly in p5, but the performance wasn’t great so it was scrapped. However, I’ve always wanted to learn shaders and had also recently finished up with another side project and was looking for the next one, so I began working on it in my free time.
What was the main inspiration — visual or thematic — that guided you in the process of this website?
I’m not sure how I came up with this one. ‘Play’ is a guiding principle in my work, and as an extension, the things I build. The primary goal for all the web apps I’ve created, including this one, is just to spark a bit of joy. They’re all also great opportunities for me to learn something new.
Visually, I just wanted to hero the colour mapper and the camera if the user chose to display it. I landed on a technical looking interface. The read outs actually DO correlate to the colour information, but they’re really just there to add texture.
Share any tech details, special tools or web-design features you included, or any behind-the-scenes information
It took me many many attempts before I realised I needed not one but two shaders for this to work. One which captures the colours and stores it in a buffer, the other which maps the colours to the polar grid. It went through a few optimisation rounds as well, the first few versions leaked memory like crazy and would freeze the browser after a few seconds. The current version adapts to the performance of the device running it, and will change the amount of colours sampled as well as the sampling technique accordingly.
Walk us through the design process of the map
From the prototype in p5 to the final version, the map didn’t change much. I originally planned to show a blurred camera input as the background, however it made the colours on the map harder to see. I explored different UI layouts inside the map, but stripped them all away for the same reason. I also tried a version using 3JS, and it mapped the colours to a cube using voxels. That way I could map all three dimensions of colour – hue, saturation and lightness. But It didn’t look as cool, so I kept just hue and saturation, with lightness being ignored and set at a constant 50%.
What web-design project are you working on currently?
I’m working with web less and less these days. This past year and a half I’ve been building a desktop app aimed at creative professionals. There is a web component of this app, and once it’s released (2026 fingers crossed) I will be rebuilding my personal website using it. I can’t give away anymore than that.
Thank you Michael!
