p5.js online framework

edited August 2016 in p5.js

Hi! I am looking at an online framework to work on p5.js sketches. It is vital that I will be able to include external libraries into my sketches.

Is there any such software?

Thank you!



  • "frameworks" and "external libraries" are slightly vague terms that could apply to many libraries. What are you wanting to achieve?

    p5 is itself a JS library; so in principle can be used alongside any other JS client-side library and with any framework (with some caveats/workarounds). In practice I'd recommend that you use instance mode; since unlike more sane JS libraries p5 by default pollutes the global namespace - cue: GoToLoop saying it's fine for p5 to do this since all other libraries are sane :(|)

  • Ok;) I don't understand what polluting the namespace means, but probably that's not the main message now;)

    P5.js has a lot of other libraries that can be used. I would like some of my students to write sketches and then send a link to me. I also want the to write sketches online. Something along the lines of js fiddle.net

  • edited August 2016 Answer ✓

    I would like some of my students to write sketches and then send a link to me.
    I also want them to write sketches online.

    Got nothing to do w/ frameworks. You're asking about online IDEs for p5.js instead! :-\"

    AFaIK, there are 2 sites especially tailored for p5.js I know about:

    1. http://p5ide.HerokuApp.com/editor
    2. http://p5js.SketchPad.cc/

    But of course we can use other online generic JS IDEs for p5.js, given it's also a JS library. $-)

  • edited August 2016 Answer ✓

    I don't understand what polluting the namespace means, ...

    It's related on creating global variables.
    For example, 1 library declares some variable called draw.
    Then it comes another library and do the same.
    It means the 1st value assigned to draw by the 1st library was overwritten by the 2nd library.
    We've just got a global namespace clash! And now draw stores the value given by the 2nd library. :-&

  • Now much clearer, but is there a way to avoid such pollution?

  • edited August 2016

    When p5.js <script> is loaded and the page is ready it checks out whether either setup or draw is present in the global namespace already.
    Also if either happens to be a function. Only then p5.js dumps its whole API in the global namespace too.

  • edited August 2016 Answer ✓

    If you're interested in not polluting the namespace, read about instance mode below:

Sign In or Register to comment.