Template for p5Js projects that uses Typescript and Fusebox for fast, iterative development. I created this to help port a legacy Processing Java application to p5Js. Porting it to Typescript with Fusebox meant I had little dependency overhead to worry about (see package.json).
- I highly recommend n or nvm for installing Node - I used Node 10.16.3 & Yarn 6.4.1.
- Clone this project
npm i
- Run
npm run sketch
- Open http://localhost:4444
- Modify
src/sketch.ts
, save it, watch sketch auto-reload in browser. - Have fun!
You can publish your sketch to Open Processing. This repo is posted for you as an example.
- [optiona] Obfuscate your code by setting
uglify
totrue
in fuse.js. - Run
npm run dist-os
- Copy/Paste the contents of
./dist/app.js
to your sketch. - Add the files from
dist/assets
to the sketch Files tab. - Turn on p5.Sound in your Sketch
- tsc compile fails - There are issues in p5.d.ts and p5.global-mode.d.ts that cause compile errors
Cannot find name 'COLOR_MODE'
... andClass 'Noise' incorrectly extends base class 'Oscillator'
. You can ignore these, I've submitted Issues to p5js and they should be addressed in their next release. However if you want to fix them...- Open
p5.d.ts
- On line 10312, change the return type of
Noise:amp
fromvoid
toAudioParam
- Add
///<reference path="p5.global-mode.d.ts" />
to the top ofp5.d.ts
- Save &
npm run compile
- Open
- Source Maps are turned on by default which means you can set breakpoints in the browser or in Visual Studio Code (use Chrome Debugging extension).
- Fusebox vs Webpack - Fusebox has incredibly fast hot module reloading and native Typescript support. QED for me.