let numHashes = tokenData.hashes.length; let hashPairs = []; for (let i = 0; i < numHashes; i++) { for (let j = 0; j < 32; j++) { hashPairs.push(tokenData.hashes[i].slice(2 + (j * 2), 4 + (j * 2))); } } let decPairs = hashPairs.map(x => { return parseInt(x, 16); });
let seed = parseInt(tokenData.hashes[0].slice(0, 16), 16); let color; let backgroundIndex = 0; let backgroundArray = [255, 225, 200, 175, 150, 125, 100, 75, 50, 25, 0, 25, 50, 75, 100, 125, 150, 175, 200, 225]; let index = 0; let ht; let wt = 2; let speed = 1; let segments; let amp = 1; let direction = 1; let loops = false; let startColor = decPairs[29]; let reverse = decPairs[30] < 128; let slinky = decPairs[31] < 35; let pipe = decPairs[22] < 32; let bold = decPairs[23] < 15; let segmented = decPairs[24] < 30; let fuzzy = pipe && !slinky;
function setup() { let portrait = windowWidth < windowHeight; createCanvas(windowWidth > windowHeight * 3 / 2 ? windowHeight * 3 / 2 : windowWidth, windowWidth > windowHeight * 3 / 2 ? windowHeight : windowWidth * 2 / 3); var el = document.getElementsByTagName("canvas")[0]; el.addEventListener("touchstart", mouseClicked, false); colorMode(HSB, 255); segments = map(decPairs[26], 0, 255, 12, 20); ht = map(decPairs[27], 0, 255, 3, 4); spread = decPairs[28] < 3 ? 0.5 : map(decPairs[28], 0, 255, 5, 50); strokeWeight(height / 1200); }
PUSH 10 times the spacebar
to black-out the background ;)
Chromie Squiggle #0
the [GENESIS](https://etherscan.io/tx/0xec39476d2cf54b44c43e17070257250dcb369c33941de978b4cbeebe7aa0907c)
CHROMIE
S
Q
U
I
G
G
L
E
S
CHROMIE
by Snowfro
Look at the
C O D E
⤥
This gallery is an ode to the colorful code of Chromie Squiggle! ♡ ENJOY ♡
DID YOU KNOW? Chromie Squiggles exist entirely on the blockchain. They aren't a pointer to a file on IPFS. It's an actual script built into the smart contract that executes the moment the mint transaction goes through. The script takes a seed input, in the form of a hash string...which is a long hexadecimal string or "hash string" generated on the blockchain in a pseudo-random manner when the token is minted. This seed is used to control a variety of different variables in each Squiggle. Each character in this string (0-9, a-f) represents a value from 0-15 and each pair of characters ("ab", or "f2") represents a value from 0-255. For example, the y-coordinate of each point in a Squiggle is dictated by the value of a hex pair in the seed. These pairs also control the starting color, rate of change of the gradient, amount of points in each Squiggle, plus some surprise features that make some Squiggles more rare than others. With so many different variables built-in to each Squiggle and such a large number of possible seeds, you could generate new Squiggles all day and never come up with the same Squiggle. However, once a seed has been set for a token, the resulting output will always be identical and repeatable. A verifiably deterministic output.
Even if every Squiggle is different from each other we can categorize them under 6 main such as ☞
normal
sLINKY
fuzzy
RIBBED
BOLD
PIPE
⇅ arrow to adjust speed of color rotation
shift + ⇅ to set speed velocity to max/min
1st variable!
But how color rotation works?
As Snowfro write in his website, there are 3 variables
that, in unison, control the colors and how they are dispersed across the length of a Squiggle. We can then use these 3 variables to determine how many color hues are actually shown on each Squiggle.
The simple formula is listed below:
Oooh look, three ↴ new variables!
What does it mean? ⇘ I'm still lookin 4 answers..
types
(color
spread, steps between, segments)
(segments * steps between) / color spread
//interaction on-off through mouse click
//increase color rotation speed to max
//press spacebar, change background
⮮ this is where the script EAT your tx hash, GNAM!
//decrease colour rotation speed
//here it start to choose which type the Squiggle will be
{
here the magic of code will determinate the color of your Squiggle!
If the combination results in aprox. 255 hues - JACKPOT! We got a PERFECT Squiggle, x/20 since now!
If the number of hues displayed comes within 1% of perfect we just minted a FULL SPECTRUM Squiggles - x/42 until now! Enjoy the rainbow🌈
SPECTRUM
soo many variables!
At the end of the spectrum are the HYPERRAINBOWs, Squiggles with an extremely small color spread (.5) - relative to a perfect spectrum Squiggle, color:step ratio is 22:1. That's a lot of color! x/125
WOW :D So clean!
Platinum Squiggle
Fuzzy Worm Squiggle
Lochness Squiggle
Fuzzy Snake Squiggle
Like the Ying & Yang, every Squiggle can find its balance ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯
Total White Squiggle
Total Black Squiggle
NORMAL
BOLD
SLINKY
RIBBED
FUZZY
PIPE
Honorable mentions:
This is my favorite! Turn the background black ;)
Ribbed HyperRainbows
Solid Color Squiggle
Pipe HyperRainbows
Fuzzy HyperRainbows
Bold HyperRainbows
Slinky HyperRainbows
PS: yeah, Perfect Spectrum Fuzzy are real! LOOK :)
"Simple and easily identifiable, each Squiggle embodies the soul of the Art Blocks platform. Consider each my personal signature as an artist, developer, and tinkerer."
Squiggles are a blue chip investment in the NFT space. The logo project, created by the benevolent founder of the most recognizable brand in generative art. If you didn't find your type, try (de)generate your own Squiggle HERE through the original script! Works with every word or number combination (even your wallet address)!
There is no doubt about it, Chromie
CREDITS TO: @0x6ixty - exlawyer.eth - mat
PS: did you know the most expensive Chromie Squiggle is #7583?
function draw() { color = 0; background(backgroundArray[backgroundIndex]); let div = Math.floor(map(Math.round(decPairs[24]), 0, 230, 3, 20)); let steps = slinky ? 50 : fuzzy ? 1000 : 200; translate((width / 2) - (width / wt / 2), height / 2); for (let j = 0; j < segments - 2; j++) { for (let i = 0; i <= steps; i++) { let t = i / steps; let x = curvePoint(width / segments / wt * j, width / segments / wt * (j + 1), width / segments / wt * (j + 2), width / segments / wt * (j + 3), t); let y = curvePoint(map(decPairs[j], 0, 255, -height / ht, height / ht) * amp, map(decPairs[j + 1], 0, 255, -height / ht, height / ht) * amp, map(decPairs[j + 2], 0, 255, -height / ht, height / ht) * amp, map(decPairs[j + 3], 0, 255, -height / ht, height / ht) * amp, t); let hue = reverse ? 255 - (((color / spread) + startColor + index) % 255) : (((color / spread) + startColor) + index) % 255;
if (fuzzy) {
noStroke();
fill(hue, 255, 255, 20);
let fuzzX = x + map(rnd(), 0, 1, 0, height / 10);
let fuzzY = y + map(rnd(), 0, 1, 0, height / 10);
if (dist(x, y, fuzzX, fuzzY) < height / 11.5) {
circle(fuzzX, fuzzY, map(rnd(), 0, 1, height / 160, height / 16));
}
} else {
if (slinky && pipe) {
if (i == 0 || i == steps - 1) {
fill(0);
} else {
noFill();
}
stroke(0);
circle(x, y, (height / 7))
}
if (slinky) {
if (i == 0 || i == steps - 1) {
fill(hue, 255, 255);
} else {
noFill();
}
stroke(hue, 255, 255);
} else {
noStroke();
fill(hue, 255, 255);
}
circle(x, y, bold && !slinky ? height / 5 : height / 13);
if (segmented && !slinky && !bold) {
if (i % div === 0 || i == 0 || i == steps - 1) {
noStroke();
fill(decPairs[25]);
circle(x, y, height / 12);
}
}
}
color++;
}
seed = parseInt(tokenData.hashes[0].slice(0, 16), 16);
}
loops === true ? index = index + speed : index = index;
if (keyIsDown(UP_ARROW)) {
if (keyIsDown(SHIFT)) {
if (speed < 20) {
speed++;
} else {
speed = 20;
}
} else {
if (speed < 20) {
speed = speed + 0.1;
} else {
speed = 20;
}
}
} else if (keyIsDown(DOWN_ARROW)) {
if (keyIsDown(SHIFT)) {
if (speed > 1) {
speed--;
} else {
speed = 0.1;
}
} else {
if (speed > 0.1) {
speed = speed - 0.1;
} else {
speed = 0.1;
}
}
}
}
function keyPressed() { if (keyCode === 32) { if (backgroundIndex < backgroundArray.length - 1) { backgroundIndex++; } else { backgroundIndex = 0; } } }
function mouseClicked() { if (loops === false) { loops = true; } else { loops = false; } }
function rnd() {
seed ^= seed << 13;
seed ^= seed >> 17;
seed ^= seed << 5;
return (((seed < 0) ? ~seed + 1 : seed) % 1000) / 1000;
}