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
- 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.