p5.js-website-OLD
p5.js-website-OLD copied to clipboard
processing
Turn snippet renderer into a standalone widget
Hey, this is an idea I've been throwing around in my head for a little while... it's a bit vague but I'm curious if there's any interest in it.
Basically, as evidenced from issues like https://github.com/processing/p5.js/issues/1111, https://github.com/processing/p5.js-website/issues/186, https://github.com/processing/p5.js-website/issues/196, https://github.com/processing/p5.js-website/issues/188 and others, render.js frequently has regressions. In fact, there's even a comment in there describing it as a "hacky script"!
Because this functionality is such an important part of learning p5, and because tinkering with examples is fun, I thought it might be useful to actually factor out the example runner into its own reusable widget that could be embedded not only in the reference documentation, but also in other websites (e.g. blog posts). Some things that could be improved upon include:
- Using an iframe for rendering the sketch. I believe this would significantly reduce the frequency of regressions, and also make the tinkering experience more like actually using p5.
- Using a CodeMirror widget for the editor to provide syntax highlighting.
- When not in "edit" mode, hyperlinking p5 methods/properties to their reference documentation.
- Providing friendly, highly visible errors when things go wrong.
- Adding a test suite to ensure that things don't break.
Obviously the scope shouldn't bloat so much as to suddenly become p5.js-editor or anything, but there's lots of room for affordances that can enhance learning.
Thoughts?
in general i think this is a great idea, and it's somewhat related to the way that the full examples are rendered. most of what makes this script "hacky" is that (1) it's trying to accommodate rendering code snippets (single lines without setup, draw, or createCanvas), and (2) it's supporting rendering multiple examples on one page (meaning every example even if written properly with setup and draw, needs to be converted into instance mode). and I think switching over to iframes would remove the need for point 2 here.
anyway, I agree it'd be nice to have a standalone widget, I don't know if it's the highest priority right now with all the work still to be done on the editors. but if you're interested in working on it, please feel free to go for it!! I just would want to make sure that if we do use it for the reference examples, the two functionalities noted above continue to be supported. it's also possible the widget could be for different use cases... maybe not for the reference at all but more for embedding in blogs etc. something that might replace the current wordpress p5 embedder, for example?
Ok, sounds good! Thanks for clarifying the requirements--I actually wasn't aware of the one about code snippets.
That makes sense about the standalone widget. When you say "all the work still to be done on the editors", are you referring to p5.js-editor or something else?
:sparkles: Update! :sparkles:
I'm helping @tchoi8 with his Signing Coders workshop and he mentioned that he wants to have embeded, editable p5 sketches in the self-guided part of his curriculum, similar to how a lot of other p5 instructors have done things. So I made this:
https://toolness.github.io/p5.js-widget/
(It looks very barebones right now but the UI will soon be updated to match the look and feel of the web IDE.)
It doesn't address all the use cases that you mentioned earlier, so it's definitely not ready to be a replacement for the snippets in the p5.js website or anything, but I thought mentioning it here might be helpful.
This is awesome and so much better than the interactive examples I've been collecting so far! Thanks for sharing. It would be very cool if we could log to a console beneath the frame with println() calls. I'm not super familiar with typescript/react but I'll hack around and see if I can get something like that working.
Awesome, thanks for the feedback!!
@indefinit, that's a great idea. I've written some thoughts about console functionality in https://github.com/toolness/p5.js-widget/issues/7--feel free to add your thoughts there.
This is amazing! I'm in the process of re-doing natureofcode.com to use more JS / p5.js and I'll definitely make use of this and have more feedback / ideas!
I'm also adding @catarak to this thread as there may be some related ideas here in terms of the web editor / console / etc.
Oh wow! This is so helpful and might be the way to go for a bunch of the tutorials we are working on for the p5 website! Awesome!
