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.
Proessing.js doesn’t work with Python. You can find the documentation for Processing.js here: http://processingjs.org/download/
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.
We can still grab Processing v2.2.1 from here: 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!
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 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
There are a number of ways to run Python (not Processing.py Python mode) in the browser: Brython, Transcrypt, Skulpt, et cetera.
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: https://github.com/iodide-project/pyodide/
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 processing.py ‘with’ context managers. That sounds like a whole lot more than an experiment… It sounds like a viable mode.