Building a translator for Processing for my Masters dissertation

Question

this is the first time i post here and i would like to ask for help.

My objective is to make the task of learning Processing more interactive and easier. To do that, I am developing an educational program simulation tool. My question is how could i do this integration of my code with the Processing IDE. I’m doing a translator for Processing as the title suggests. And my goal is to integrate it in the Processing IDE with a few extras. One extra would make it possible to stop, pause and run my code step by step while the graphics appear and disappear in relation to the current line of code. To give you a visual idea of what it may look like please check this website: https://visualgo.net/en. Other extra is to make the graphics interactive and non-static so we can see them being draw like, for example, turtle framework from python.

Any tips are appreciated.

Here’s my code so far: GitHub.

Thank you all. Duarte Carvalho

Answer 1

That is a very interesting project. I'm afraid I don't know enough about ASTs / Flex / Bison at this time to provide a detailed answer in this area. Hopefully I can provide a couple of tips on the Processing side:

1. If you want to integrate with the Processing IDE you can implement the Tool interface. For more details see the Processing Tool Basics wiki. As a simple example you can checkout GettingStarted
2. If you need to run command line tools from the IDE you could have a background thread use PApplet's launch() or exec() (and use the returned Process to access the required streams)
3. I like the idea of explainable computing and approaches like visualalgo a lot. I recommend also checking out Bret Victor's Learnable Programming blog post.

Update Even though this is p5.js, not Processing (Java) precisely, it's worth having a look: https://p5stamper.com/

p5.js may be an interesting (and hopefully less verbose) route