Adding 3rd party libs / Getting p5.js to work

sage
,
1

I still trying to get p5.js library working. In this case, I want to install the library by hand instead yarn procedure.

  1. First, I’ve checked the library (p5.min.js) in a simple HTML file, importing it in the <head> with <script src="../p5.min.js"></script>. It works perfectly outside Sage!

  2. Then, I put p5.min.js inside resources/assets/scripts/.

  3. I create .eslintignore file to avoid linting of p5.min.js with this content:
    resources/assets/scripts/p5.min.js.

  4. I add the arrays to entry in resources/assets/config.json as follows:

    "p5.min": [
       "./scripts/p5.min.js"
    ],
    "p5.dom.min": [
      "./scripts/p5.dom.min.js"
    ]
  1. I’ve enqueued script at app/setup.php as follows:
    wp_enqueue_script('sage/p5.min.js', asset_path('scripts/p5.min.js'), [], null, true);
  1. After yarn build, all files seems to be in their place: Webpack have created its file p5.js.min at dist/scripts/ and the script is 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 init the library using routing, for example, at script/routes/commons.js (with instantiation mode to avoid scope problems):

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

I get an eslint error: error ‘p5’ is not defined no-undef.

I’ve checked it for hours and I can’t detect the cause. What is wrong in these steps? is a specific problem with this library? Any help appreciated!

2

2 posts were merged into an existing topic: How to install p5.play JS library