How to use p5js with Webpack

Question

I want to write a library based on p5js, so in my Javascript project I have Webpack installed as dev-dependency and I write this in start.js:

import p5 from "p5";

p5.ellipse(0, 0, 100, 100); // Function not found :(

However, no references are found in p5. I was expecting to find references to p5's functions like rect or ellipse or setup, but nothing.

More info

My Webpack config file is:

const path = require('path');

module.exports = {
    entry: './start.js',
    output: {
        filename: 'start.js',
        path: path.resolve(__dirname, 'out')
    },
    module: {
        rules: [
            /* In order to transpile ES6 */
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            }
        ],  
    }
};

What am I doing wrong?

Possible duplicate of Cannot use p5.js in typeScript and Webpack — Kevin Workman
– Kevin Workman, Commented May 26, 2018 at 17:29
My solution is to use instance mode. All of those objects are only accessible from the argument for the function u give p5. — iluvAS
– iluvAS, Commented Aug 10, 2019 at 8:03

Chuanqi Sun · Accepted Answer · 2019-09-08 19:16:32Z

6

Like iluvAS said, you need to use instance mode.

// use this import in your webpack. Commented out because the CDN script exposes p5 as global
// import p5 from 'p5'; 

const containerElement = document.getElementById('p5-container');

const sketch = (p) => {
  let x = 100;
  let y = 100;

  p.setup = function() {
    p.createCanvas(800, 400);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    p.rect(x, y, 50, 50);
  };
};

new p5(sketch, containerElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<div id="p5-container"></div>

Here is another working example with webpack and es6 module imports hosted on stackblitz (which uses webpack under the hood): https://stackblitz.com/edit/p5-in-webpack

answered Sep 8, 2019 at 19:16

Chuanqi Sun

1,42219 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

monokrome Over a year ago

The poster obviously wants to write the code in non-instance mode, so "use instance mode" is not a great answer which can be interpreted as borderline sarcastic.

ggorlen Over a year ago

@monokrome I don't think it's borderline sarcastic. As far as I know, p5 instance/global mode isn't possible in Node, so this is the correct (and only) way forward at the current time.

monokrome Over a year ago

Right. I wasn't implying that it was certainly sarcastic, only that it "can be interpreted" as such. Your comment here would have been a much better and more clear answer.

ggorlen · Accepted Answer · 2024-04-24 17:31:32Z

Here's a complete, runnable P5 + Webpack starter, to supplement this answer, which correctly recommends using p5's instance mode.

package.json:

{
  "dependencies": {
    "p5": "^1.9.3"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    main: path.resolve("src", "index.js"),
  },
  output: {
    filename: "index.js",
    path: path.resolve("dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve("public", "index.html"),
    }),
  ],
};

public/index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Webpack + P5</title>
  </head>
  <body>
    <h1>Open the dev tools console to see p5 logging</h1>
  </body>
</html>

src/index.js:

import p5 from "p5";

new p5(p => {
  p.frameRate(2);

  p.draw = () => {
    p.print(p.frameCount);
  };
});

Install and run:

$ npm i
$ npx webpack serve

Navigate to http://localhost:8080 and open the console to see the logs.

Note that Parcel provides a simpler, zero-config setup that may be more appropriate for basic p5 sketches than Webpack. See this answer for a minimal Parcel + P5 starter.

Collectives™ on Stack Overflow

How to use p5js with Webpack

More info

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

More info

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related