Unique Editions

Thumbnails

Currently thumbnails will all look the same. We are working on a service to fix this.

Best practice

It is best practice to use the seeded project implementation when making editions unique. As it allows collectors to choose the seed on mint.

Making each edition unique is possible by reading the animation_url via the URLSearchParams API.

Pre-determined

In this example the edition animation_url would have a "query string" containing /?seed=1 and the project would have an editionSize of 5

// create a url with the window location
const url = new URL(window.location.href)

// get the seed number
const seed = url.searchParams.get("seed")

// throw an error if the seed is out of bounds
if(seed < 1 || seed > 5) throw "seed does not exist"

// a list of 5 greeny colors
const colors = [
  "#CAD2C5"
  "#84A98C"
  "#52796F"
  "#354F52"
  "#2F3E46"
]

// using seed as an index
// get the color for this edition
const editionColor = colors[seed - 1]       // returns "#CAD2C5"

// do something with the color...

Running this code with different seed values in the url will result in different edition color.

seed url param	result
/?seed=3	"#52796F"
/?seed=5	"#2F3E46"
/?seed=10	error "seed does not exist"
/	error "seed does not exist"

Random

Another way to generate values is by using seeded randomness.

We can use the seed to produce seeded randomness. (a random function that produces a sequence of random values between 0 and 1. Given the same seed the resulting sequence will be the same.

We can use these two cryptic looking functions to generate randomness

// hashes the input string resulting in outputs with good entropy
function xmur3(str) {
  for(var i = 0, h = 1779033703 ^ str.length; i < str.length; i++)
    h = Math.imul(h ^ str.charCodeAt(i), 3432918353),
    h = h << 13 | h >>> 19;
  return () => {
    h = Math.imul(h ^ h >>> 16, 2246822507);
    h = Math.imul(h ^ h >>> 13, 3266489909);
    return (h ^= h >>> 16) >>> 0;
  }
}

// returns a function that returns a random number between 0 and 1
// the sequence is always the same with the same inputs
function sfc32(a, b, c, d) {
  return () => {
    a |= 0; b |= 0; c |= 0; d |= 0;
    var t = (a + b | 0) + d | 0;
    d = d + 1 | 0;
    a = b ^ b >>> 9;
    b = c + (c << 3) | 0;
    c = c << 21 | c >>> 11;
    c = c + t | 0;
    return (t >>> 0) / 4294967296;
  }
}

putting them together

// seedPhrase is an optional input to make your resulting sequence different to other projects.
function createSeededRandomness(seed, seedPhrase = "a not so random phrase") {
  const hash = xmur3(`${seed}-${seedPhrase}`)
  return sfc32(hash(), hash(), hash(), hash())
}

Using createSeededRandomness in the code to generate a position

?/seed=1

// get the seed
const url = new URL(window.location.href)
const seed = url.searchParams.get("seed")

// create seededRandom function
const seededRandom = createSeededRandomness(seed)

// create a seeded co-ordinates
const x = seededRandom()      // 0.9634711807593703
const y = seededRandom()      // 0.6875329685863107
const z = seededRandom()      // 0.7539224131032825

const position = {x, y, z}

// do somthing with position

Add a seed phrase

The createSeededRandomness function takes a seed phrase as an optional input. Use this to change the sequence of outputs.

You could use your projects name or anything you like.

const seededRandom = createSeededRandomness(seed, "your seed phrase goes here")

Without this all projects will be generated from the same sequence of random numbers.