crypto-art-render
Magic render of crypto art.
Install
npm install crypto-art-render -S
or
yarn install crypto-art-render
Update
- Allow artwork with only 1 master layer.
anchor
always be type ofstring
, not controlled by tokens any more.
Master Config
Master config defines the rule of rendering for the artwork.
A typical config data structure is shown below:
- name - Artwork name.
- description - Artwork description.
- image - URI of artwork master.
- attributes - List of basic meta info.
- trait_type - Attribute key name Like
Artist
orLayer Count
. - value - Attribute value string.
- trait_type - Attribute key name Like
- layout - Layout of layers.
IntProperty
This type tells the property can be controlled by layer token or just a pure integer.
In typescript, we define:
type IntProperty = "token-id": number "lever-id": number or number;
- token-id - Control layer token id on chain.
- lever-id - Lever index of values from a layer token.
LayerOption
A layer option defines an option of a layer that token holder can choose.
-
uri - Layer resource URI, usually IPFS Cid of image.
-
label - Layer label.
-
anchor - optional. Anchor point id.
-
fixed-position - optional. Fix position of layer at the artwork.
- x (IntProperty)
- y (IntProperty)
-
relative-position - optional. Relative position of layer with the coordinate of the anchor layer.
- x (IntProperty)
- y (IntProperty)
-
fixed-rotation (IntProperty) - optional. Fix rotation degree.
-
orbit-rotation (IntPropery) - optional. Orbit rotation degree around the anchor provided by the layer.
-
mirror (IntPropery) - optional. Mirror transition. Value result will only be
0
or1
. -
visible (IntPropery) - optional. Is layer visible. Value result will only be
0
or1
. -
finalCenterX (number) - Not pre-defined. Final center coordinate x of layer. This property will be filled during rendering process.
-
finalCenterY (number) - Not pre-defined. Final center coordinate y of layer. This property will be filled during rendering process.
-
active (boolean) - Not pre-defined. Tell the layer can be used as anchor point or not.
-
color - Color scheme of layer
- red (IntProperty)
- green (IntProperty)
- blue (IntProperty)
- alpha (IntProperty)
- hue (IntProperty)
- multiply (IntProperty)
- lighten (IntProperty)
- overlay (IntProperty)
- opacity (IntProperty)
Layer
Inherit from LayerOption, with more fields like:
- id - Required. Layer id
- states - Optional. Multiple state options of layer.
- options
Array<LayerOption>
- list of layer option - token-id - Token that control the value of option index.
- lever-id - Lever index of values
- options
Please see a typical master config example.
Usage
Generator
Module generator
is used to generate artwokr config, define and fill necessary fields more easily.
Check out the API.
Initialize empty config
; const generator = ;// Initialize master config with basic infogenerator; // Set attributesgenerator; // Set fields in master configgenerator;generator;generator; console; // see `test/config_example/example1.json` const eosApi = ;// Initialize artwork on chain// Add config file init by `generator` to IPFS node.const configCid = "QmQRYre2kUKd3VW13CeY6zowwyK8RwXqbJxkjzpVS6cyrc";generator; // say master id is 1, layer token relative id is 1// the real layer token id on chaini is 1 + 1 = 2// Setup token on chaingenerator; // Update token on chaingenerator;
Render
Module Render
is used to render image from master config.
Check out the API.
; // Initialize render with ipfs loader, interacting with local IPFS nodeconst render = endpoint: "http://127.0.0.1:8080" ; // load master configconsole; // render imageconst masterTokenId = 0;const masterImage = await render;const compositeImage = await render; // Interact with result folloing the API of [Jimp](https://github.com/oliver-moran/jimp/tree/master/packages/jimp) await masterImage;await compositeImage; // Get current state of a artwork. It will return the hash of current// values from layer tokens.render;
Test
- Start a local IPFS node with http endpoint listening on
8080
. - Add all files in
test/config_example
to local IPFS network. - Start a local EOSIO network with http endpoint listening on
8888
; - Run
npm run test