Examples of using p5 in non-traditional ways.
All samples were tested with node 8 and above. If something is not working as expected, please check your node version.
- Enter the sample directory you wish to test
- Run
npm install
- Run
npm build
- Run
npm serve
(http-server will tell you where the sample is visible from)
The resulting code is located in <sample-name>/dist
A minimalistic setup that makes use of webpack to compile your code and p5 into a single js file. This would allow for further transformations via transpiling, chunk splitting, etc.
This sample includes:
- Single entry point src/index.js
- Import of p5
- Sample code making use of p5 in instance mode
- Auto generated html with the generated js bundle file injected
Expands on simple-webpack by adding typescript support. It is otherwise identical.
This sample includes:
- Single entry point src/index.ts
- Import of p5 which is sort of odd due to the definition file having the same name as the module, confusing the import clause.
- Sample typescript code making use of p5 in instance mode
- Auto generated html with the generated js bundle file injected
Expands on simple-typescript-webpack by adding SASS support, a custom html template and it separates the webpack-runtime, node_modules and app JS files into separate artifacts. Making it easier to develop without having to re-compile the big chunks. A few modifications were necessary to exemplify the embedding of the canvas inside a div but otherwise is mostly unchanged.
This sample includes:
- Single entry point src/index.ts
- Import of p5 via typescript method
- Sample typescript code making use of p5 in instance mode
- Sample SASS style code
- Auto generated html with custom template that incorporates the generated js and css bundles