This template repo provides a compact, ready-to-go scaffolding for generative art projects aimed at the fx(hash) NFT platform/marketplace.
The template evolved over time and has served as basis for some of the author's own NFT projects. The template is aimed at TypeScript (but can be easily adapted to plain JavaScript) and uses Vite as dev & build tool, ensuring an altogether great & speedy workflow with minimal fuzz.
(In the future, I'm aiming to provide an alternative version for more advanced hybrid projects using TypeScript, Zig and WebAssembly...)
Even though several packages from the thi.ng/umbrella ecosystem are used to provide various essential overarching functionality, the template is organized in such a way that the main parts are completely framework-agnostic. You should be able to easily plug in your own toolkit of choice, however I cannot guarantee to be able to provide support for this myself (though happy to accept PRs, also in terms of further docs, how-tos, guides etc.)
A tiny, fully documented throwaway example sketch is included, illustrating the following:
- Overall project structure & build commands
- FXhash related setup
- Static & dynamic configuration and state (re)initialization/handling
- FXhash PRNG wrapper & utilities
- Canvas & SVG conversion/export/download
- 2D geometry creation, transformation & drawing
- Basic vector algebra example usage
The best way is to dive into the source code and start reading the various detailed comments to get a better overview of the broad concepts used...
Note: Most of these packages list here each have a much wider remit than utilized here in this small demo project scaffolding...
Depending on which parts of the template you'll be keeping for your own purposes, some of these packages can be safely removed. Feel free though to check out some of the other 165+ projects in the thi.ng/umbrella monorepo (NOT a framework!)...
| Package | Role in this template |
|---|---|
| @thi.ng/adapt-dpi | Configure canvas for HDPI displays |
| @thi.ng/api | Useful common & shared type definitions |
| @thi.ng/date | Timestamp formatter for media downloads |
| @thi.ng/dl-asset | Canvas & SVG export/download |
| @thi.ng/expose | Conditionally expose vars during dev only |
| @thi.ng/geom | 2D geometry swiss army knife & SVG conversion |
| @thi.ng/hiccup-canvas | 2D canvas shape drawing |
| @thi.ng/pixel | Canvas & context creation |
| @thi.ng/random-fxhash | fxhash PRNG wrapper & utils |
| @thi.ng/resolve-map | Graphbased config & state initialization |
| @thi.ng/transducers | Iteration & data transformation |
| @thi.ng/vectors | nD Vector algebra |
Please consult the GitHub documentation for how to get started with template repos. Once you got it cloned locally, proceed as follows:
# git clone ...
cd <path-where-you-cloned-this-tpl>
# download all dependencies (can also use npm)
yarn install
# start dev server & open in browser
yarn startVite (the build tool used here) wraps Rollup to bundle all sources & referenced assets for production. Furthermore, all unused code will be removed and the template is configured to also minify the included HTML wrapper and CSS stylesheets.
# create production build
yarn build
# same as build, but also creates a ZIP file for FXHash upload
# ZIP file will be placed in /dist subdir
yarn bundle
# preview production build (for local testing)
yarn previewPlease consult the Vite docs for further information and configuration options...
IMPORTANT NOTE: Due to fxhash-website#246 the FXhash sandbox currently doesn't properly deal with ESM module scripts and cannot preview your project. However, the generated ZIP can be tested via the initial stage of the Mint Generative Token wizard on the FXhash website...
If you find this template useful and would like to financially support my open source work, please consider taking part in the NFT fundraiser or a small donation via GitHub, Patreon, Tezos or, last but not least, via your next fx(hash) mint...
🙏😍
This project is licensed under the MIT License. See LICENSE.txt
© 2022 Karsten Schmidt