h3p.deconcept.com Open in urlscan Pro
2606:4700:3037::ac43:bc23  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Hash Three Points

Home Gallery


Hash Three Points is a long-form generative art project by Geoff Stearns on the
Tezos blockchain. Each NFT contains a pseudorandom number which was generated
on-chain at mint and stored in on-chain metadata. The contract metadata contains
a p5js script which when combined with the NFT hash and the p5js library will
render the artwork.

The algorithm is a recreation of an interactive project I created using
Macromedia Flash in 2001. In its original form, the user viewing the artwork was
invited to "click three points" and the artwork rendered an image based on the
cooridinates of those clicks. This allowed the user to generate a broad array of
aesthetically pleasing patterns with small changes in the click locations.

All 1024 Hash Three Points have been minted.

Browse the secondary market on objkt.com.

THE ARTWORK

Hash Three Points is a collection of 1024 unique NFTs which reimagines the above
referenced "click three points" project using modern "Web3" tools. When each NFT
in the collection was minted, a psuedorandom hash was created using the name of
the edition (ex: "Hash Three Points #0") and the timestamp of the Tezos block in
which the mint transaction occurred. The hash is stored on-chain in the contract
metadata along with a copy of the p5js code needed to render the artwork in a
browser.

Each hash is 32 bytes long and looks like this:

0x943d47fc64223907129e55444f71ee0f10247eaa83c0b72a1edb4936c074e437

When combined with the rendering code (and the p5js open source library), you
get something like this:

Hash Three Points #315

The rendering code uses values from the hash to generate the visual aspects of
each unique edition. The color palette, the shape of the repeated patterns, the
angle, and amount of reptition are all controlled by this value. The algorithm
itself simply repeats a shape while shifting the location, rotation, and size.
Finally, three coordinates are generated from parts of the hash and these
"points" determine the angle and placement of the shapes.

SHAPES

At the core of each edition is a shape generated from values pulled from the
token hash. Sometimes these shapes have an outline, and sometimes there is no
outline so the colors seamlessly blend together.

Example shape
Example shape

These shapes create the base of the artwork and are rotated, resized, and
repeated to create the swooping and spiraling shapes you see throughout the
collection.

Example 'movement' of a simple shape

COLORS

There are 15 color palettes and each may be selected with equal probability.
Each palette was hand-selected by me and drew inspiration from various ideas and
themes.

Sonoran Sunset (#1013)
Wasteland (#827)
Mint (#359)
Earth (#998)
Spring (#111)
Monochrome (#559)
Vaporwave (#83)
Safford (#703)
Bone (#227)
Hunter (#612)
Rose (#133)
Ketchup and Mustard (#631)
Rocketpop (#635)
Viva la vida (#56)
Kanagawa (#645)

The default background color is the eggshell color you see most often above, but
some palettes always use a background color from the palette. In rarer cases,
any palette may have a background color from the palette instead of the default
color.

SIZE & SHAPE

As mentioned above, the position, size, and angle of repetition are also derived
from the token hash. In some cases, the repetition is centered which often
results in a spiral or snail shell-like shape. Sometimes the distance between
repetition is more extreme, causing the shapes to flow across and off of the
canvas.

Because the artwork is dynamically created, there can be subtle changes in the
form and shape at different canvas sizes (such as thumbnail vs. full size
views). Initially I treated this as a bug, but after some consideration, I've
come to appreciate the behavior as it highlights the project's generative
nature. I encourage owners to view their editions at varying canvas sizes to see
the subtle changes.

Please browse the gallery to see all of the editions and get a feel for the
variation the algorithm creates. I've greatly enjoyed flipping through the
hundreds (maybe thousands!) of test renders while tweaking the algorithm to get
things just right for this collection.

THE ORIGINAL CLICK THREE POINTS

If you'd like to see the original Click Three Points artwork, visit the website
from 2003--note that you'll need a working Flash player plugin: I recommend
Ruffle.

COLOPHON

The project is comprised of multiple parts:

 1. A contract on the Tezos blockchain. The contract is a fork of the Smartpy.io
    FA2 template. The contract address is listed at the bottom of each page of
    this site. The metadata follows the TZIP-21 metadata standard.
 2. An HTML + JS renderer that uses p5js to render the works (view on Github).
 3. A web UI (this website) that interacts with the contract to enable minting
    and viewing of the NFTs in the collection. This site was created using Nuxt
    with the Veutify package and is statically generated.
 4. To support better compatibility with wallets and NFT marketplace sites,
    after each NFT is minted a png of the work is rendered and pinned to IPFS
    and a set of attributes or "features" is and added to the NFT's on-chain
    metdata. Once all editions have been minted in the collection the metadata
    updater admin account access will be revoked.

I'd like to acknowledge a few other artists and projects that helped shape this
one: artblocks.io for showing us what's possible, especially the Fidenza and
Ringers projects. Tyler Hobbs also wrote a fantastic essay on "long form
generative art" that is a must-read if you are interested in generative art
projects like this one. There are a lot of parallels between these long-form
projects and early interactive internet art. As artists you want to give users
enough guardrails to steer them towards the visuals you want them to see while
playing with your works, but you don't want to leave it so open that they get
poor results or that it takes too many specialized instructions to get a good
result.

Contract address: KT1Fxz4V3LaUcVFpvF8pAAx8G3Z4H7p7hhDg

Note: This contract has not been independently audited, please use at your own
risk.