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

Gaweph
233 Stars 111 Forks MIT License 109 Commits 0 Opened issues

Description

Base starter project using p5js and typescript

Services available

!
?

Need anything else?

Contributors list

# 125,935
CSS
Angular
p5js
starter...
67 commits
# 16,047
Ruby
slack
Rails
coffees...
3 commits

P5 TypeScript Starter

This project will quickly get you something working in p5.js and typescript.

Demo

Click here for Demo

Demo

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

Getting Started

Installing

git clone https://github.com/Gaweph/p5-typescript-starter.git
npm install

Using

npm start

A local version will now be running on localhost:3000.

Advanced

Global and Instanced Modes

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

This starter project uses global mode by default to bring it in line 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 functionally 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.

Using External Libraries

To use an external library, e.g. qrcode-generator.

  1. Install the library with

    npm install --save-dev qrcode-generator
    .
  2. Add a

    script
    tag to your index.html.
   
  1. Import via global.d.ts.
   import qrcode = require('qrcode-generator');
  1. Use in sketch/sketch.ts.
   var qr = qrcode(4, 'L');
   qr.addData('https://github.com/Gaweph/p5-typescript-starter');
   qr.make();

text(qr.createASCII(), 1, 1);

See dblock/p5qr for a working sample.

Copyright and License

MIT License, see LICENSE for details.

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.