Is it any possible to run p5.js in znote?

[lsooxlla8]

Sorry if it's a dumb question, I'm pretty newbie...

Btw, when I try to just use it - nothing happens, when I try to use it in node.js mode - I get strange errors.

If it's not possible yet - it would be a nice addition, making from znote/notebookJS a nice sketchbook for generative art.

[alagrede]

Hi @lsooxlla8 👋,

It's a good question! I never test to run P5. Some 3D lib like D3 could be hard to run into this embedded environment due to the complex ESM modules. I open a task right now to see if I need to update Znote or if I just need to provide an example to load P5.
We will keep in touch soon.

Anthony

[alagrede]

After a quick test, I run P5.js without modification 😊
But this is a quick test and I guess there are probably issues with the P5 dependencies (maybe).
If you have any problem, share me your examples to help me identify the issues (if there is)

Below the example:
Try to install P5 npm package: npm i -S p5

import p5 from 'p5';

const s = p => {
  let x = 100;
  let y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

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

htmlEl.innerHTML = ''; // reset result div before rerun code
const P5 = new p5(s, htmlEl); // htmlEl is the HTML element injected by Znote as an entry point for the result of your code block

[lsooxlla8]

Thank you so much! Worked for me, at least for now.
It would be a nice addition to default examples, imho.

[lsooxlla8]

Hi!
Thank you so much for the last update!
It looks pretty powerful and easy to use
Btw, I'm still such a noob and doing something wrong again now, , could you please help me to manage, how to make it work again?

[alagrede]

Hi @lsooxlla8,
Yes, with this update you can load frontend libraries more easily. I'm updating the examples and the documentation website.

For your P5 example, just change new p5.default(s, htmlEl) by new p5(s, htmlEl)

Below the full example

```js scripts=p5
//hide
const s = p => {
  let x = 100;
  let y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    //p.rect(x, y, 50, 50);
    p.rect(p.mouseX, p.mouseY, 50, 50);
  }
};
htmlEl.innerHTML = ''
const P5 = new p5(s, htmlEl);

Assuming you declared the script name:p5 url:https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js