Running Python Code in a Browser

Processing.py
1

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
2

Proessing.js doesn’t work with Python. You can find the documentation for Processing.js here: http://processingjs.org/download/

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

3

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: https://CoffeeScript.org/

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: https://Processing.org/download/

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:

4

From this very old Processing forum thread:
https://Forum.Processing.org/one/topic/the-nature-of-code-code-solutions-of-the-examples.html

There’s this “Bouncing Ball 3D” sketch for both Java Mode:
http://Studio.ProcessingTogether.com/sp/pad/export/ro.9o1T5z1ghf2s7

And for CoffeeScript Mode:

###
Bouncing Ball 3D (v2.1)
Mod GoToLoop

https://Forum.Processing.org/one/topic/
the-nature-of-code-code-solutions-of-the-examples

Studio.ProcessingTogether.com/sp/pad/export/ro.9o1T5z1ghf2s7
###

BALL_DIM = 30; CUBE_DIM = 450; CUBE_RAD = CUBE_DIM >> 1
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
5

There are a number of ways to run Python (not Processing.py 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.

Brython

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

…with proof of concepts:

http://jsfiddle.net/villares/g2sL3eza/
http://jsfiddle.net/a3q5kzqf/1/

Skulpt

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

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

…although there is ongoing discussion:

2 Likes
6

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: https://github.com/iodide-project/pyodide/

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

7 Likes
7

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

2 Likes
8

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…

3 Likes
9
3 Likes