# Helping Tool for Educators
**URL:** https://discourse.processing.org/t/helping-tool-for-educators/9321
**Category:** Project Guidance
**Created:** [March 15, 2019, 8:18am UTC](https://discourse.processing.org/t/helping-tool-for-educators/9321 "2019-03-15T08:18:26Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@janglee](https://discourse.processing.org/u/janglee)
#### Post date: [March 15, 2019, 8:18am UTC](https://discourse.processing.org/t/helping-tool-for-educators/9321/1 "2019-03-15T08:18:26Z")
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!
---
### Author:  [@mcintyre](https://discourse.processing.org/u/mcintyre)
#### Post date: [March 15, 2019, 4:05pm UTC](https://discourse.processing.org/t/helping-tool-for-educators/9321/2 "2019-03-15T16:05:12Z")
Sounds interesting @janglee! [p5.sceneManager](https://github.com/mveteanu/p5.SceneManager) might be a good starting point for the implementation.
---
### Author:  [@janglee](https://discourse.processing.org/u/janglee)
#### Post date: [March 16, 2019, 5:17am UTC](https://discourse.processing.org/t/helping-tool-for-educators/9321/3 "2019-03-16T05:17:10Z")
@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](https://love2d.org/forums/download/file.php?id=16825)
---
### Author:  [@figraham](https://discourse.processing.org/u/figraham)
#### Post date: [March 16, 2019, 9:03am UTC](https://discourse.processing.org/t/helping-tool-for-educators/9321/4 "2019-03-16T09:03:17Z")
If you haven’t already check out [Bret Victor’s talk Inventing on Principle](https://vimeo.com/36579366). It’s great and he’s created some awesome tools that might be great for inspiration on this project if nothing else.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [March 16, 2019, 7:12pm UTC](https://discourse.processing.org/t/helping-tool-for-educators/9321/5 "2019-03-16T19:12:40Z")
Great idea! While researching what has already been tried, you should definitely check out:
- [p5.playground](http://1023.io/p5-inspector-1), “a live coding web-cased editor for p5. When the playground mode is off, people can change the code in the editor and see the results in real time; when the playground mode is on, people can manipulate the shapes on the canvas and see updated code immediately.”
- [POLYMER ELEMENT](http://sepans.com/sp/works/p5-js/) FOR ENCAPSULATED P5.JS EDITOR WITH LIVE CODING
- [P5Live](https://github.com/ffd8/P5LIVE) – p5.js live-coding vj environment!
- [p5.sceneManager](https://github.com/mveteanu/p5.SceneManager) (as mentioned above) – drives [codeguppy.com](http://codeguppy.com)
- [Khan Academy live editor](https://github.com/Khan/live-editor/) which is used on [their site](https://www.khanacademy.org/computing/computer-programming) and based on [Processing.js](http://processingjs.org/).
- [Tweak mode](http://galsasson.com/tweakmode/) for Processing (Java), and which people have [wanted for p5.js](https://github.com/processing/p5.js-editor/issues/213)
- Older discussions of related ideas: [https://forum.processing.org/two/discussion/21547/hypothetical-proposal-concept-live-coding](https://forum.processing.org/two/discussion/21547/hypothetical-proposal-concept-live-coding)
- Related discussions of “live” forms of update / refresh (actually reloading) for the p5.js web editor: [https://github.com/processing/p5.js-web-editor/issues/3](https://github.com/processing/p5.js-web-editor/issues/3)
Once upon a time, Sketchpatch had something called LiveCodeLab: [http://www.sketchpatch.net/labs/livecodelabIntro.html](http://www.sketchpatch.net/labs/livecodelabIntro.html)
---
### Author:  [@janglee](https://discourse.processing.org/u/janglee)
#### Post date: [March 17, 2019, 6:51am UTC](https://discourse.processing.org/t/helping-tool-for-educators/9321/6 "2019-03-17T06:51:30Z")
@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](https://github.com/Khan/live-editor) for deciding what aspects of the code to dynamically inject into the output.
Edit :- [Sepand Ansari’s](https://github.com/sepans) approach in [p5-element](http://sepans.github.io/p5-element/components/p5-element/demo.html) 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.
---
### Author:  [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [March 18, 2019, 1:32am UTC](https://discourse.processing.org/t/helping-tool-for-educators/9321/7 "2019-03-18T01:32:31Z")
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](https://youtu.be/KyoUSn8-MFw?t=79) to see the program in action. Note the material is in French.
Kf
---
### Author:  [@janglee](https://discourse.processing.org/u/janglee)
#### Post date: [March 20, 2019, 4:30pm UTC](https://discourse.processing.org/t/helping-tool-for-educators/9321/8 "2019-03-20T16:30:47Z")
Taking the approach from Sepand Ansari’s code I have created a new editor [pi](https://janglee123.github.io/pi/). But instead of using the regular sketch layout, this editor uses p5 [instance mode](https://github.com/processing/p5.js/wiki/Global-and-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.