Transcrypt & p5js

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 new p5().

Using Python with closures though seems to do the trick - the above pulsating circle is created with this Python code:

import math
def p_setup_gen(p):
  
  #--- p5 setup() function --------------------------
  def p_setup():
    p.createCanvas(200, 200)
    p.background(160)
  
  return p_setup
  
def p_draw_gen(p):
  
  #--- p5 draw() function ---------------------------
  def p_draw():
    p.fill('blue')
    fc = p.frameCount
    p.background(200)
    r = math.sin(fc/60) *50 + 50
    p.ellipse(100,100,r,r)
  
  return p_draw
  
def sketch_setup(p):
  p.setup = p_setup_gen(p)
  p.draw  = p_draw_gen(p)
  
myp5 = __new__ (p5(sketch_setup, 'sketch-holder'))

Calling Transcrypt with

transcrypt -b -a -m p5test.py

will create a JavaScript version of the Python code, together with annotations to the target code (-a) and source maps (-m).

Including p5js, the converted Python code p5test.js and a div like this

<script src="p5.min.js"></script>
<script src="__javascript__/p5test.js"></script>
<div id="sketch-holder">
      <!-- Our sketch will go here! -->
</div>  

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