owmo-dev / token-art-tools

Static web application for generative artists to explore creative concepts via mappable hashpair control sliders, automate image generation and capture features information to CSV in order to analyze probability of outcomes.

Hello, I'm Owen Moore,

I'm an artist and creative developer known for incorporating interactivity, soundscapes, and motion into my works. I operate a generative art practice via OWMO Studio LTD in which I use blockchain technology to instantiate pieces and act as an archival medium for my work. I love the intersection of technology and creativity.

• 🌎   Live and Work in Vancouver, BC
• 🚴   Love bicycling and hiking the outdoors
• 🎨   Generative art, parametric design, web experiences
• 💻   JavaScript, React, WebGL, GLSL, WebGPU, Python
• 🧱   Use blockchains as part of my code-based art practice
• 📅   Available for comissions, consulting or collaboration
• 🌐   View my work at https://owmo.studio
• 📫   Email me [email protected]

token-art-tools's Issues

generate features CSV

For analyzing attribute distributions.

lock/unlock all button

make it easier to lock / unlock all of the hashpairs

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)

Fragile features, make more reliable

Right now capturing features can be a bit fragile, depending on how computationally expensive initial frame render can be. It can cause the delayed request for features on frontend to hang and not get result. This means that CSV capture may miss a feature occasionally when capturing sets.

Manual resolutions include:

• Reducing resolution
• Turning off animation
• Increasing capture time

It would be ideal to come up with a better solution than "just wait 600ms and try" - perhaps a loop that will continue to try iteratively until it succeeds? Maybe adding a callback of some kind that the artist can call at a specific time?

capture buffer time

Add a small time buffer to when the image capture occurs and the next round of rendering.

Why? Some of my current work is producing fully black or white images because the initialization and rendering of the next frame is occurring while the browser is still trying to download the image. Probably runs out of memory or something?

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)

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.

simulate tokenID number

Some artists use the tokenID to drive certain features of their work (for example CryptoVenetians uses it to change the time of day as the mints increment towards the final tally). Simulating this with a project ID base and upper bound of 1M should work.

custom resolution in iframe

Ability to set a custom X and Y resolution for the iframe, but have it visually scale back to fit the window. This would allow for screenshots to be taken at a pre-defined resolution.

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.

automation collage view

After rendering automated outputs, combine very small thumbnails into a collage view so you can get an at a glance view of diversity.

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)

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

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.

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)

add features display

Make the provider aware of the features variable and display them on the web interface as an optional overlay to the viewer.

GIF Recording

Would be nice if GIF recording could be done, might be too complicated. Investigate.

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/

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.

adjustable variables from script

Copy/pasting a suggestion from the Artblocks Discord server...

Often times I have some variables that I need to tweak to have specific effects (think like a multiplier for noise increments) and having a slider allowing to adjust them as I go would be an amazing feature as they sometimes need to be readjusted based on another setting.

Idk if I am clear but that’d require basically to have some sort of setting passed from custom code to the app (that indicates variable name + base range) and back to the code the slider value

The way I thought of doing this app btw was to use a code editor (there are libs for that) as it would save the hassle of having another code editor open (assuming the in-browser editor is good, better than the one provided on editor.p5js.org!)

params in url

In the preview window, the URL params are not respected if the application itself uses the params (ex: modifying quality via ?quality=1) because the app is using them to implement the hash URLs. Might be a way to pass them through?

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.

automate screencapture

Generate n screenshots and save them into my Downloads

add provider loading check

Add a message that calls back to the webapp to let it know it's loaded / ready. Then use that response to disable/enable the features that rely on it (ex: screenshot). This helps improve the UX for anyone using the tool.

escape key to cancel modals

I find myself pressed "Escape" a lot when I no longer want the modal I've clicked... key should trigger close modal

Audio Recording

Would be nice if audio could be recorded easily from generator URLs (ArtBlocks). Probably not too difficult, might be more appropriate as a standalone tool for the project, but worth investigating if generalized solution works or not.

screenshot current

Ability to screenshot the current artwork being displayed, ideally downloading a PNG with both the date and hash.

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.

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.

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

hash history with back button

Keep a live history of hashes generated from random button and when mouseup event is detected on sliders.

connector script

If the connector script fails to get a hash from the application, it should return a null object rather than an incomplete one

generate contact sheet

Add an option to the automation panel to create a contact sheet HTML file, which would present all of the generated images along with their features in a simple table.

enter hash string manually

Having a field to enter a hash string, which would appropriately set all of the slider values and display the work, would be handy if you want to return to a previously saved hash.

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