Better coding experience.

en / ja » [ Tweet ]

p5.js Templates flowchart

About

This is a set of GitHub template repositories for p5.js.
Helps you write code and create sketches comfortably.

For usage tutorial, please see the README of each template.
This site also contains a lot of descriptions and tips that might be useful for you.

Note:
This site and the templates are not intended for complete beginners (i.e. who have no experience writing code at all) and assume that you know something about the basics of JavaScript and p5.js. However you don’t have to be an expert at all!

Main tools you’ll use

For the code editor, Visual Studio Code (or VS Code in short) is assumed to be used.

The templates are assisted by several JavaScript development tools:

  Tool What’s that
P Prettier Code formatter
E ESLint Code linter
T TypeScript Typed JavaScript
R Rollup Module bundler

However you don’t necessarily have to use all of them (see the template list below).

List of templates

On your needs and preferences.

[ P ]

Everything is automatically beautiful. Prettier formats your code.

[ PE ]

Less bugs and more readability. ESLint checks your code automatically.

[ PET ]

Prevent wrong values. More code completion. Code documents itself. With TypeScript.

[ PER ]

Structure your source code with multiple files. Rollup will bundle them.

[ PETR ]

Combination of the two above.

[ PETR+ ]

No more global pollution. p5.js instance mode.
In addition: terser minifies your code for distribution.

Basic terms

Git and GitHub

GitHub is an online platform for hosting code that is managed by Git.

And Git is a version control system, which will track changes to your code and do some other several jobs as well.

Using Git is not required; Git is quite useful but might also be a little difficult for programming beginners.

npm

npm is a large database on the web, from which you can download several packages including the tools described above.

It also provides a package manager tool (i.e. npm command).
By installing Node.js you’ll be able to use it.

How to download a template

Open a GitHub repository of any template linked above.
Then do as follows:

Without Git

With Git

  1. Click the “Use this template” button.
    This will copy the template and create a new repository for you
    (you have to be logged in to GitHub).
  2. Click the “Code” button and check the URL for cloning the repository.
  3. Clone the repository with git clone command or something else.

More info

Things you might want to check

If these help.

Advanced

Here is some more information for advanced users (or those who want to be).

However this doesn’t mean that other topics are easy enough.
Anyway, learning takes time.

FAL Works

Website of the developer of p5.js Templates. With a bunch of Processing/p5.js sketches.