abstract
vanillajs
threads
On Differential Threads

On Differential Threads

written by Blase

29 Feb 202435 EDITIONS
0.65 TEZ

For this collection, I thought of mechanical repetition. Self-contained, irregular bursts of movement that always start from around the same Upper left corner. Like wiggling a pen on paper, without much planning except not to bleed from the outlines (although it's fine if it does).

project name project name project name

After a couple experiments with this type of arrays and shapes I started getting a sense of its potential as a collection.

Like making choices, that unravel into a million of different paths and possibilities. In this cases, the starting point is also the endpoint, bringing the motion full circle. As I ramped up the number of points and fragments, outputs were ranging from minimalistic to chaotic shapes, twisted and often inverted.

The amount of detail I see in each output remains a good surprise to this date. I set a higher maximum number of fragments only a few hours before minting. In retrospect it feels like a reckless move but it did enable some interesting surprises.

And I find it so interesting to see now how distinctive some iterations have been coming out, regardless of the amount of points and subsequent fragments.

DIRECTION AS FEATURES

The ‘X,Y Direction’ feature determines the orientation in which the filling texture will be drawn. It has a very important effect overall, as it shapes movement, creating tension or illusion of depth. When x=0 usually there’s an interesting illusion of depth:

project name project name project name

I learned some key concepts from Matt Perkins writings on generative brushes and Paths. From those ideas, generously shared and broken down step by step, I was able to understand how to get started on adapting the physicality of materials I enjoy into functions that can be used recursively and interchangeably between projects.

Output saved without smoothing
Output saved without smoothing
very likely to implement this dark version into another project, maybe a continuation?
very likely to implement this dark version into another project, maybe a continuation?

Storing coordinates into arrays and using them as paths and clipping masks enabled me to play around with different textures for each set of shapes.

const fillCDotsTrails = (path, offX, offY, lines, scale) => {
  f.save();
  const mat = new DOMMatrix()
    .translate(scale, scale)
    .scale(scale, scale);

  const region = new Path2D();
  region.addPath(path, mat);
  f.clip(region, "evenodd");
  wLin(points, lWidth, offX, offY, lines);
  f.restore();
};

While normalizing the vectors and scaling the paths help a great deal with responsiveness:

const createPathfromPoints = (pointsArray, smoothI,) => {

  points = chaikinSmooth(pointsArray, smoothI);

  let region = new Path2D();
  let pathIndex = 0;

  region.moveTo(points[pathIndex][0] * cw, points[pathIndex][1] * ch);

  for (let i = 1; i < points.length; i++) {

    let point = points[i];
    region.lineTo(point[0] * cw, point[1] * ch);
    // f.fill(region, "nonzero");
  }
  region.closePath();
  paths.push(region);
  // points = [];
  return paths

}

I’m a big enthusiast of high resolutions, and believe that today we are unfortunately surrounded by highly compressed formats , packaged for streaming or meant to save on bandwidth costs.

It's a true privilege to enjoy many, many pixels coalescing in their original state. I set an initial resolution of 2400x2400px aiming for a balanced initial perfomance. Less than that was usually a bit too rough but more would draw on weak devices.

717 pixels (left) vs 4068 pixels (right). Take your pick. I actually like both.
717 pixels (left) vs 4068 pixels (right). Take your pick. I actually like both.

Resolution can be multiplied up to 6 times by pressing keys 2 thru 6 on the keyboard, resulting in a new render with resolution up to 14400x14400px.

Over time, a tired brain started recognizing forms, objects, animals:

a parrot and some fish? or birds
a parrot and some fish? or birds
butterfly?
butterfly?

And after many times imagining a dot somewhere along the test runs, I wrote a function to draw dots. I figured someone would eventually find out but oh well

if (event.key === "d") {
    let rad = 10 * dScale;
    drawDot(dots, rad);
  }

When clicking anywhere inside the canvas, coordinates are captured. Pressing “D” calls the drawing function, rendering a dot. I left these functions in as an invitation for interaction. For this work to be taken somewhere else, a place where abstract forms meet figures of imagination.

A gallery featuring a selection of outputs is accessible via Anaver.se: Thirty Different Threads

It displays 31 iterations organized by similarities, number of fragments and X, Y direction.
It displays 31 iterations organized by similarities, number of fragments and X, Y direction.

Any questions or commentaries, feel free to reach out on twitter or email: bla.se@icloud.com. I've been writing & sharing more about my work here: www.b1ase.com

stay ahead with our newsletter

receive news on exclusive drops, releases, product updates, and more

feedback