I don't like NFTs

I think they're rather dumb. Smarter folks than I have written at length¹ about how

• they're unable to solve the problem they're named for,
• they prove no meaningful ownership (a notion which is normatively, but not physically, conferrable – and normatively NFTs are right-clickable),
• they're energy-wasteful²
• they're the commodity of exploitative currency³
• and more

Harsh segue into me also stating that I harbor little to no misgivings towards artists trying break into the scene, stay relevant, or even make a quick buck in the ever-evolving market – that ire is reserved strictly for the bad actors and people in my mentions tagging me for giveaways. Additionally, I want to give explicitly positive credit to the fellow who inspired this post with his neat idea:

3 factorial pic.twitter.com/MpjFlPdp72

– Lars Wander (@larswander)

January 2, 2023

But... as his replies point out, it's not a novel idea⁴ nor algorithm⁵. Worth stating –not to detract from the value of artists' labor or anything of the sort– but rather to underscore that minting something like this as a Non-Fungible Token is pretty stupid.⁶ You can't patent geometry.⁷ Therefore, I took it upon myself, the Robin Hood of would-be NFTs to reverse engineer this factorial pattern, liberate it, and more...

Reverse Engineer

... that's what they call me at work, it's like being a negative 10x engineer 😎.

Let's first examine the problem and devise a game plan about how we can replicate these intertwining patterns.

For starters we need a list of elements we wish to permute; these might as well be the 1-indexed indices of the list.

Next, we need to generate all the permutations of a list: simple as.

Then, observing from both Lars' replies to the inquiries about how this pattern was achieved, the figures themselves, as well as some experience with leetcode medium problems, we'll want to perform a series of swaps which lead us from our initial configuration e.g. [1, 2, 3] to each of the desired permutations.

For example, referencing the 4th permutation of $3!$ above, we want to end with [2, 3, 1]:

 i j k
[1 2 3] -> [2, 3, 1]
        => [3, 2, 1] swap i, k
        => [2, 3, 1] swap i, j

To draw curves between points, it will probably be useful to keep track of this "state history" of sorts. This also implies that the height of each figure will need be proportionate to the minimum number of swaps needed permute the initial configuration into the target or vice versa. Analysis⁸ indicates that the worst case for a generic algorithm is a reversed array, or some equivalent –perhaps-odd-in-length– permutation. Such an array is said to be maximally fucked, and requires $n - 1$ swaps to be unfucked which is $O(n)$. So, the height of each permutation is proportionate to the number of elements in the permutation.

To keep the figures uniform in height which is aesthetically desirable, we'll need to pad this state history with duplicate rows. For example, [1, 2, 3] is both the initial configuration and the first permutation, but no-ops don't look pretty when plotted, so we'll draw out the path into repeating segments:

[
	[1, 2, 3],
	[1, 2, 3],
	[1, 2, 3]
]

so it doesn't look stupid when plotted adjacent to its neighbor [1, 3, 2] or [2, 1, 3] with longer state histories.

Once we've segmented each trace of a permutation, we need only connect the dots with fancy curves and we'll have successfully created a money printer bounded only by how many combinatorials your computer can handle.⁹

Daniel Shiffman is my Spirit Animal

True to form, we'll start with blank p5.js project.¹⁰ If you don't know about p5.js, look no further than The Coding Train for a heaping amount information on generative art, introductory coding, and much much more using the p5 library! Daniel Shiffman is the Bob Ross of technology.

// I copy paste the same handful of palettes between projects
// just make sure you have N colors in your palette, one for each strand
// i.e. this palette assumes we won't attempt 6!
let color_palettes = [
  ['#D63826', '#FFCC00', '#79C3A7', '#00bbff', '#5500FF'],
  // ... more palettes
]

let init // our initial configuration
let permutations // all our permutations thereof
let min_swaps // the length of init
let step // the space between each strand in a figure
let gap // the space between each figure

function setup() {
  createCanvas(800, 1100)

  init = [1, 2, 3, 4, 5]
  permutations = permutator(init)
  step = 10
  gap = init.length * 4 // scale based on the number of figures
  min_swaps = init.length
}

function draw() {
  background(220) // adjust the darkness so bright colors have nice contrast
  noFill() // since we're just drawing lines
  strokeWeight(2) // so the lines have some thickness

  // code will go here momentarily

  noLoop() // animation is left as an exercise to the reader
}

// permutation function taken graciously from StackOverflow
const permutator = (inputArr) => {
  let result = []

  const permute = (arr, m = []) => {
    if (arr.length === 0) {
      result.push(m)
    } else {
      for (let i = 0; i < arr.length; i++) {
        let curr = arr.slice()
        let next = curr.splice(i, 1)
        permute(curr.slice(), m.concat(next))
      }
    }
  }

  permute(inputArr)

  return result
}

Next we need a helper function to create the trace or state history of swaps separating our initial configuration from the target permutation:

function createSegments(input, target) {
  // our result is an array of arrays, starting with *a copy* the initial config
  let res = [[...input]]

  // this is pretty much just a cannabalized selection sort
  for (let i = 0; i < target.length; i++) {
    // the state "row" we're going to append to the result is
    // just a copy of the previous state
    let curr = [...res[res.length - 1]]

    // for each element, if it's not in the target position
    if (curr[i] != target[i]) {
      // make one swap
      target_i = target.indexOf(input[i])
      ;[curr[i], curr[target_i]] = [curr[target_i], curr[i]]

      // append it to the result
      res.push(curr)
    }
  }

  // pad the result to the desired height with copies of the the solved state
  while (res.length < min_swaps) {
    res.push([...res[res.length - 1]])
  }

  return res
}

Then, back inside the draw loop, we want to:

Iterate over each possible permutation
	Generate each permutation's segmented trace
    	For each snapshot/row in a trace
        	For each strand/column in a row
            	Draw a curve connecting the current row to the previous row

an actual implementation of which can look something like this:

function draw() {
  background(220)
  noFill()
  strokeWeight(2)

  // for each permutation
  for (let i = 0; i < permutations.length; i++) {
    let target = permutations[i]
    let segments = createSegments(init, target).reverse()

    // for each "row" in a permutation (skipping the first, initial config)
    for (let s = 1; s < segments.length; s++) {
      let prev = segments[s - 1]
      let curr = segments[s]

      // for each column in a row
      for (let c = 0; c < prev.length; c++) {
        // color it accordingly
        stroke(color_palettes[0][init[c] - 1])

        // this looks gross, but just wraps the figures to a new line
        let x1 = prev[c] * step + (i % (2 * init.length)) * 3 * gap
        let x2 = curr[c] * step + (i % (2 * init.length)) * 3 * gap

        let h_pad =
          step + floor(i / (2 * init.length)) * (init.length - 1) * gap
        let y1 = h_pad + gap * s + floor(i / (2 * init.length)) * gap
        let y2 = h_pad + gap * (s + 1) + floor(i / (2 * init.length)) * gap

        // for straight lines, use: line(x1, y1, x2, y2)
        // we set the control points of a bezier curve (the inner 4 arguments)
        // to pull the curve inwards, towards the center of each figure
        bezier(x1, y1, x1, y1 + step, x2, y2 - step, x2, y2)
      }
    }
  }

  noLoop()
}

And there we have it, for all permutations of 3, 4, and most of 5 respectively:

Caveat Emptor – this code is messy, suboptimal, and doesn't even center the figures on the page, but it's perfectly acceptable for me since I'm just going to export it as an SVG and center it on piece of paper to be plotted.

Exporting from p5 to SVGs

By including the following SVG module in your p5 sketch's index.html,

<script src="https://unpkg.com/p5.js-svg@1.3.1"></script>

we can add the SVG argument to the createCanvas function to instruct the browser to render elements of the canvas as SVG curves which we can then save at the bottom of our draw loop, or on keypress, or some other triggering event:

function setup() {
  createCanvas(800, 1500, SVG)
  // ...
}

function draw() {
  // do stuff
  noLoop()
  save('factorial-' + init.length + '.svg')
}

which will save the curves to the desired output on page refresh which can then be imported into your favorite plotting software and plotted right away.

praxis

If you like these, I'd be happy to funge you one. Email or message me a mailing address and I'll send one to you at the cost of shipping (~$11) – I will not accept crypto.

Alternatively, make your own! Here's the complete source code.

Foonotes & References

While I don't endorse each and every critique raised in this post, it's more or less the de facto glossary of why NFTs are stupid.

Again, feeling the need to chime in here with commentary. Energy use is not bad. Wanton energy use is not bad. But wanton energy use as proof of stake, work, etc. for signing of a transaction of an arbitrary (and it is arbitrary) address for a jpeg which I can replicate in an afternoon and funge a million of in a millisecond is bad.