• nodejs
• npm
• yarn
• uglify-js
• puppeteer
• p5js v1.0.0

Dependencies can be installed on Ubuntu with the following commands in the parent directory:

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash 
nvm install node
sudo apt install npm
sudo npm install --global yarn uglify-js

git clone https://github.com/bensnell/gen-art-project-template.git --recursive

Then, create a copy of the file env.template.js and rename to env.js. This file contains a development-only tokenData object, within which you can place hashes for selectively testing the output of your app.

Run the following command within the repo to install its node packages.

yarn install

This repository is organized to make it easy to develop p5.js applications and deploy them to ArtBlocks.

To develop, open the repo in VS Code and click "Go Live" in the window's bottom bar. The app will open in a browser, where you can load and reload the app, view output from the console, and adjust the size of the rendering window as you code.

Below, the annotated file structure of this repository.

Highlighted files are those which you will need to change to ensure your app works and builds as expected.

• .vscode - VS Code settings.
• dist - Distributable code generated by the build scripts. Initially, this folder will not be present.
  • app
    • app-min-split-** - Split files containing minified application code to upload to ArtBlocks.
    • app-min.js - The entire minified app javascript code.
  • demo
    • index.html - Encapsulated demo app html file ready to be served (e.g. from AWS).
  • features
    • feature-script.js - Contains the feature script ready to be uploaded to ArtBlocks.
• doc
  • deployments - Save any deployments you'd like here (e.g. the entire dist folder for an important release).
  • saved-hashes.txt - Any hashes you would like to save.
• lib - Contains backup p5.js library to use if you don't have internet.
• node_modules - Node modules installed by the package installation command.
• scripts - Build scripts used to generate upload-ready code for ArtBlocks and the web.
  • assets
    • reserved-names.txt - Function and variable names that you don't want mangled are listed in this file, one per line. Must contain setup(), draw(), and optionally preload() for p5.js to function properly.
    • template.html - HTML file template for dist/demo/index.html.
  • build-app.sh - Script for building files in dist/app.
  • build-demo.sh - Script for building files in dist/demo.
  • build-features.sh - Script for building files in dist/features.
• src - Source files.
  • app - Primary application source code.
    • assets - If you use shaders, put them in here.
    • feature-seeds.js - A "feature seed" is a variable used, but not changed, by your app. It is calculated before your app runs and without any external libraries (e.g. p5.js). Pre-calculation allows feature code to run independently of your app, per ArtBlocks' feature script instructions. It can eventually be declared an official feature in features.template.js.
    • globals.js - Place global variables here.
    • main.js - This is your main app, containing setup(), draw(), and optionally preload().
    • metadata.js - Application metadata including Artist Name, Project Title, and Version. Change this before every release to reflect the current version number.
    • ___.js - Any other javascript application files that main.js depends on should be included here, alongside it.
  • features
    • features.json - ArtBlocks optionally accepts a json file that defines the features and their types. If you use that functionality, this would be the file for it.
    • features.template.js - This is where the final features are defined. Use the feature seeds.
  • shared - (Submodule) Shared javascript helper classes and functions.
• test - HTML files to test production code.
  • app - Serve to test dist/app/app-min.js.
  • features - Serve to test dist/features/feature-script.js.
• .gitignore - Files that git ignores.
• .gitmodules - References submodules.
• build.sh - Bash script for building production / deployment files.
• CHANGELOG.md - Keep a record of changes in here.
• env.js - Your personal environment file (you'll need to make this file). Contains development tokenData so you can pass custom hashes to your script for testing.
• env.template.js - The template for the above file. Copy this and rename to env.js.
• index.html - The main development HTML file to run your app. This file is also referenced by the build scripts. Include any new javascript files in here and make sure to associate them with their class (app and/or features) so they're included correctly in the build process.
• index.js - Node.js rendering app file. This app is distinct from the p5.js app. It's optionally used via the command line to render out hi-res images of the p5.js app.
• package.json - Node packages for running the rendering app.
• README.md Contains all app documentation. Keep this up to date!
• yarn.lock - A reference to node package versions used in the rendering app.

1. Determine how to increment the version, according to the rules below.
2. Update the src/app/metadata.js file with the new version.
3. Update the Changelog with the new version and its date.
4. Commit these changes.
5. Tag the repo and push the tags:

   git tag x.x.x
   git push --tags

In more detail, rules for incrementing version include:

• MAJOR: When the holistic style (or content) changes enough to distinguish it as a different artwork (e.g. a new rendering pipeline).
• MINOR: When there's a significant change in a token's visual appearance (e.g. background blur) or a new feature has been added (e.g. feature script).
• PATCH: Bug fixes, or when there's no noticeable change in a token's visual appearance (e.g. establishing consistency across headful and headless rendering).

Reference the File Structure above and take note of highlighteed files that may need to be adjusted in order for the build script to run correctly, namely:

• scripts/assets/reserved-names.txt
• index.html (classes)

Run the following commands at the top level of this repo in a Mac terminal:

bash build.sh

The directories generated inside dist/ include:

• app: Contains the script splits to upload to AB app-min-split-* and a minified full script app-min.js.
• demo: Contains a web-ready html file index.html for the application to upload to AWS S3.
• features: Contains a feature script feature-script.js to upload to AB.

The repository also supports batch rendering of application outputs, using nodejs + yarn + puppeteer. To get started:

1. Install node modules:

   yarn install

2. Generate renders using the following command. Some examples follow:

   # Generate 1 random output with default wait time of 60 seconds and resolution of 2400 to the output directory.
   yarn start generate
   # Generate 1000 random outputs with wait time of 60 seconds and resolution of 2400, explicitly. Output to Dropbox folder.
   yarn start generate --batchSize 1000 --waitTime 60 --resolution 2400 --outputDir ~/Dropbox/my_batch_renders
   # Render all of the hashes or mainnet token IDs saved in doc/saved-hashes.sh to the output directory. Supply ArtBlocks project ID, e.g. `999`.
   yarn start generate --hashList doc/saved-hashes.txt --projectID 999
   # Render at max resolution
   yarn start generate --resolution 5760 --waitTime 400