How to get p5.js working in WordPress

Question

Context:

I'm trying to get p5.js library working on a Wordpress installation build with Sage starter theme.

All files seems to be in their place:

p5.min.js is in dist folder.

p5.min.js is correctly enqueued at the end of the body:

<script type="text/javascript" src="//localhost:3000/app/themes/tlm/dist/scripts/p5.min.js"></script>

Problem:

When I try to create an instance of p5, I get 'p5' is not defined eslint error.

var sketch = function(p) {
  p.setup = function () {
    p.createCanvas(500, 500);
    p.background(200);
  };
};
new p5(sketch);

I have a low level of JS. Why p5 is undefined? How can I debug it?

ggorlen · Accepted Answer · 2024-04-24 22:44:29Z

1

You must set the p5 variable as a global. Just add this line at the top of your JavaScript file:

/* global p5 */

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

answered Mar 6, 2019 at 21:53

Alator

5087 silver badges26 bronze badges

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

1 Answer 1