P5-wasm-core NPM

npm bundle size npm jsDelivr hits (npm) GitHub release (latest by date)

P5 wasm

About The Project

a wasm core for p5.js library written in C++ using emscripten for better speed in calculations.

Built With

Getting Started

Prerequisites

Node.js Please download and install the latest version of Node.js from this link

Emscripten

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk

# Fetch the latest version of the emsdk (not needed the first time you clone)
git pull

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

for more information please refer to this link

Installation

Clone the repo

git clone https://github.com/ars2062/p5-wasm.git

Install NPM packages
```
npm install
```
make a .env file containing
```
MODE=development
```

Usage

for using this package please add the script tag after where you added your p5.js script tag and before your script.js file like so:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p5-wasm-core@0.0.4/dist/p5.wasm.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

and inside your sketch file you need to wait for wasm file to load like so:

// Global mode
// This is to stop global mode from starting automatically
p5.instance = true;

// Write your p5 sketch as usual
function setup(){
	//...
}

function draw(){
	//...
}

// Wait for promise to resolve then start p5 sketch
window.wasmReady.then(() => {
	new p5();
});

// Instance mode
// Write your p5 sketch as usual
const sketch = function(p){
	p.setup = function(){
		//...
	};

	p.draw = function(){
		//...
	}
};

// Wait for promise to resolve then start p5 sketch
window.wasmReady.then(() => {
	new p5(sketch);
});