ValValu / tx-art

Extension to generate a unique art piece for any transaction on Etherscan and the like.

Tx-Art:

"Every tx: a painting."

Supported styles:

ArtBlocks collections styles:

• fidenza: Fidenza by Tyler Hobbs
• eccentrics2: Eccentrics 2: Orbits by Radix
• energy: EnergySculpture by Beervangeer
• squiggle: Chromie Squiggle by Snowfro
• skulptuur: Skulptuur by Piter Pasma
• gravity: Gravity 12 by Jimmy Herdberg
• watercolors: Watercolor Dreams by NumbersInMotion
• utopia: Utopia ge1doot
• void: Void Alexis André
• rinascita: Rinascita Stefano Contiero
• alien-insects: Alien Insects Shvembldr
• ultrawave369: UltraWave 369 Beervangeer
• meridian: Meridian Matt DesLauriers
• blanschke-ballet: Blaschke Ballet NumbersInMotion
• flowers: Flowers RVig
• autology: Autology Steganon .. other styles TBA (see below how to add styles)

Supported explorers:

• Supports most block-explorers for EVM compatible chains. If enabled, it activates on any */tx/* like URL, and takes the hash out of the URL itself.

Installing the extension

• Download for Chrome or Brave

• Download for Firefox

• Or build and use from source by following instruction below for "Using local extension".

How?

• The hash of the transaction being viewed is used as input to a generative art algorithm of choice, and the piece is added to the page.
• The piece generaged is NOT an NFT, and is not part of any collection. It's just one of an infinite* amount of pieces that can be generated from the selected algorithm.
• This also means that this works for transactions that don't exist, or are still pending. Enjoy some fine art while you wait.

* - not mathematically infinite, just very large in practical terms.

Privacy

There is just one dependency at runtime - p5.js package, which is packaged with the extension (not injected from CDN).

Is this a good thing?

• These Generative Art algorithms have in them an infinite* amount of beutiful and unique pieces.
• Limiting our experience to just the tiny fraction of the pieces that was minted into the collections cannot be a good thing.
• Just as "Right click -> Save As" doesn't take away anything from an NFT anymore than taking a picture of the Mona Lisa takes from the Luvre, only makes it more valuable; So, generating additional pieces from the algorithms can't take away from the NFTs - only make them even more valuable.

Using local extension

Build

Building instructions

• Clone repo.
• To install in local environment: npm install
• Building: npm start for development, npm run build for packaging into a zip file.

Load browser extension into Chrome or Firefox:

Chrome / Brave

• Extensions -> Enable "developer mode" -> "Load unpacked extensions" -> Navigate to /dist folder in this project.
• To update (on code changes): and go to extension details and press update / reload.
• Docs: Chrome docs

Firefox

• To load for development (will be removed after browser close, but easier to reload on code change):
  • Go to about:debugging -> This Firefox -> "Load Temprorary Add-on.." -> Navigate to /dist -> select manifest file.
  • Press "Reload" to update on code changes.
• To load for continuous usage (persistent after closing):
  • Go to about:config and set xpinstall.signatures.required to False to be able to load a local extension.
  • Run npm run-script build to package the extensions into a zip file.
  • Go to about:addons -> "gear" icon -> "Install add-on from file.." -> Navigate to /extension/ folder in this project -> choose tx-art.zip.
  • To update (on code changes): repeat previous two steps.
• Docs: Firefox docs

Adding new styles

Instructions

1. Choose a new style and add it in:

• README.md list of styles.
• popup.html select box of styles names and identifiers.
• popup.js: add arblocks project number in projectId mapping (so that project link will work).
• Copy one of the existing style files from /styles into a new styles/YourNewStyle.js file with a new function name.
• Import the new file in styles/index.js and add the new function into the style name mapping in the drawFuncs object.

2. Replace the previous JS code in the new style function with the correct code for the style:

• Leave the const tokenData = { hash: ... line as is (or adjust it as needed if the used format is different).
• Get the "live" code from a sample piece's ArtBlocks "live" page and add it after that line. E.g. go to https://generator.artblocks.io/0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270/27000294 -> view source.
• Format that code using prettier ("format selection") so that it can be read and edited.

3. The hard part: making the code work:

• The editing process is iterative. Run npm start to build the extension on code changes. And do this until it works:
  • Go to the browser extensions page (see above on how to load extensions locally) and reload the extension.
  • Reload a sample page and watch the errors in the browser dev console.
  • Fix the code and check more errors.
• Common patterns of fixing the code:
  • A lot of the live code is written to work in "global" mode, whereas in the extension it needs to be edited to work in "instance" mode. https://github.com/processing/p5.js/wiki/Global-and-instance-mode is the guide, and p5 API docs is the tool to guide the editing process.
  • If it's a p5 piece: global p5 functions and variable like createCanvas() or HSB need to be replaced with instance equivalents, e.g. sketch.createCanvas() if sketch is the instance name in that scope. Look for functions that aren't defined in the scope - add sketch..
  • If it's a webgl piece: create a canvas element like in skulptuur.js first.
  • Some pieces run an infinite loop with not much changes, you might want to limit those.
  • Some pieces use the tokenId in some way (most don't), so it needs to be "made" up for those. Check an example in draw720minutes.js.
  • Check usages of document for how the original script interacts with the page and replace the canvas it's working with.
  • Some variables that need to be defined (e.g. script may be just assigning a = 1, but a let a; needs to be added)
• When it finally works, check it on more sample pages: some styles have various conditional flows that may not have been tested on the previous sample page.

4. Limiting the canvas size:

• Find the "height" and "width" controls of the code and replace them with maxSize constant.
• Look for JS code that is setting various style attributes (e.g. setting display etc) and disable it.