Dispatches

Nicely looping sketches created with p5.js. After reading Etienne Jacob’s fantastic article on replacement techniques, I created a few sketches based on the same idea. This is probably the one I’m most pleased with. See the code here.

Adaptable examples for data viz in Svelte. A collection of (mostly) reusable examples for writing data visualisations in a declarative style using Svelte and D3. Check it out.

WebGL Sparks. A particle sketch made using WebGL and GPGPU. Building on some of my previous work, I’ve implemented a (very basic) physics system in GLSL using three.js data textures. See it live here.

GPGPU for particle effects. Using GPGPU in three.js for performant particle effects and physics

A small fps demo in react-three/fiber. Built using the incredibly powerful react-three/rapier physics library. Have a play or view the code.

Using vector flow fields to create nice patterns. A webGL sketch by made dividing the canvas into a grid, and then assigning a noise value to each grid cell based on its position. This noise value is then set as the angle that each particle is pushed in when it enters the cell, producing this rather pleasing effect. Try it here

Programming vehicle behaviours in three.js. After watching Daniel Shiffman’s (AKA The Coding Train) series on vehicles / boids, I reimplemented these behaviours in three.js. Check it out.

Making 2D sprite maps work in 3D spaces in react-three/fiber. After experimenting with a lot of trigonometry, I managed to use the angle from the camera to the three.js mesh to select a frame in a sprite map. Sprite map from here.