Linear interpolation (sometimes called lerp or mix) is a really handy function for creative coding, game development, data visualization and generative art.

The function interpolates within the range [start..end] based on a t parameter, where t is typically within a [0..1] range.

// Linear Interpolation
// Also known as "lerp" or "mix"
function lerp (start, end, t) {
  return start * (1 - t) + end * t;
}

// Examples:
lerp(0, 100, 0.5); // 50
lerp(20, 80, 0); // 20
lerp(30, 5, 1); // 5
lerp(-1, 1, 0.5); // 0
lerp(0.5, 1, 0.5); // 0.75

For example, divide ‘loop time’ by ‘loop duration’ and you get a t value between 0.0 and 1.0.

Now you can map this t value to a new range, such as lerp(20, 50, t) to gradually increase a circle’s radius, or lerp(20, 10, t) to gradually decrease its line thickness.

^{↳ Mapping a value from one range to another.}

Another example: you can use linear...

^{— Try the experience in your browser at https://tendril.ca/}

I recently launched a small and interactive web toy for the Toronto-based Design + Animation Studio, Tendril. You can try it out on their home page. Their site rotates through different web toys, so you may need to reload once or twice to see it.

The experience is simple: brush your mouse across the generative plants to see them blossom and emit musical tones.

This was a really fun project to work on, and I’m very pleased with the outcome. It’s great to watch the reactions on Twitter and Instagram, including the heartwarming reaction by a four-year old using the experience on a tablet.

In this post, I’ll explore how I created the web toy alongside the amazing team at Tendril, and discuss some of the technical challenges faced along the way.

Concept

For a while now, Tendril has been showcasing different interactive...

^{— This post is a continuation of Pen Plotter Art & Algorithms, Part 1.}

^{— Patchwork, printed with AxiDraw, December 2017}

In our previous post, we learned to develop some basic prints with penplot, an experimental tool I’m building for my own pen plotter artwork.

In this post, let’s aim for something more challenging, and attempt to develop an algorithm from the ground up. I’m calling this algorithm “Patchwork,” although I won’t claim to have invented it. I’m sure many before me have discovered the same algorithm.

💡 You can find more discussion and images in this Twitter thread, where I first posted about it.

The algorithm we will try to implement works like so:

1. Start with a set of N initial points.
2. Select a cluster of points and draw the convex hull that surrounds all of them.
3. Remove the points contained by the convex hull from our data set.
4. Repeat the process from step 2.

The...

^{— You can find the source code for this blog series here.}

Over the last several months, I’ve been looking for ways to produce physical outputs from my generative code. I’m interested in the idea of developing real, tangible objects that are no longer bound by the generative systems that shaped them. Eventually I plan to experiment with 3D printing, laser cutting, CNC milling, and other ways of realizing my algorithms in the real-world.

My interest in this began in March 2017, when I purchased my first pen plotter: the AxiDraw V3 by Evil Mad Scientist Laboratories. It’s a fantastic machine, and has opened a whole new world of thinking for me. For those unaware, a pen plotter is a piece of hardware that acts like a robotic arm on which you can attach a regular pen. Software sends commands to the device to raise, reposition, and lower its arm across a 2D surface. With this, the plotter...

This post explores a technique to render volumetric curves on the GPU — ideal for shapes like ribbons, tubes and rope. The curves are defined by a parametric equation in the vertex shader, allowing us to animate hundreds and even thousands of curves with minimal overhead.

Parametric curves aren’t a novel idea in WebGL; ThreeJS already supports something called ExtrudeGeometry. You can read about some of its implementation details here. This class can be used to extrude a 3D curve or path into a volumetric line, like a 3D tube. However, since the code runs on the CPU and generates a new geometry, it isn’t well suited for animating the curve every frame, let alone several hundred curves.

Instead, let’s see what we can accomplish with just a vertex shader. The technique presented here has various downsides and isn’t very robust, but it can look great in certain cases and tends to be...

Audiograph is a small project I built in my free time over a two-week period in April. It’s a music visualizer for the 2016 album TRANS by Pilotpriest, rendering in real-time with WebGL and WebAudio.

In this post I’ll explain the process and some discoveries along the way.

Inspiration

After learning about Dolby’s Web Audio challenge at FITC Toronto, I was motivated to build a captivating audio-visual experience with WebGL. With only two weeks left in the challenge, I knew it had to be a small and focused project.

I’ve always been a huge fan of Beeple and his Everydays series. The vivid colours, bloom, film grain, and other lens effects give his work a lot of texture, and I’ve often wondered how to emulate the aesthetic in WebGL.

_{Select works by Beeple}

Implementation

At its core, Audiograph is really just some simple geometry moving toward the camera. As with one of my...

This post explores a small weekend project that combines Node.js and HTML5 Canvas to create high-resolution generative artwork.

In the browser, the artwork renders in real-time. Tap the canvas below to randomize the seed.

^{Click here to open the demo in a new tab.}

In Node.js, the same rendering code uses node-canvas to output high-resolution PNGs or MP4 videos.

Node Canvas

The node-canvas API is mostly compatible with the HTML5 Canvas, so the backend code may be familiar to some frontend developers. We have two entry points – browser and node – but both require() a module that is engine-agnostic, and simply operates on the Canvas API.

For example, to draw a red circle in Node and the browser:

module.exports = function (context) {
    // get the Node or Browser canvas
    var canvas = context.canvas;
    var width = canvas.width / 2;
    var height = canvas.height / 2;

This post introduces a novel approach to developing, debugging, and profiling Node.js applications within Chrome DevTools.

devtool

Recently I’ve been working on a command-line tool, devtool, which runs Node.js programs inside Chrome DevTools.

The recording below shows setting breakpoints within an HTTP server.

This tool builds on Electron to blend Node.js and Chromium features. It aims to provide a simple interface for debugging, profiling, and developing Node.js applications.

You can install it with npm:

npm install -g devtool

REPL

In some ways, we can use it as a replacement to the node shell command. For example, we can open a REPL like so:

devtool

This will launch a new Chrome DevTools instance with Node.js support:

We can require Node modules, local npm modules, and built-ins like process.cwd(). We also have access to Chrome DevTools functions like copy() and table(...

This year I decided to try codevember, a challenge to write a creative experiment for every day of November.

This post is a follow-up (and brain-dump) exploring some of the daily demos and lessons learned.

You can see all the experiments here:

mattdesl.github.io/codevember

setup

The codevember challenge calls for CodePen submissions, but I find prototyping much faster with a dedicated development server (budo) and a wide selection of node modules at my fingertips.

After setting up a build/dev script, I was able to iterate quickly with babel for ES2015 and installify to auto-install npm modules as I coded. To inline GLSL snippets, I used glslify.

In the end, the project racked up over 160 direct dependencies. If nothing else, it is a testament to the ease of rapid prototyping with npm.

topics

I tried to iterate on a few topics over the 30 day period. These features seemed the...