P5 wasm

Table of Contents

About The Project
- Built With
Getting Started
- Prerequisites
- Installation
Usage
Contributing
License
Contact

About The Project

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

(back to top)

Built With

(back to top)

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

(back to top)

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);
});

(back to top)

Contributing

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Arshia Moghaddam - linkedin - ars2062@gmail.com

Project Link: https://github.com/ars2062/p5-wasm

(back to top)