desholmes / p5js-circles

P5.js bolierplate using circles to create generative art

P5.js Boilerplate (Circles)

This repo is a boilerplate for creative coding using the P5.js. A hosted version can be seen here.

This project uses:

1. p5.js: JavaScript library for creative coding
2. dat.GUI: Variable tinkering
3. parcel: Build tooling

Getting Started

Prerequisites

1. Installation of git SCM
2. Installation of node.js v18.12.1

Create Your GitHub Repo

1. Complete the 'Getting Started > Prerequisites' section
2. Create your GitHub Repo
3. Download this repo as a zip, initialise and push:
4. Follow the 'Getting Started > Development' section to start creating

Development

1. Complete the 'Getting Started > Create Your GitHub Repo' section
2. npm i: To install the dependencies
3. npm start: To start a local dev server
4. Visit http://localhost:1234 in a browser
5. Press CTRL+c: To stop the local dev server

Production Build

1. Complete the 'Getting Started > Development' section
2. npm run build: Builds a production build to ./dist
3. Publish your repo on GitHub pages

Commands

Command	Description
npm run clean	Cleans the ./dist directory
npm run build	Runs npm run clean and parcel build
npm run lint	Runs ESLint with 0 warnings argument
npm run lint-fix	Runs ESLint with 0 warnings and --fix arguments
npm run prettier	Runs Prettier with --check argument
npm run prettier-fix	Runs Prettier with --write argument
npm start	Runs a local development server using the parcel

Credits

• codetocloth reddit post for the inspiration
• Des Holmes: Technical Leadership & Product Development for creating desholmes/p5js-circles
  • Blog
  • Turn Gloomy January into Genuary with Generative Art
  • Skills & knowledge: Technical Leadership, Technical Direction, Technical Delivery, Product Development, SaaS, DevOps, Azure Public Cloud
  • Job Titles: CTO, VP Engineering, Head of DevOps, Technical Product Owner
  • Example Projects: Development standards, DevOps, CI/CD, React, docker, Cost Management