HEX

This project is an attempt to visualize the blockchain. NFTs, and cryptocurrency in general rely on hash strings within the transaction ledger. Much like an IP address this specific code is linked to a specific block on the chain. These are typically a string of 66 characters. For Ethereum, it looks something like this:

0x11ac128f8b54949c12d04102cfc01960fc496813cbc3495bf77aeed738579738

Interestingly, hexadecimal code like this can be easily converted into colors. Typical hex colors look like this:

This program is essentially breaking up this initial string of hexadecimal characters into ten groups. Each with six digits. Here’s the example above broken up into the ten groups, with the colors of their corresponding hexadecimal codes:

We can also convert these groups into single numbers. Using their RGB codes we can average their values. The math to do this is a little complex, however you can find a great converter online. Basically we're taking each pair and averaging them:

(R + G + B) / 3 = Averaged RGB Value.

This sequence would now look like this:

The Code

Processing

import processing.svg.*;

// Brandon A. Dalmer 2022
// Generative Noise Map [blockchain] - processing
// example hash "0x11ac128f8b54949c12d04102cfc01960fc496813cbc3495bf77aeed738579738"

int editionMax = 666;
String hash = "0x1626fddc1ea6ce7f2bfd337269f4f3c18533a4435b1fa95e486b243260d6e5bc";
int[] valueArray = new int[hash.length()/2]; // 30
int[] greyPack = new int[10];
float zoff[] = new float[2];
boolean single = true;
boolean record = true;


void setup(){
  size(1800, 825);
  background(255);
  noLoop();
  
  // hash info into an array
  int arrayNum = 0;
  hash = hash.substring(2, hash.length()); // minus 0x from string
  for(int h = 0; h < hash.length(); h+=2){
    int value = hashVals(hash, h, h+2);
    valueArray[arrayNum] = value;
    arrayNum +=1;
  }
  
  // assign greys
  int grey = 0;
  for(int g = 0; g < valueArray.length-3; g+=3){
    greyPack[grey] = (valueArray[g] + valueArray[g+1] + valueArray[g+2])/3;
    grey+=1;
  }
}

void draw(){
  if(!single){
    if(record){beginRecord(SVG, "0x"+hash.toString()+".svg");}
      displayHash(width/2, 800, 20);
      int posX = 0;
      for(int p = 0; p < greyPack.length/2; p++){
        push();
        translate(posX, 0);
        drawStream(greyPack[p]);
        pop();
        posX += width/5;
      }
      posX = 0;
      for(int p = greyPack.length/2; p < greyPack.length; p++){
        push();
        translate(posX, 360);
        drawStream(greyPack[p]);
        pop();
        posX += width/5;
      }
    if(record){endRecord();}
  }
  else{
    int pick = 0;
    if(record){beginRecord(SVG, "0x"+hash.toString()+"["+pick+"]"+".svg");}
    push();
    translate(100, 50);
    drawStream(greyPack[pick]);
    displayHash(0, 450, 10);
    pop();
    if(record){endRecord();}
  }
}


////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
void drawStream(color seed) {
  stroke(seed);
  strokeWeight(1);
  noiseSeed(seed);
  float nx = 0;
  for (int i= 0; i < width/5; i += 10) {
    float ny = 0;
    for (int j= 0; j < width/5; j += 10) {
      float angle = map (noise (nx, ny), 0, 1.0, 0, 4*PI);
      float x = 50 * cos (angle);
      float y = 50 * sin (angle);
      line (i, j, i+x, j+y);
      ny += 0.005;
    }
    nx += 0.005;
  }
}


void flowField(color fill){
  int var = 6;
  strokeWeight(3);
  int cols, rows;
  float inc = 0.09;
  PVector v;
  cols = floor(width / var);
  rows = floor(height / var);
  float yoff = 0;
  for(int y = 0; y < rows; y+=2){
    float xoff = 0;
    for(int x = 0; x < cols; x+=4){
      //float angle = random(0, PI)/scl;
      float angle = round(noise(xoff, yoff, zoff[1]) * TWO_PI /var);
      noiseDetail(3, 0.5);
      //float angle = noise(xoff, yoff, zoff) * TWO_PI;
      //float r = noise(xoff, yoff) * 255;
      v = PVector.fromAngle(angle);
      xoff += inc;
      //stroke(colorPack[int(random(0, 2))]);
      //stroke(colorPack[int(random(colorPack.length))]);
      stroke(fill);
      push();
      translate(x*var, y*var);
      rotate(v.heading());
      line(0, 0, var+20, 0);
      pop();
      
    }
    yoff += inc;
    zoff[1] += 0.0005;
  }
}

// Display Hash
void displayHash(int x, int y, int size){
  fill(0);
  if(!single){textAlign(CENTER);}
  textSize(size);
  text("Hashcode: 0x"+hash.toString(), x, y);
  if(single){
    for(int i = 0; i < 3; i++){ 
      text("["+valueArray[i]+"]", x, y-20);
      x+=20;
    }
  }
}


// translate Hash to integers
int hashVals(String hashcode, int a, int b){
  String hex = hashcode;
  int val = Integer.parseInt(hex.substring(a, b), 16);
  return val;
}

// average value from array
int averageVal(){
  int average = 0;
  for(int h = 0; h < valueArray.length; h++){
    average += valueArray[h];  
  }
  average /= valueArray.length; 
  return average;
}

P5.js

// Some code

Global Settings

Hash - the hashcode used for the output. This should consist of a String of characters starting with “0x”.

Animation - true or false - allows the program to output individual frames instead of single files.

Setup

size - this can be any size, however 1000 pixels x 1000 pixels is suitable for most screens.

frameRate(24) - change this number only if animation is set to true. This will dictate the rate of frames.

Draw

This is where the program functions, it will loop through the hashcode information provided. Since these keys are deterministic — no two are the same. In a generative art context, this presents us with an amazing variable in which to base our code. In the past, random numbers have been used in everything from divination to modern computation. However, truly random variables are pretty hard to generate in a somewhat predictable way. Based on these supplied values the drawing functions below will generate drawings. In a sense these are digital prints, completely unique and deterministic from one another.

perlinNoise(fill) - In 1983, frustrated with the artificial look of modern computer-generated imagery, Ken Perlin developed the perlin noise algorithm for the Disney movie Tron. It serves, even to this day, as a useful and complex method of generating more realistic random numbers. If rendered two-dimensionally it creates smooth cloud patterns. These cloud patterns form the base layer to the drawing.

flowField(fill) - This will behave a lot like perlin noise. However it uses lines instead of pixel brightness to create this cloud-like look. In this case it uses a supplied number to slightly adjust the angle of this line. Over a larger picture plane it will begin to flow and move in breeze-like movements. This forms the first layer.

flowSlash(fill, seed) - Similar to the previous layer, flowSlash generates a line based perlin noise. However the lines are restricted to vertical, horizontal and 45-degrees. These are then colored based on hash data. Forming the final layer.

displayHash() - This is strictly for diagnostic purposes. It will display the supplied hash string with the ten groups displayed as colored blocks and their greyscale counterparts. I find this helpful for color matching with paint or for a helpful reference. It also shows if the hash code is being processed correctly.

Hex Math

The first of the two equations here parse hexadecimal code into integers. Converting #FFFFFF to 255, 255, 255 for example. This is fundamental for the rest of the code to utilize. The second equation simply averages these integers into a single number. Forming the seeds for generative outputs.

Output

0x1626fddc1ea6ce7f2bfd337269f4f3c18533a4435b1fa95e486b243260d6e5bc

Here’s a few examples of the above hash. Visualized through the Draw functions:

#0x[[160x16]]26fddc1ea6ce7f2bfd337269f4f3c18533a4435b1fa95e486b243260d6e5bc

#0x160x1626fddc1ea6ce7f2bfd337269f4f3c18533a4[[435b1f]]a95e486b243260d6e5/bc