How to install p5.play JS library

aitor · May 21, 2018, 4:07pm

Sorry for the very begginer question. How should I install p5.play libray in Sage 9? I tried yarn add p5.play

But it isn’t in the NPM registry. Thanks!

alwaysblank · May 21, 2018, 4:56pm

Yarn supports adding packages from arbitrary locations (i.e. Github repos): https://yarnpkg.com/lang/en/docs/cli/add/. All you should need to do is run:

yarn add git@github.com:molleindustria/p5.play.git

aitor · May 21, 2018, 5:56pm

I’ve read yarn docs and the command seems to be OK but extrange things happen:

$ yarn add git@github.com:molleindustria/p5.play.git
yarn add v1.6.0
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
Couldn't find any versions for "git" that matches "github.com:molleindustria/p5.play.git"
? Please choose a version of "git" from this list: (Use arrow keys)
❯ 0.1.5 
  0.1.4 
  0.1.3 
  0.1.2 
  0.1.1 
  0.1.0 
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning "p5 > grunt-mocha@1.0.4" has unmet peer dependency "grunt@>=0.4.0".
warning " > stylelint-webpack-plugin@0.10.4" has incorrect peer dependency "webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0".
[5/5] 📃  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ git@0.1.5
info All dependencies
└─ git@0.1.5
✨  Done in 250.32s.

Yarn seems to be installing git as a node module.

If I try with the https way, p5.play folder is installed in the node_modules directory but there is no in the package.json dependencies. Also, It throws several errors:

$ yarn add https://github.com/molleindustria/p5.play.git
yarn add v1.6.0
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning "p5 > grunt-mocha@1.0.4" has unmet peer dependency "grunt@>=0.4.0".
warning " > stylelint-webpack-plugin@0.10.4" has incorrect peer dependency "webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0".
[5/5] 📃  Building fresh packages...
[10/11] ⠐ node-sass: Downloading binary from https://github.com/sass/node-sass/releases/download/v4.8.3/darwin-x64-57_binding.node
[11/11] ⠐ p5.play: This is probably not a problem with npm. There is likely additional logging output above.
[3/11] ⠐ uws
[9/11] ⠐ pngquant-bin
error /Volumes/B/Documentos/trellis3/telmo/web/app/themes/tlm/node_modules/p5.play: Command failed.
Exit code: 1
Command: npm run copy:p5 && npm run docs
Arguments: 
Directory: /Volumes/B/Documentos/trellis3/telmo/web/app/themes/tlm/node_modules/p5.play
Output:
> p5.play@1.0.0 copy:p5 /Volumes/B/Documentos/trellis3/telmo/web/app/themes/tlm/node_modules/p5.play
> cp -f `npm root`/p5/lib/p5.js examples/lib/p5.js

cp: /Volumes/B/Documentos/trellis3/telmo/web/app/themes/tlm/node_modules/p5.play/node_modules/p5/lib/p5.js: No such file or directory
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! p5.play@1.0.0 copy:p5: `cp -f `npm root`/p5/lib/p5.js examples/lib/p5.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the p5.play@1.0.0 copy:p5 script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

Should I install this library manually in the assets/scripts directory?

aitor · May 22, 2018, 8:12pm

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

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!
Then, I put p5.min.js inside resources/assets/scripts/.
I create .eslintignore file to avoid linting of p5.min.js with this content:
resources/assets/scripts/p5.min.js.
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"
    ]

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

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!

mmirus · May 22, 2018, 10:58pm

Hey @aitor - going back to your previous post where you tried installing p5.play from Github using yarn: I tested it and got the same error as you, but nonetheless it did create the folder in node_modules.

The error stems from this npm script that p5.play tries to run (see package.json for p5.play):

  "scripts": {
    ...
    "copy:p5": "cp -f `npm root`/p5/lib/p5.js examples/lib/p5.js",
    ...
    "postinstall": "npm run copy:p5 && npm run docs",
    ....
  },

The error is that `examples/lib/p5.js’ is not recognized as a valid location to copy the file.

Not sure I have the insight to troubleshoot much beyond that point. Running this command did successfully copy the file for me:

cp -f "`npm root`/p5/lib/p5.js" "`npm root`/p5.play/examples/lib/"

But I’m unsure of what reasonable options (if any) would be available to you to resolve installing p5.play in this way.

As for p5 itself (as opposed to p5.play), that is available as a Yarn package:

yarn add p5

So, if that’s what you need (not p5.play), then you should be good to go. Once you do that you’d most likely just need to import it into your common.js file or wherever else you need it and then proceed as the p5 docs describe.

Replying to your most recent post (adding p5 manually and the no-undef error): what happens when you type p5 into you browser’s dev console while viewing your dev site and hit enter? Does it say undefined, or something else?

If it doesn’t say undefined, then to fix things from where you’re currently at, you may just need to add p5 to the list of globals in your .eslintrc.js file to prevent the error.

Normally, you would be importing p5 into your common.js file (and I would still recommend doing it that way–see the previous section), and so eslint would know that p5 is defined from your import line. Presumably in this case, because you have p5 enqueued as a separate script file (and it’s presumably defining a globally scoped p5 variable), eslint doesn’t know that exists and is throwing the no-undef error.

aitor · May 23, 2018, 6:50am

Thank you very much for the help!

I tried to install p5.js with yarn but eslint still trhrowing the same error. This is what I did:

yarn add p5. Then, p5 directory went to node_modules succesfully.
Import p5 to resources/assets/scripts/main.js:

    // import external dependencies
    import 'jquery';
    import 'p5/lib/p5.js';

After yarn build I get error ‘p5’ is not defined no-undef Exactly the same as in the manual installation. Typing “p5” in the console retuns Uncaught ReferenceError: p5 is not defined.
To add “p5” to globals in eslintrc.js removes the eslint error but I get the same in the console: Uncaught ReferenceError: p5 is not defined:

      "globals": {
        "wp": true,
        "p5": true
      }

mmirus · May 23, 2018, 2:56pm

Hey @aitor - once you install p5 with yarn, you can do this to import it:

import p5 from "p5";

But this is a huge import (check the output from yarn build, so this might be better:

import p5 from "p5/lib/p5.min";

You will still see ‘Uncaught ReferenceError: p5 is not defined.’ if you enter p5 in the console, because when you import it this way it’s not placed in the global scope. If you put console.log(p5) after your import, you should see a better result.

TBH from my research/testing on this it seemed like p5 may not be set up the best for importing (and it’s not something they document anywhere that I can find). Although that’s normally the method I would recommend, if you run into much more trouble going about it this way it may be best to switch to the “manual” method you were also trying.

That said, if you Google there are some examples of people loading it this way, and you may be able to learn from them. For example: https://github.com/vilvadot/p5-tests

PS - when you’re importing a js file you don’t have to add the .js at the end.

aitor · May 24, 2018, 10:17am

Thank you so much for your time, research and explanations!

It works

mmirus · May 24, 2018, 2:06pm

@aitor Awesome! Would you mind sharing what you ended up doing? An example would help anyone else interested in this.

aitor · May 24, 2018, 2:13pm

Of course. As soon as I have the full implementation I will come back here to leave my conclusions.