Need help with p5-typescript-starter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

156 Stars 69 Forks MIT License 77 Commits 0 Opened issues


Base starter project using p5js and typescript

Services available


Need anything else?

Contributors list

# 131,857
54 commits

Starter Project

p5.js with Typescript

Project to quickly get something working in p5.js and typescript


Click here for Demo


This is based on the Regular Polygon sketch available in the p5js examples

Getting Started


git clone
npm install


npm start

A local version will now be running on localhost:3000

Global and Instanced mode

P5 is able to run in either global or instanced mode.

This starter project now uses Global mode to bring it inline with most of the online resources provided by the project.

As stated on the P5 wiki:

While this is convenient (and friendlier) it's important to note that this can lead to problems and confusion down the road when mixing other JS libraries or trying to embed multiple p5 sketches on the same page. A safer, more advanced methodology is to create a p5 sketch as an object "instance".

The following examples are both functionaly the same.

Global Mode

let x = 100;
let y = 100;

function setup() { createCanvas(windowWidth, windowHeight); }

function draw() { background(0); fill(255); rect(x, y, 50, 50); }

Instanced Mode

var sketch = (p: p5) => {
  this.x = 100;
  this.y = 100;
  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);

p.draw = () => { p.background(0); p.fill(255); p.rect(this.x, this.y, 50, 50); }; };

new p5(sketch);

This starter project will work with either mode, feel free to experiment with both.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.