Embed a py.processing sketch to the web for easy sharing?

Processing.py
1

Hello,
it took me Covid confinement to eventually start developing the little hitch-hiking mini-game I had in mind!
I turned to Processing to develop it quickly (involves a moving car with random color, and a pedestrian which has to indicate a matching color (= direction) to be allowed onboard the car --> easily done in Processing).
I do not code and am currently learning Python in order to work as a data scientist, and thus chose the Python mode of Processing to code my mini-game.
I am now happy with the result :slight_smile: and would like to embed the prototype on a webpage (can be on a public gallery like openprocessing or similar) and was wondering what the quickest solution was…

I am sure translating my Python code to P5JS and then putting my P5JS code on Open Processing works but… it requires me to learn P5JS (and do not know JS).

Is there any other way?

1 Like
2
3

Thanks GoToLoop, I understand from your answer that trinket.io is the way to go.
I’ll copy-paste my Python code there and it will generate the sketch on the same webpage :ok_hand:

For future projects where I’ll want to embed sketches directly into webpages, I assume I’ll have to switch to p5.js…

I guess I can manage to learn 2 languages (Python and JS), especially if I know they’ll be the only ones I’ll need

1 Like
4

Yup, indeed that’s the best option. :ok_hand:

Alternatively, you can also target the old Processing.js (Pjs) flavor, which can deal w/ Processing sketches written in both Java & JS syntaxes: :coffee:
ProcessingJS.org/learning

That’s an excellent decision: JS is ubiquitous b/c it’s present in every browser.

MDN has excellent tutorials & references for the JS language btW:

However, given you’re still learning Python, learning another language w/ very diff. syntax at the same time can be daunting.

How about some other language that is very close to Python and is directly transpiled to JS?
Meet CoffeeScript.org.

By using CoffeeScript, you end up learning JS at the same time, given that its JS compiled output is very close to the original code, and you can compare both very easily.

In short, CoffeeScript is similar to Python/Ruby syntaxes the same way JS is similar to Java/C. :wink:

Here’s an example of a Processing sketch written in CoffeeScript targeting the Pjs library:
GoSubRoutine.GitHub.io/Ball-in-the-Chamber/pjs-cs/
https://github.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/pjs-cs
Notice that every “.coffee” file is accompanied by its corresponding “.js” transpiled output, so we can learn from both language syntaxes. :nerd_face:

Of course we can, w/ minimal changes, convert it to target p5.js lib in place of Pjs: :smile_cat:

But the best I’ve left for last: We can indeed target p5.js using Python syntax! :open_mouth:

There’s this new hidden gem project called p5p5js: :gem:

Which not only transpiles Python 3 syntax sketches targeting the p5.js library, but also allows us to use anything available in JS API & DOM! :partying_face:

For example, we can use both JS’ console.log() & Python 3’s print() in order to print in the browser’s console. :sunglasses:

So let us know which web deploying option you pick for your Processing mini-game sketch. :innocent:

3 Likes
5

Thanks for the kilotons of advice :slight_smile: :

Put py.processing sketch onto the web :heavy_check_mark:

Had to adapt the code a little (circle and square --> ellipse and rect, added stuff I saw in your sketch: initial lines - incl. shebang -, final run()) for it to work on Trinket but voilĂ  https://trinket.io/python/973a0f7ae5?runOption=run

Loop() (enables car speed modification) does not seem to work now that run() has been added. I couldn’t find any documentation about run(), I assume it’s a trinket specific method :thinking:

Regarding your advice for the next “tools choice” step, yes I heard about Coffeescript a few years ago, will look into using it instead of JS to ease the learning curve :mag_right:
As regards to P5.js vs Pjs, I do not yet truly understand pros and cons of both choices, but should surely find comparisons online.

Vocabulary question: what do you mean by “target/ing”?

6

B/c Trinket’s processing module relies on Pjs, and Pjs doesn’t match Processing’s Java Mode fully, not all Processing’s API will be available for it:

Pjs’ API: ProcessingJS.org/reference/

In most cases the shebang isn’t needed at all. More about it:
Trinket.io/faq#what-version-of-python-do-you-use

This forum is now allowing embedded <iframe> tags from some selected hosting sites:

So you can post your sketch here like this:

<iframe src="https://trinket.io/embed/python/973a0f7ae5?toggleCode=true&runOption=run&start=result" width="100%" height="260" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>

Which would output this:

I guess both loop() & noLoop() are bugged on Trinket. I get the following:

Exception: noLoop() should be called after run() at <unknown>

Under Processing’s Python Mode, everything needed to run our sketches happen behind the scenes.

But Trinket isn’t Processing. Processing is merely another module among others there.

And in order to kickstart our Processing’s callbacks, such as setup(), draw(), mousePressed(), etc., we have to invoke run() there.

Processing got 2 JS flavors: the old Pjs & the not-so-new p5.js.

Therefore when we write a sketch, we need to choose which 1 of those 2 libraries as API “target”.

B/c even though they’re similar, there are considerable API differences:

1 Like
7

Fixed links: :link:
GoSubRoutine.GitHub.io/Ball-in-the-Chamber/pjs_cs/

1 Like