@nouns/assets

Development

Install dependencies

yarn

Usage

Access Planeteer RLE Image Data

import { ImageData } from '@nouns/assets';

const { bgcolors, palette, images } = ImageData;
const { bodies, accessories, heads, glasses } = images;

Get Planeteer Part & Background Data

import { getPlaneteerData } from '@nouns/assets';

const seed = {
  background: 0,
  body: 17,
  accessory: 41,
  head: 71,
  glasses: 2,
};
const { parts, background } = getPlaneteerData(seed);

Emulate PlaneteerSeeder.sol Pseudorandom seed generation

import { getPlaneteerSeedFromBlockHash } from '@nouns/assets';

const blockHash = '0x5014101691e81d79a2eba711e698118e1a90c9be7acb2f40d7f200134ee53e01';
const nounId = 116;

/**
 {
    background: 1,
    body: 28,
    accessory: 120,
    head: 95,
    glasses: 15
  }
*/
const seed = getPlaneteerSeedFromBlockHash(nounId, blockHash);

Examples

Almost off-chain Planeteer Crystal Ball Generate a Planeteer using only a block hash, which saves calls to PlaneteerSeeder and PlaneteerDescriptor contracts. This can be used for a faster crystal ball.

/**
 * For you to implement:
   - hook up providers with ether/web3.js
   - get currently auctioned Planeteer Id from the PlaneteersAuctionHouse contract
   - add 1 to the current Planeteer Id to get the next Planeteer Id (named `nextPlaneteerId` below)
   - get the latest block hash from your provider (named `latestBlockHash` below)
*/

import { ImageData, getPlaneteerSeedFromBlockHash, getPlaneteerData } from '@nouns/assets';
import { buildSVG } from '@nouns/sdk';
const { palette } = ImageData; // Used with `buildSVG``

/**
 * OUTPUT:
   {
      background: 1,
      body: 28,
      accessory: 120,
      head: 95,
      glasses: 15
    }
*/
const seed = getPlaneteerSeedFromBlockHash(nextPlaneteerId, latestBlockHash);

/** 
 * OUTPUT:
   {
     parts: [
       {
         filename: 'body-teal',
         data: '...'
       },
       {
         filename: 'accessory-txt-noun-multicolor',
         data: '...'
       },
       {
         filename: 'head-goat',
         data: '...'
       },
       {
         filename: 'glasses-square-red',
         data: '...'
       }
     ],
     background: 'e1d7d5'
   }
*/
const { parts, background } = getPlaneteerData(seed);

const svgBinary = buildSVG(parts, palette, background);
const svgBase64 = btoa(svgBinary);

The Planeteer SVG can then be displayed. Here's a dummy example using React

function SVG({ svgBase64 }) {
  return <img src={`data:image/svg+xml;base64,${svgBase64}`} />;
}