ARTWORK ARCHITECTUREHOW OUSIA IS BUILT

The structure of the artwork.

Ousia is built from a series of connected systems: source data, circle packing, sphere geometry, SVG preview, on-chain rendering, and owner controls. This page explains how each layer contributes to the final work.

From Punk to Ousia

Each artwork in Ousia is generated from the data of a CryptoPunk — its colors, its pixel count, and its ID. The Ousia contract retrieves this raw byte data directly from the CryptoPunks data contract, introduced by Larva Labs in 2021, and transforms it into a new on-chain artwork.

Three numbers are combined into a single seed, which unfolds into an entire universe of parameters — defining the structure of the artwork and the character of each element. Each pixel of the original Punk becomes a sphere — with its own form, its own density, its own motion. The seed also shapes the composition of the circle packing itself, so even how space is filled is unique to this Punk.

The colors come from the Punk's palette and are assigned across the artwork. The creators of CryptoPunks chose their colors in 2017 by intuition. Those choices settled into 221 values that now define the visual vocabulary of the entire collection. For Ousia, they become the source material from which a new form begins.

Fig. 01Creation
CryptoPunk · #4067
ID4067
Colors14
Pixels193
Palette
Seed formula
seed=ID×col×px
Sphere count193
From seedspeed · angle · type
density · structure
From palette14 colors
Ousia #4067 — Apollonian gasket artwork
Ousia · #4067
Mathematics

Each Punk provides the raw material: colors, pixels, and an ID. The challenge was turning that data into a structure capable of generating 10,000 artworks.

To place hundreds of spheres inside a circle — each touching three others, none overlapping, filling the space to a precise count — is the problem of circle packing. A problem first posed by Apollonius of Perga in the 3rd century BCE, solved by Descartes in 1643, forgotten, rediscovered twice in the 19th century. In 1936, Frederick Soddy, a Nobel laureate in chemistry, was so captivated by its geometry that he published it in Nature as a poem — The Kiss Precise.

The first circle is the canvas itself. The second is placed using the punk's seed — its radius and angle determined by that single number. The third follows from the geometry of the first two. From this triplet, the gasket takes over. Given three mutually tangent circles, there is exactly one circle that fits inside the gap between them.

The position and size of every new circle are computed through Descartes' theorem extended to complex numbers, which yields the precise coordinates of each new circle. Every placement is a mathematical consequence of what came before. To ensure the sphere count matches the pixel count exactly, the algorithm tracks the total continuously.

Once the structure is complete, a second algorithm, using spherical coordinates, gives each sphere its surface geometry and motion — tracing parallel rings with an angular offset or following a sinusoidal path along the sphere's curvature. Every detail follows from the same seed.

Fig. 02Construction
01 Apollonian gasket — initial triplet of three mutually tangent circles
4 Circles the starting point
02 Apollonian gasket at 100 circles — structure emerging
100 Circles structure emerging
03 Apollonian gasket at 193 circles — final, colored from the palette
193 Circles palette applied
04
Animated spheres in motion
On-chain

Every component of the artwork lives on the Ethereum blockchain. The p5.js v1.5.0 library is stored on-chain through EthFS in compressed form, decompressed at render time via an on-chain gunzip script. This version of p5.js required a custom WebGL patch to render points correctly — a fix applied directly in the Ousia script.

The raw pixel data for each Punk is read directly from the on-chain CryptoPunks data contract, created by Larva Labs in 2021. The punk's data — colors, pixel count, and ID — is injected directly into the script at render time.

ScriptyBuilder, an on-chain HTML assembly tool, combines the p5.js library and the Ousia script into a single self-contained page — assembled on demand, stored in the token's animation_url and renderable in any browser.

The Ousia contract stores the palettes and pixel counts for all 10,000 Punks via SSTORE2. The dataset of 221 unique colors, along with each Punk’s palette and pixel count, was uploaded directly to the blockchain. This data surfaces in each token's on-chain metadata — returned by tokenURI as color count, pixel count, and full HEX palette — and is queryable by anyone via getPunkData(tokenId).

Ousia was built around one idea: the artwork survives everything — including the platforms that display it today. The contract exposes getHTML(tokenId) — a method that returns the complete, self-contained HTML of any artwork directly from the blockchain, ready to save and open in any browser.

Fig. 03Architecture
This diagram is best viewed on desktop.
Setup
Render
Output
through renderer
direct from contract
hexData
owner
uploadColorsTable()
uploadPunksData()
CryptoPunks dataraw pixel bytes
token owner
setCanvasSize()
setShowPunk()
setShowSphere()
Ousia contractERC721 · SSTORE2 internal
EthFSp5.js + gunzip
ScriptyStorageOusia sketch
ScriptyBuilderassembles HTML
OusiaRendererSVG · HTML · JSON
tokenURI
animation_urlp5.js HTML
imageSVG preview
attributesColors · Pixels · HEX
getPunkData()colors + pixels
getHTML()standalone HTML
SVG Preview

Marketplaces like OpenSea display a static image in gallery views. For Ousia, that image is an SVG generated entirely in Solidity on-chain and stored in the token's image field.

The preview and the animation share the same seed and color palette — but produce different visual forms. Two readings of the same source Punk.

Generating geometry in Solidity means working without floating point, native trigonometry or square roots. Every angle is computed through precomputed sine and cosine tables hardcoded into the contract; every distance check uses squared values to avoid the cost of square root operations.

The algorithm works in three phases: anchors placed by color dominance, satellites grown tangentially from them, and gaps filled by proximity. The entire process runs in integer arithmetic.

Fig. 04Representations
Ousia #4067 — on-chain SVG preview
SVG Preview image · generated in Solidity
seed=ID×col×px
The Artwork animation_url · generated in p5.js
Owner Controls

While the artwork is fixed and permanent on-chain, each token owner has settings that shape how it appears. Owner controls are on-chain options — each change requires a transaction to the contract.

The first two settings are toggles — Show Punk and Show Sphere, both enabled by default.

Show Punk displays the original CryptoPunk sprite in the corner of the canvas. It keeps the source image in view, making the relationship between the Punk and the artwork explicit.

Show Sphere controls the glowing Apollonian gasket layer. It gives the artwork its dense, luminous character. When disabled, only sparse, geometric orbiting points remain.

Canvas Size controls the rendering resolution of the artwork. The default is 800×800, suitable for most screens. For large displays, TVs, digital frames, or projectors, the owner can increase it up to 4096×4096 by sending a transaction to the contract. The change is stored on-chain for that token.

Fig. 05States
Show Punk OnShow Sphere On
Show Punk OffShow Sphere On
Show Punk OnShow Sphere Off
Show Punk OffShow Sphere Off

The system is part of the artwork.

In Ousia, data, mathematics, rendering, and contract logic do not sit outside the work. They are the conditions that make the work possible. The artwork exists as a system: generated from Punk-derived data, shaped by geometry, rendered through code, and preserved on-chain.