Git Product home page Git Product logo

tpl-umbrella-fxhash's Introduction

fx(hash) x thi.ng project template

example project screenshot

About

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...)

The template is currently using the following version of the fxhash project sdk: 61ac228c

Framework agnostic

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.)

Example project

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...

thi.ng/umbrella packages 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/api Useful common & shared type definitions
@thi.ng/canvas Canvas creation & HDPI adaptation
@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/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

Getting started

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 start

Building for production

Vite (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 preview

Please consult the Vite docs for further information and configuration options...

Support / feedback

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...

🙏😍

Authors

License

This project is licensed under the MIT License. See LICENSE.txt

© 2022 Karsten Schmidt

tpl-umbrella-fxhash's People

Contributors

jffaust avatar nclslbrn avatar postspectacular avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

targz audionerd

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.