Hello you all,
p5.js is a library and set of tools that make it easy to use the JavaScript programming language for creative coding and heavily used for teaching purposes.
One thing I find missing is that explaining sketch to the audience while it is running is a bit tricky. Thus I am thinking to create an addon library to allow control over a sketch. For example pause and resume sketch, draw a line or highlight something on a sketch, interact with some points that can be moved by the mouse, changing framerate, etc.
I know these things can be done with p5.js but how about an addon library which does it out of the box?
Looking forward to the suggestions,
Thank you!
4 Likes
Sounds interesting @janglee! p5.sceneManager might be a good starting point for the implementation.
3 Likes
@mcintyre nice to see that you are interested, the scene manager looks good to me, this will extend the functionality of library to a new level.
Though the name scene manager is a bit unconventional. These are typically called states, rather than scenes, because the name scene is typically used in the context of scene trees using for rendering, where nodes are normally connected in such way that if you e.g. rotate a node, then all of its children rotate with it. See this https://love2d.org/forums/download/file.php?id=16825
If you haven’t already check out Bret Victor’s talk Inventing on Principle. It’s great and he’s created some awesome tools that might be great for inspiration on this project if nothing else.
1 Like
Great idea! While researching what has already been tried, you should definitely check out:
Once upon a time, Sketchpatch had something called LiveCodeLab: http://www.sketchpatch.net/labs/livecodelabIntro.html
5 Likes
@jeremydouglass @figraham thank you. It is really helpful links. I am also missing a live-coding feature in p5.js. 
Khan Academy added a layer between code and output in the live-editor for deciding what aspects of the code to dynamically inject into the output.
Edit :- Sepand Ansari’s approach in p5-element looks easier. He is storing global variables and their values and when every time draw function updates he puts back values of global variables and their updated values unitl the last frame to a new sketch. This way sketch’s variables remain in sync.
This seems interesting and challenging for me, I am going to try it by myself.
2 Likes
Andre Boileau has been working creating P5 Visuel which is programming in P5.js using the concept of blocks. It goes a bit further as treating the pieces as puzzle pieces so they snap into each other. You can see the actualgenerated code in the right panel. Check this video to see the program in action. Note the material is in French.
Kf
4 Likes
Taking the approach from Sepand Ansari’s code I have created a new editor pi. But instead of using the regular sketch layout, this editor uses p5 instance mode to mount it inside HTML element.
How it works
First, it parses code into AST then updates global variables value from the p5 object that has been previously created then again convert AST to js code. At last, it creates a function from code and passes it to a new p5 object.
In simple words, a new canvas generates every time code is updated. But it looks continuous by changing variable values.
Maybe another way to do it by only changing the draw function on the fly. But I don’t know changing the draw function affects the functioning sketch or not.
Love to hear any feedback.
1 Like