BIT-101

Proximity Webs Across Point Sets

Background

I posted this animation on Mastodon today, as day 21 of Octanimate.

I didn’t think too much about it, but it got more likes than I expected, and quite a few comments or questions about what exactly was going on there. I threw out a few quick one line answers there but thought it might be worth more of an explanation.

It’s actually a pretty neat technique that I came up with just on a usual “what if…?”

Specifically, what if I did a proximity web not just on a single set of points, but on two sets of points. Even more specifically, I wouldn’t compare each point in a set to all the other points in the same set, but I’d compare each point in set A with all the points in set B. If they were within a certain distance, draw a line between the two points. And then move the points in each set around in some way.

Step by Step

1. First we take a grid of points. Pretty basic. These are 20 pixels apart on each axis.

2. Now we make another grid of points. Spoiler: it looks exactly the same as the first grid.

3. Now we rotate each grid, one clockwise, the other counter-clockwise (or anti-clockwise if that’s how you roll).

Already this is creating some interesting patterns. But let’s keep going.

4. Then, as described above, we’ll take each point in grid A and compare it to each point in grid B. If they are less than 28 pixels apart, we draw a line between them. The line’s width is inversely proportional to its length. Why 28? That’s roughly the square root of two times 20 (distance between points in each grid). So the connecting lines will almost but not quite reach across the diagonals when the grids are aligned. I figured more than that was a bit too busy, less was too sparse.

Again, this is creating an interesting pattern. But a bit too rigid for my taste.

5. Randomize each grid. In other words, move each point some distance in a random direction from its normal location. But not permanently. We’ll start with a regular grid, move each point out a ways, and then back.

6. And again, make two of these and have them rotate in opposite directions.

7. Finally, we go back to drawing the lines, and remove the points altogether, with a bit of blur to smooth it all out. And we’re back to the original

A Different Example

Interestingly, the previous day I’d posted a similar piece using the same basic technique. In this case the two point sets were quite different. One was a grid exactly as I showed here, the other was just a set of random points, being moved around with 4D Simplex noise. It looks like this on its own:

But when we apply the same technique to these two sets of points (with a max distance of 20), we get this:

To me this looks like some kind of alien writing. The caption I gave it when I posted it was “The alien encyclopedia contains all the knowledge of the universe. If only we could read it.”

I actually like this one a lot better than the dual grid one, but the dual grid piece got more interaction and questions. I guess you never know.

Source

The source for both of these is at https://codeberg.org/bit101/octanimate25 if you care to dive in a bit more.

Comments? Best way to shout at me is on Mastodon

Or share this post directly on Mastodon