This is a starter repository for an ABOUND algorithm written in p5.js.
Warning
p5.js is meant to run in the context of a web browser. To make it work in a server environment, we use p5js-node, an unmaintained fork of p5.js. As such, not all p5.js features may be supported and existing code may have to be adapted. Further, because the
p5js-node
package is no longer available (if it ever was), we use the@mattheath/p5js-node
NPM package to provide this functionality.
- Unsure on what ABOUND is? Check out https://abound.art
- Looking for another language? Check out our other options for starter repos here
- New to p5.js? Learn the basics here.
- New to NodeJS? It's mostly just an easy way to run JavaScript outside a web browser.
This repo includes all of the scaffolding to build an algorithm for ABOUND. That means:
- Reading in the JSON configuration for a run
- Generating art using the p5.js Mandelbrot Set example
- Most of the other starter repos implement a Lorenz attractor, which is also perfectly doable here, see the starter-node repo for an example of that. We just chose to use a p5.js example directly to better illustrate its usage.
- Writing the output to a file
In short, this repo does everything except implement your art algorithm.
export ABOUND_CONFIG_PATH=example_input.json
export ABOUND_OUTPUT_PATH=output.png
npm run generate-image
Will generate a piece of art at output.png
that looks like this:
To start implementing your algorithm, replace the Config
interface and draw
function in src/index.ts
with your own. It's
also worth noting that the example algorithm produces raster images, meaning
they're made of pixels and are output as
PNG files, but you can also write
algorithms that produce vector images, meaning they're made of geometric shapes
and are output as SVG files, perhaps using
p5.js-svg
To test the algorithm in a Docker container, run:
./scripts/build_image.sh
./scripts/run_image.sh <config path> <output path>
Where <config path>
defaults to example_input.json
and <output path>
defaults to output.png
.
Algorithms are uploaded to ABOUND as Docker containers. The example algo can be built by running:
./scripts/build_image.sh
Which will build the example image and tag it abound-starter-p5js
.
Head to https://abound.art/artists for the most recent instructions on how to upload your algorithm once it is written. Make sure to read through the constraints carefully to make sure that your algorithm conforms to them prior to submission.
Once you're ready to upload, tag and push the image with:
docker tag <local tag> <image name given by ABOUND>
docker push <image name given by ABOUND>
If you haven't changed the example configuration in this repo, the <local tag>
defaults to abound-starter-p5js
.
The docker push
command will fail if you aren't already authenticated with
your ABOUND credentials.