As I am quite fond of Python as a programming language, I was checking whether I could use that in the context of the browsers. There are many different efforts in that direction, but I found Transcrypt ‘Python in the browser’ fascinating.
Their website gives examples how to work with Python’s turtle graphics and D3, but I was looking for a way to get it to work with p5js.
Turns out this is not so simple as I had hoped - partially because p5 tries to make it easy to work with by normally using a global mode, but for working with Transcrypt one needs an explicit instance. This is described in the post Global and instance mode.
Next problem is then how to call the standard setup and draw calls - as I did not see a way to get hold of the
sketch variable that is implicitly created when calling
Using Python with closures though seems to do the trick - the above pulsating circle is created with this Python code:
Calling Transcrypt with
transcrypt -b -a -m p5test.py
-a) and source maps (
p5js, the converted Python code
p5test.js and a
div like this
is then sufficient to get it to work.
Amazingly, this will allow to step through Python code lines in the debugger of the browser, see Safari on a Mac here