p5js-typescript-fusebox's Introduction

p5Js + Typescript + Fusebox

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

Getting Started

I highly recommend n or nvm for installing Node - I used Node 14.x & npm 6.x.
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!

Publishing to Open Processing [Experimental]

You can publish your sketch to Open Processing. This repo is posted for you as an example.

Run npm run dist
Copy/Paste the contents of ./dist/app.js to your sketch.
Add the mp3 from dist/resources to the sketch Files tab.
Turn on p5.Sound in your Sketch

Random

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.
- UPDATE - The upgrade from Fusebox 3 to 4 was way harder than it needed to be. The hardest part is there was absolutely zero migration guide. This made it hard but then some of the powerful things such as bundle instructions were replced with, well, magic. It's still very fast but the lack of any real documenation means I will move to either Parcel or Webpack at some point.

Recommend Projects