"Every tx: a painting."
ArtBlocks collections styles:
fidenza
: Fidenza by Tyler Hobbseccentrics2
: Eccentrics 2: Orbits by Radixenergy
: EnergySculpture by Beervangeersquiggle
: Chromie Squiggle by Snowfroskulptuur
: Skulptuur by Piter Pasmagravity
: Gravity 12 by Jimmy Herdbergwatercolors
: Watercolor Dreams by NumbersInMotionutopia
: Utopia ge1dootvoid
: Void Alexis Andrérinascita
: Rinascita Stefano Contieroalien-insects
: Alien Insects Shvembldrultrawave369
: UltraWave 369 Beervangeermeridian
: Meridian Matt DesLauriersblanschke-ballet
: Blaschke Ballet NumbersInMotionflowers
: Flowers RVig .. other styles TBA (see below how to add styles)
- 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.
-
Or build and use from source by following instruction below for "Using local extension".
- 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.
There is just one dependency at runtime - p5.js
package, which is packaged with the extension (not injected from CDN).
- 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.
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.
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.
- Go to
- To load for continuous usage (persistent after closing):
- Go to
about:config
and setxpinstall.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 -> choosetx-art.zip
. - To update (on code changes): repeat previous two steps.
- Go to
- Docs: Firefox docs
Instructions
- Choose a new style and add it in:
README.md
list of styles.popup.html
select box of styles names and identifiers.- Copy one of the existing style files from
/styles
into a newstyles/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 thedrawFuncs
object.
- Replace the previous JS code in the new style function with the correct code for the style:
- Leave the
let tokenData = { hash: (window.location.href.match(/0x.{64}/) || [""])[0] };
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.
- 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: globalp5
functions and variable likecreateCanvas()
orHSB
need to be replaced with instance equivalents, e.g.sketch.createCanvas()
ifsketch
is the instance name in that scope. Look for functions that aren't defined in the scope - addsketch.
. - If it's a
webgl
piece: create a canvas element like inskulptuur.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 indraw720minutes.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 alet a;
needs to be added)
- 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
- 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.
- 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.