React Gatsby static web tool for generative artists working on token based NFT artwork (ex: Artblocks)

Related tags

Learning resource tools creative-coding reactjs static-site generative-art
Overview

token-art-tools

React Gatsby static web tool for generative artists working on token/hash based NFT artwork (ex: Artblocks)

https://ctrlshiftmake.github.io/token-art-tools/

screenshot

Using the Application

Include this in the head of your index.html file

<script src="https://cdn.jsdelivr.net/gh/ctrlshiftmake/token-art-tools@main/providers/artblocks.js"></script>

Then use the token hash provided by that script to drive features in your artwork

var hash = tokenData.hash;

Host your generative artwork script via a local HTTP server, for example:

python -m http.server 5500

Paste the URL of your local server into the web application

http://localhost:5500

Have fun creating with the available features in the web application!

Projects Setup

Your index.html file must display your work within a single canvas tag for all features to work.

P5.js

Standard project setup should work.

THREE.js

Please set the following in your script for screenshots to work.

 renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });

Running App Locally

  1. Clone / fork repository
  2. npm install
  3. make run-server
  4. Open http://localhost:8000

Feature Suggestions & Bugs

Please create an issue in this repository if you have any suggestions or discover bugs.

Comments
  • get access to actively purge jsdeliver urls

    get access to actively purge jsdeliver urls

    Right now it takes days for the jsdeliver URL to update after a commit (they cache the scripts). Need to request access to the API that will force purge the cache so it gets the update immediately.

    status: Rejected type: Bug 
    opened by owmoxyz 4
  • improve

    improve "features" documentation

    Make improvements to the README and in-application documentation with regards to how to set up a "features" script within a project. There should be two main methods:

    Including it in the body of the HTML file as such:

    <html>
<head>
... stuff
</head>
<body>
    <script src="features.js"></script>
    <script>
        features = calculateFeatures(tokenData);
    </script>
    <script src="sketch.js"></script>
</body>

    Or, including it in the script JS file itself (to be removed later when deploying)...

    import calculateFeatures from './features'
features = calculateFeatures(tokenData)

    The second method would require the features script to export the function to make it accessible...

    export default calculateFeatures
    status: Completed type: Enhancement 
    opened by owmoxyz 3
  • Chrome blocking

    Chrome blocking "index.html"

    There was an update to Chrome which is causing iframes to block HTML files from being served to it. The following error is what needs to be resolved.

    crbug/1173575, non-JS module files deprecated.

    It's possible a simple local server using these files won't be allowable, in favour of using something like npm run dev but I want to look into it and see if there's a way to get it working.

    status: Rejected type: Bug 
    opened by owmoxyz 2
  • Force feature value to be a string for info panel

    Force feature value to be a string for info panel

    Hi! I was working on a project and set a feature value to an object instead of a string (it went from a hex code to a p5.Color). This REALLY upset the React component!

    I figured it would at least be better to have the features component render "Object [object]" than totally giving up on life. But I'm sure there are even more elegant solutions out there.

    Anyway, hope this helps!

    opened by csb324 2
  • question about setup canvas

    question about setup canvas

    I cannot figure out what this means: 'Your index.html file must display your work within a single canvas tag for all features to work.'

    Can you help? Do I make something like

    The examples I find show running createCanvas and then using parent to attach the canvas to a div. let cnv = createCanvas(100, 100); cnv.parent('myContainer');

    But this is not working for me.

    thank you

    status: Completed type: Question 
    opened by bardionson 2
  • pop-out iframe for viewing on second monitor

    pop-out iframe for viewing on second monitor

    Make the iframe viewer "pop out" so it can be resized / positioned however the user wants. This may end up being the desired UX rather than having it embedded in the page (leave a small embed to be popped out). This will allow for more room on the page as well, ideally.

    status: Completed type: Enhancement 
    opened by owmoxyz 2
  • Add a

    Add a "external_url" variable to the URL of the app to load the `URL` directly

    For example: https://owenmoore.github.io/token-art-tools/?url=https://mywebsite.com/myproject

    This would be helpful to simply load in an external resources (for review, sharing, etc.) in an easy to explore way. Might want to consider adding an optional seed hash as the starting point as well.

    Helpful for doing reviews, sharing / exploring via an external URL, doing reviews with AB, etc.

    status: Completed type: Enhancement 
    opened by owmoxyz 1
  • Add support for fx(hash)

    Add support for fx(hash)

    Ideally, try to generalize the solution given both ArtBlocks and fx(hash) both use hash-based randomization seeds. Maybe just set the hash range and number to match, then allow the user to select from a drop-down as to which token wrapper they want to use.

    status: Completed type: Enhancement 
    opened by owmoxyz 1
  • Bracketing comparison

    Bracketing comparison

    Having the ability to set the viewer in a "bracketing mode" which would allow the hash pairs (selectable? all?) to be bracketed by a given range. This way, on each generation you could preview what things look like to either side of a given set of features or parameters at once without needing to adjust sliders manually.

    An artist on ArtBlocks developed this in their own local test environment...

    image

    status: Rejected type: Enhancement 
    opened by owmoxyz 1
  • automate hash list

    automate hash list

    After releasing a project on-chain, artists sometimes like to provide high resolution PNG copies of the artwork for collectors to print. It would be great if the automation setup allowed for - instead of randomly generating - a method of providing a comma (or newline) separated list of hashes that it would use to cycle through. You could then choose to just generate images or create the CSV file in addition if you wanted to do some meta analysis after releasing.

    status: Rejected type: Enhancement 
    opened by owmoxyz 1
  • Support non-canvas works

    Support non-canvas works

    Screenshot doesn't work if someone is drawing to a div without a canvas (vanilla JS), using an ID in the provider may allow screenshot if whatever the artist targets.

    status: Rejected type: Enhancement 
    opened by owmoxyz 1
  • update deps

    update deps

    Should probably update the dependencies, do a bit of cleanup to reduce GH vulnerability warnings (even though it doesn't really matter, since it's not hosting anything important, just annoying to read)

    status: Accepted type: Bug 
    opened by owmoxyz 0
  • destroy command

    destroy command

    It would be nice to have a destroy command sent to the iframe before a new generation is created (slight delay). This would be helpful when automating, because the artwork could implement a cleanup function that helps reduce memory impacts between generations. Would probably need a slight delay, likely could wrap this into another ticket (capturing the idea for now)

    opened by owmoxyz 0
  • trigger features

    trigger features

    The script creating the art should trigger the image capture - via the connector script - rather than wait a certain amount of time.

    • Add a small buffer from when "image capture" is initiated to when the next artwork is triggered
    • Add an emitter that says "frame is done" so script with variable time to completion can be more efficient
    • Continue to allow entering a millisecond timing as an option (toggle between MS and Event, MS by default)
    status: Accepted type: Enhancement 
    opened by owmoxyz 0
  • Maximum drawingBuffer size

    Maximum drawingBuffer size

    Chrome has a limitation of 33177600 total pixels (5760 x 5760) as the maximum amount it can capture. The custom resolution picker needs to do a quick validation to ensure pixels are not exceeding this value, otherwise captured images will be clipped in strange ways. This might be only limited to WebGL... might need to test different libraries when designing a solution.

    https://chromium.googlesource.com/chromium/src/+/0781429bb10a95aae3c9eb3141fc47852cfe300a%5E%21/

    status: Accepted type: Bug 
    opened by owmoxyz 0
  • Features crash is undefined

    Features crash is undefined

    Put checks to make sure the values are Int, Float, or String. If anything else, do not display them.

    Ideally put some kind of error message indicating which one (using the key only)

    status: Accepted type: Bug 
    opened by owmoxyz 0
Owner
Owen Moore
artist • indiehacker • creator
Owen Moore
GitHub https://ctrlshiftmake.github.io/token-art-tools/
Gatsby-blog-cosmicjs - 🚀⚡️ Blazing fast blog built with Gatsby and the Cosmic Headless CMS 🔥

Gatsby + Cosmic This repo contains an example blog website that is built with Gatsby, and Cosmic. See live demo hosted on Netlify Uses the Cosmic Gats

Priya Chakraborty 0 Jan 29, 2022
Starter-gatsby-blog - Gatsby starter for a Contentful project from the community.

Contentful Gatsby Starter Blog Create a Gatsby blog powered by Contentful. Static sites are scalable, secure and have very little required maintenance

Priya Chakraborty 0 Jan 29, 2022
The new modern discord token grabber & token stealer, with discord password & token even when it changes

The new modern discord token grabber & token stealer, with discord password & token even when it changes

Stanley 143 Jan 6, 2023
Angular JWT refresh token with Interceptor, handle token expiration in Angular 14 - Refresh token before expiration example

Angular 14 JWT Refresh Token example with Http Interceptor Implementing Angular 14 Refresh Token before Expiration with Http Interceptor and JWT. You

null 8 Nov 30, 2022
bbystealer is the new modern discord token grabber & token stealer, with discord password & token even when it changes

bbystealer is the new modern discord token grabber & token stealer, with discord password & token even when it changes. Terms Educational purpose only. Reselling is forbidden. You can use the source code if you keep credits (in embed + in markdown), it has to be open-source. We are NOT responsible of anything you do with our software.

null 10 Dec 31, 2022
bbystealer is the new modern discord token grabber & token stealer, with discord password & token even when it changes. Terms Educational purpose only. Reselling is forbidden. You can use the source code if you keep credits (in embed + in markdown), it has to be open-source. We are NOT responsible of anything you do with our software.

?? Premium - ?? Builder - ?? Features Authors GhostyXD#0202 Rundeun#1337 Contributors Florin#5231 Kokto#3333 bbystealer The new modern discord token g

null 4 Mar 16, 2023
Gatsby-Formik-contact-form-with-backend-panel - Full working contact form with backend GUI panel.

Gatsby minimal starter ?? Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

Bart 1 Jan 2, 2022
This project is a Web application based on an external API. The API provides data about music (including artists, albums, etc) that users can access on-demand. This project was built with ES6, HTML and CSS and it is a SPA.

Capstone M2: Music App This project is a Web application based on the music API Napster built with ES6, HTML and CSS and it is a SPA. This API provide

Karla Delgado 12 Aug 29, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Build your own generative art NFT collection with 21 lines of JavaScript

Avatar Collection Build your own Generative Art NFT Collection in 1 minute. Quickstart Just run the following to get started: git clone https://github

rarepress 79 Dec 16, 2022
On-chain generative NFT collection

ETH Time ETH Time is a new NFT collection created to explore new ways of generating NFTs on-chain. It is inspired by existing projects such as Zora's

null 3 Feb 13, 2022
🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar

?? Epic NFTs [UI] El proyecto se encuentra deployado en Vercel para que puedan verlo e interactuar con él, toda crítica o comentario se agradece, pued

Braian D. Vaylet 17 Oct 22, 2022
Fullstack Dynamic NFT Mini Game built using 💎 Diamond Standard [EIP 2535] 🏃‍♀️Players can use Hero NFT to battle against Thanos ⚔ Heroes can be Healed by staking their NFT 🛡

?? Fullstack Dynamic NFT Mini Game ?? ?? Using Diamond Standard Play On ?? ?? ⏩ http://diamond-dapp.vercel.app/ Project Description ?? Fullstack Dynam

Shiva Shanmuganathan 21 Dec 23, 2022
NFT Marketplace framework to build standalone NFT marketplace or inApp/inGame NFT marketplace

NFT Marketplace This project is a decentalized NFT Marketplace framework which is to be the baseline for you to build standalone NFT marketplace or in

Reddio, inc. 14 Dec 19, 2022
Hasbik is a community based social token and the new paradigm in the crypto space. With the goal to build a community around a crypto token.

Hasbik is a community based social token and the new paradigm in the crypto space. With the goal to build a community around a crypto token.

null 2 Jan 5, 2022
College project done for the CG Artwork lecture in 2022. Used HTML for the indexes and mainly JavaScript (using to THREE.js). Ended with the final A grade (17.3 in scale grade).

CG Artwork Project 2022 This project was done by a group of 3 in 2022 with an educational purpose for the CG Artwork lecture in Instituto Superior Téc

filipe_neves 3 Sep 19, 2022
Using a Decentralized Application (DApp) to Sell artwork on the Ethereum blockchain with smart contracts written in Solidity.

Decentralized Applications For Selling Limited Time Artwork This repository houses the Solidity, JavaScript, and HTML code for a Decentralized Applica

Keyan Ahmadi 4 Mar 20, 2023