Running Python Code in a Browser

So it’s basically all in the title. Does processing.js work with python, is there some other way to do this, etc. Anything helps.

1 Like

Proessing.js doesn’t work with Python. You can find the documentation for Processing.js here:

FYI, Processing.js and p5.js are different projects that use JavaScript to create web-based media. is a mode for Processing that let’s you write Java programs in Python syntax, but this doesn’t relate to the web.

Although the Processing.js (Pjs) library only got a builtin Java-to-JS transpiler, there’s a language similar to Python & Ruby called CoffeeScript which also transpiles to JS:

On the old Processing 2.x.x, we had an installable flavor called CoffeeScript Mode:

Instead of Java syntax, we’d write our sketches using CS syntax, which would get transpiled to JS’ for deploying on the web w/ the Pjs library. :robot:

We can still grab Processing v2.2.1 from here: :sunglasses:

Just be extra careful to assign a diff. Sketchbook folder path for the old P2; so P2 & P3 libraries won’t crash each other! :skull_and_crossbones:

From this very old Processing forum thread:

There’s this “Bouncing Ball 3D” sketch for both Java Mode:

And for CoffeeScript Mode:

Bouncing Ball 3D (v2.1)
Mod GoToLoop

location = velocity = null
cx = cy = 0

setup: ->
  size 400, 400, P3D; strokeWeight 2
  location = new PVector; velocity = new PVector 3, 2, 4
  cx = width >> 1; cy = height >> 1

draw: -> background -1; do drawCube; do moveSphere; do drawSphere

drawCube = ->
  #move cube and ball to center:
  translate cx, cy, -CUBE_DIM

  #rotate cube and ball so its 3D-ness can be appreciated:
  rotateX -QUARTER_PI; rotateY QUARTER_PI; rotateZ .5 * QUARTER_PI

  do noFill; stroke 0; box CUBE_DIM

drawSphere = ->
  translate location.x, location.y, location.z
  fill `0300`; do noStroke; do lights; sphere BALL_DIM

moveSphere = ->
  location.add velocity #move ball

  #detect edges with center at 0,0 and edge minus width of ball:
  velocity.x *= -1 if checkBounce location.x
  velocity.y *= -1 if checkBounce location.y
  velocity.z *= -1 if checkBounce location.z

checkBounce = (coord) -> coord > CUBE_RAD - BALL_DIM or coord < BALL_DIM - CUBE_RAD

There are a number of ways to run Python (not Python mode) in the browser: Brython, Transcrypt, Skulpt, et cetera.

In that case, you are running transpiled Python-to-JavaScript in the browser, then hooking it up with either p5.js or Processing.js (Processing in JavaScript) for the Processing features in JavaScript.


This works with p5.js. Here is some discussion:

…with proof of concepts:


Trinket combines skulpt Python-in-browser – with Processing.

I believe that skulpt uses Processing.js – not p5.js

…although there is ongoing discussion:


Sorry to resurrect this topic. It’s an issue close to my heart.

I’m looking forward the day we’ll have a great Python implementation on the browser, I think Mozilla’s Pyodide seems to point to a WebAssembly future:

As we are not quite there yet, please have a look at this nice Transcrypt + p5js experiment:


Wow. According to the docs it has full API coverage, sans a few nice convenience bits for PVector and the ‘with’ context managers. That sounds like a whole lot more than an experiment… It sounds like a viable mode.


I’ve experimented with Transcrypt quite a bit. It is great for quick simple sketches, and remarkably fast / lightweight – so for writing JavaScript using Python syntax, it is excellent.

However, it isn’t for Python libraries. I quickly hit a wall when I failed trying to import non-core Python libraries (even relatively compact pure processing libraries such as pyparsing). So it is Python 3, but it really isn’t for Python integration any more than Python mode is – Python mode integrates with a subset of Python 2 libraries that Jython can crosscompile onto JVM, and Transcrypt integrates with what appears to be an even smaller subset of Python 3 libraries that it can crosscompile onto JavaScript.

For libraries, Pyodide looks very promising, as @villares mentioned – but it isn’t there yet, although there are early prototypes…