qr code

BIT-101

Bill Gates touched my MacBook Pro

Proximity Webs


[ misc ]

I don’t think I ever actually wrote about this before, but I decided I probably should. It’s about a technique I call a “proximity web”. It’s something I first did about 23 years ago. I don’t recall seeing anything quite like it before, but I’ve seen it hundreds of times since then. I’ve seen it on posters, billboards, tv shows, movies, many web sites, music videos, etc.

Now I’m not going to be so bold as to claim that I invented this. But… I might have??? There is an old friend of mine who has since become pretty big in the generative art world. They once told me that as far as they were concerned, I invented it.

I can say that I came up with the technique on my own. But whether people copied me and eventually it became a thing, or whether someone else did it independently before or after me and others copied that person, I have no idea. All I know is that whenever I see it somewhere, I grin a little bit and internally take a bit of ownership.

For the record, here is a recording of a Flash movie I published on September 20, 2002:

This was the first time I used the technique. I did a bunch more similar things over the next week or so. Here are just a couple of examples:

I did a lot more of this over the next few years, but that’s the basic idea.

Here’s a quick example I just put together now while writing this. This is the kind of thing you’re most likely to see out in the wild. Sorry it doesn’t loop. I got lazy. But this is very much what I was posting in 2002 and 2003 and beyond.

Ignore the mechanics going on in those examples in terms of how things are moving around. The proximity web concept is just how they are connected. In short:

  1. There is a maximum connection distance between any two nodes.
  2. If the distance between two nodes is more than that, there is no connection.
  3. If the distance is at or below that threshold, the nodes will be connected with a line.
  4. The thickness of that line is inversely proportional to the distance between the nodes.

In other words, when the nodes are very close together, the line is very thick/bright/whatever. As the distance increases towards the maximum, the line gets thinner and lighter so that when it reaches the maximum it becomes zero width.

In pseudocode…

dist = distance(nodeA, nodeB)
if dist < maxDist {
  setLineWidth(1 - dist / maxDist)
  strokeLine(nodeA, nodeB)
}

In this case the thickness goes from 1.0 when the nodes are right on top of each other, to 0.0 when they are at maxDist away. But it’s simple math to change that to whatever range you want, or use it to define brightness instead of width or whatever else.

This is a really cool effect when animated because it’s like the connection is stretching as the nodes move apart, and finally breaks when it gets too thin.

Note well, I’m NOT saying I thought up the idea of connecting dots with lines. But this particular rendering effect where the nodes are floating around and the lines fade in and out based on proximity is rather unique.

Jump forward a few years to October 7, 2008. I posted something on my Art from Code site, called Lissajous Webs.

This used a Lissajous curve to create a large number of static points and connected them all with a proximity web. The huge number of connections made some really interesting textures.

Here are a few examples:

lissajous points connected by lines lissajous points connected by lines lissajous points connected by lines

The next day I threw some randomness into the Lissajous function and came up with Random Lissajous Webs

Again some examples.

randomized lissajous points connected by lines randomized lissajous points connected by lines randomized lissajous points connected by lines

These evoked a really mysterious look, which I loved to death. And others did too. In fact, if you search the term “Random Lissajous Web” you’ll find a few examples of this exact thing with, sadly, rarely any attribution. Even when the authors are using a license that requires others to attribute their work, they don’t attribute the technique they used - or even the name! Sigh. Some examples from as late as 2023.

https://openprocessing.org/sketch/1836813

https://openprocessing.org/sketch/1793237

On the plus side, I did get some attribution in the massive generative art book, Generative Design. When I say “massive” I mean it’s about two and a half inches thick and chock full of amazing work, examples and code. (Note, this was from an era before the word “generative” had been stolen by AI “creators”.)

There’s a whole chapter with webs based on my work. In fact they got my permission for this beforehand and I even got a free copy of the book, which was nice.

lissajous points connected by lines lissajous points connected by lines lissajous points connected by lines

Summary

I’m not complaining or looking for any big pats on the back. I’m not suing anyone even if I could. I’m not accusing anyone of ripping me off maliciously. I put my stuff out there as open source, often without a lot of thoughts on licensing. And a lot of people liked it and used it for a lot of things. I’m honored. All I’m asking is that if you see something like this out there in the world… give me a virtual fist bump, at least in your own mind!

And of course, if you do have some examples of this that predate 2002, I’d love to see them. It would crush my ego, but there’s not much of that left anyway.

« Previous Post

Comments? Best way to shout at me is on Mastodon

Or share this post directly on Mastodon