Vector Brawl

Thu, 01 Jan 2026 00:00:00 -0500

Vizz.fm

Wed, 01 Jan 2025 00:00:00 -0500

Startup List

Sun, 01 Jan 2023 00:00:00 -0500

Postgres Monitor

Sun, 01 Jan 2023 00:00:00 -0500

Cryptocurrency Alerting Mobile Apps

Wed, 01 Jan 2020 00:00:00 -0500

zParticle - Realtime 3D Particle Clouds from Static Images

Wed, 28 Nov 2018 00:00:00 -0500

zParticle is an app that converts arbitrary images into 3d particle clouds. It runs in the browser and leverages three.js along with some basic shader code. The z-coordinate of each point is based on the corresponding pixel color from the source image. With a decent GPU, it can render at least 10 million points at 60fps right in your browser. If the framerate is low, increase the “pixel skip” value to reduce the number of points rendered on screen. Check it out:

Launch zParticle

While it’s a lot more fun to play with the app directly, I’ve included some examples of an input image (left) and their corresponding particle clouds (right).

in motion

These gifs have rather huge file sizes. Hang in there.

All the images on this page use original artwork that I’ve previously made. There’s a certain satisfaction in remixing my own content. Within the app, however, I’ve also included images from a number of other digital artists to demonstrate how different visual styles manifest under this technique. Credit goes to Matt Mills, Matt Desl, Rik Oostenbroek, Saskia Freeke, Uon Visuals, Hyperglu, Hoodass, and Peder Norrby.

To those interested, I explain how to implement the effect below.

extracting pixel data

var image = document.createElement("img");
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var imageWidth, imageHeight, imageData;

image.src = "path/to/image";
image.crossOrigin = "Anonymous";
image.onload = function() {
  imageWidth = canvas.width = image.width;
  imageHeight = canvas.height = image.height;

  context.fillStyle = context.createPattern(image, 'no-repeat');
  context.fillRect(0, 0, imageWidth, imageHeight);

  // this is your raw image data
  imageData = context.getImageData(0, 0, imageWidth, imageHeight).data;

  pixelsToGeometry();
  createPointCloud();
  window.requestAnimationFrame(update);
};

transforming pixel data

var pixels, vertices, colors;

function pixelsToGeometry() {

  pixels = imageWidth*imageHeight;
  vertices = new Float32Array( pixels * 3 );
  colors = new Float32Array( pixels * 3 );

  var color = new THREE.Color();
  var x = imageWidth * -0.5;
  var y = imageHeight * 0.5;
  var loc = 0, c = 0;

  for (var i = 0; i < imageHeight; i++) {
    for (var j = 0; j < imageWidth; j++) {

      color.setRGB(imageData[c] / 255, imageData[c + 1] / 255, imageData[c + 2] / 255);

      var weight = color.r * 0.33 + color.g * 0.33 + color.b * 0.33;

      vertices[loc]     = x;
      vertices[loc + 1] = y;
      vertices[loc + 2] = (100 * -0.5) + (100 * weight);

      colors[loc]     = color.r;
      colors[loc + 1] = color.g;
      colors[loc + 2] = color.b;

      loc+=3;
      c += 4;
      x++;
    }

    x = imageWidth * -0.5;
    y--;
  }

}

creating a point cloud with three.js

function createPointCloud() {

  var container = document.getElementById('container');
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 100000);
  camera.position.z = 4000;
  camera.lookAt(scene.position);

  var renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  shaderUniforms = {amplitude: { type: "f", value: 0.5 }};

  var shaderMaterial = new THREE.ShaderMaterial({
    transparent: true,
    opacity: 0.8,
    uniforms: shaderUniforms,
    vertexShader: document.getElementById("vertexShader").textContent,
    fragmentShader: document.getElementById("fragmentShader").textContent
  })

  geometry = new THREE.BufferGeometry();
  geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
  geometry.addAttribute( 'vertexColor', new THREE.BufferAttribute( colors, 3 ) );

  geometry.attributes.position.needsUpdate = true;
  geometry.verticesNeedUpdate = true;

  particleSystem = new THREE.Points(geometry, shaderMaterial);
  scene.add(particleSystem);
}

animating it

function update() {
  window.requestAnimationFrame(update);

  shaderUniforms.amplitude.value = amplitude;
}

shader code

<script type="x-shader/x-vertex" id="vertexShader">
  uniform float amplitude;
  varying vec4 varColor;
  attribute vec3 vertexColor;

  void main() {
    varColor = vec4(vertexColor, 1.0);

    vec4 pos = vec4(position , 1.0);
    pos.z *= amplitude;

    vec4 mvPosition = modelViewMatrix * pos;

    gl_Position = projectionMatrix * mvPosition;
  }
</script>

<script type="x-shader/x-fragment" id="fragmentShader">
  varying vec4 varColor;

  void main() {
    gl_FragColor = varColor;
  }
</script>

I certainly didn’t invent this technique, but I do think it’s under utilized. I hope this project can help get the word out.

Cryptocurrency Alerting

Mon, 01 Jan 2018 00:00:00 -0500

A look at Harmonic Resonance found in Polar Equations

Fri, 22 Apr 2016 00:00:00 -0400

concepts & techniques

The examples on this page are derived from rather simple polar equations, such as Rose Curves and Cardioids. I’m simply graphing polar equations.
Stroke-dasharray and stroke-dashoffset are SVG properties that are incredibly fun to play with. They let you control and animate gaps along a given stroke path. I noticed that certain specific combinations of these properties appear to resonate into rather spectacular patterns that look surprisingly different from a plainly drawn curve. I re-implemented this in the Processing programming language in order to create frame-stable exportable renders.
Interpolation (aka Tweening aka Lerping) of the coordinates with their former selves (where they stood last frame) creates some very fluid animations that further distance their appearance from a plain old polar curve.
Noise. A bit of controlled randomness makes everything appear more organic.

close-ups

set to music

stills

lots more

Absurd Music Visualizations

Sun, 27 Mar 2016 00:00:00 -0400

I’ve begun a series of audio reactive music visualizations. They look like this:

Each entry uses audio data to help inform procedurally generated visuals in different (and hopefully novel) ways. Most computational artwork relies heavily on elements of randomness, such as perlin noise. I find that sampling audio data is a nice form of structured randomness. I hope you enjoy my synesthesia playground.

If you’re interested in collaborating lemme know!

how to watch

some tools i’m using

The Processing programming language (+minim for audio data).
Three.js & GLSL along with CCapture.
FFmpeg to stitch together frames and audio.
Gifsicle for batch GIF resizing.
Gramblr to upload videos to Instagram from my PC.

a few stills i’ve captured

Splat Operator

Fri, 25 Mar 2016 00:00:00 -0400

mathew preziotte