HTML or web-friendly output

[berinhard]

First of all, I wanna say thank you for implementing and maintaining this project. I've been an old user from Processing's Python Mode and it's just delicious to be able to play around with creating coding once again with Python.

Right after the announce that Python mode would be no longer maintained, I've started my own project called pyp5js in order to be able to keep on using Python to do creative coding. The idea is the same as py5 but it uses p5.js as the backend instead of processing. @villares was a huge supporter and mentor behind the project's decisions and features planning. There is one major and important improvement in the project which is to change the backend which "compiles" the Python code from Pyodide to PyScript.

But, after I've experimented more with py5, the idea of maintaining my project alongside py5 seemed somehow effortless. So, before digging into that, I decided to open a discussion here to check if there's a roadmap or idea to use py5 to generate p5.js compatible HTML code as well or if it's outside the scope of the project.

If it's interesting for the project, I'd love to come closer and try to help with the experience I got while doing so before.

[hx2A]

Hello, @berinhard ! I am so happy to hear that py5 is enabling to you to reconnect with creative coding and Python. :)

I have looked at your project pyp5js and have been doing what I can to learn more about pyodide and pyscript.

I decided to open a discussion here to check if there's a roadmap or idea to use py5 to generate p5.js compatible HTML code as well

There is the idea to do that. Others have asked about this and clearly it is a screaming opportunity. I don't have a specific roadmap for building it, but I have been doing exploratory work to investigate the technical design issues.

To understand the code behind py5 and a potential p5.js backed version of py5, first I need to talk about py5generator. The python library py5 is in the other https://github.com/py5coding/py5 repo. The py5generator code is basically a custom template engine that constructs the code for py5. It uses data and analysis of the Processing jars to properly construct the code. Included are tools for managing idiosyncrasies and edge cases which would inevitably come up when building something like this. There was some up-front work required to first build py5generator and py5, and that work was done during the pandemic lockdown when I had a lot of extra time. Now much of the maintenance of py5 is automated, making this project easy for one person to maintain.

While doing this I have learned a lot about making Python libraries that build on top of libraries written in other languages. It's a niche skillset for sure. I'd like to apply what I've learned to do something similar with p5.js.

I've done some preliminary investigation to learn more about pyscript and pyodide. From what I've seen so far, the technical challenges are smaller. Also, p5.js has characteristics that will make it easier to work with than the Processing jars.

There is one major and important improvement in the project which is to change the backend which "compiles" the Python code from Pyodide to PyScript.

Can you elaborate on this? What problem does this solve, and how does it improve things?

I don't have a specific roadmap for building it

The main reason why I don't have a specific roadmap for this is because I am currently grappling with parental health problems and that is taking up a lot of my time. With the time left over, I need to work on more immediate concerns. I am doing what I can to get things under control here but things move quickly and frustrate my attempts to adapt. Working on py5 + p5.js does interest me a lot and it is going to happen eventually. I just can't speak to when I'll be able to start putting real time behind it.

[villares]

I'm so happy to see this conversation and potential collaboration growing! Let me chime in...
None of us have a surplus of free time, but, on the other hand, we don't need to be in a hurry! As we don't have a "roadmap" I'll propose two exploratory tasks that might move us closer to our end-goal of a py5-tool-with-a-p5js-backend:

• Building some Python code that just inspects p5.js to "extract" (make a record of) the existing methods and constants, much like py5generator does from the Processing jars. It could be done in baby steps. It will be useful later for building the wrapping interface generator.

• Trying to make a proof of concept (throw away toy?), either a version of pyp5js, or something new from scratch, that uses PyScript instead of pyodide to call p5.js. It could be limited to some basic methods, it could adapt some of the small hacks I made on my pyp5js fork... I think this might be useful to learn more about the features and limitations of PyScript.

  • previous art by GoToLoop: https://pyscript.com/@gotoloop/bouncing-colorful-balls/latest

Trying to second-guess Bernardo (which I shouldn't be doing) I believe he wants to move from pyodide to PyScript because it abstracts away some of the complexities of dealing with pyodide, and makes it easier in the future to include other libraries the user might want to import.

From the things I heard at PyCon US from the PyScript people, it might be possible to start a PyScript app with a lighter micropython-based interpreter (that loads quickly) and then afterwards switch to a pyodide-based interpreter. Another reason to switch to PyScript would be to be able to collaborate with a larger community, in the wake of the Anaconda Inc. PR machine (don't get me wrong, it might sound snarky, but I think it is a good thing).

• The third and last magic step (built on many other unknown smaller magic steps) would be to link the things learned in the two initial tasks in a new py5generator-for-py5web ...

But I'm sure somehow we should be able to collaborate as a single team!

[Maltiec]

that's true, and also Micropython firmwares has some specific technologies like frozen modules, all in favor of memory save and reduce time for loading. And all saffering to save 500-1000 kB of memory, that's the usual Micropython scale. I think even webpage running on phone has more memory space. Though! May be I am too deep inside Micropython for microcontrollers bubble and really missed some newer tendencies in Micropython.

[villares]

Maybe I'm not the best person to explain this (as I don't know the details) but the thing is, pyodide, and PyScript using pyodide as the interpreter, can run almost anything, numpy & etc. On the other hand, micropython is very limited but very light, so one of the strategies the PyScript people mentioned was to be able to start a very light page running PyScript on WASM-micropython and then to switch to pyodide to get a full featured Python interpreter.

[hx2A]

so one of the strategies the PyScript people mentioned was to be able to start a very light page running PyScript on WASM-micropython and then to switch to pyodide to get a full featured Python interpreter.

OK, I see. I think I'd need to see an example of this working to really understand though.

[villares]

It was something they were discussing, but I've never seen it, so maybe this idea didn't work out. Anyway, Micropython as a runtime for Pytscript was presented here: https://pyscript.net/tech-preview/micropython/about.html

[GoToLoop]

Just a reminder that my "Bouncing Colorful Balls" sketch actually uses µPython rather than regular Python:
https://GoToLoop.PyScriptApps.com/bouncing-colorful-balls/latest/mpy.html
https://GoToLoop.PyScriptApps.com/bouncing-colorful-balls/latest/mpy.py

Notice the <script> attribute type is "mpy" instead of "py":

<!DOCTYPE html>

<meta charset=utf-8>

<title>Bouncing Colorful Balls</title>

<link rel=icon href=//PyScript.net/assets/images/favicon.ico>

<script defer src=//cdn.JsDelivr.net/npm/p5></script>
<script defer src=adjustFrameSize.js></script>

<script type=module src=//Unpkg.com/@pyscript/core></script>
<script type=mpy src=mpy.py config=mpy.toml></script>

<h3>Bouncing Colorful Balls [PyScript + "ball.py"] ("mpy.py"):</h3>

"Animated Random Boxes" is also using µPy for p5js; although regular Py for Pjs:
https://PyScript.com/@gotoloop/animated-random-boxes

But instead of <script type="mpy">, it uses a "deprecated" <mpy-script> tag instead:

<py-config src=pyscript.toml></py-config>
<mpy-config src=pyscript.toml></mpy-config>

<py-script src=pjs.py></py-script>
<py-script src=pjs.py></py-script>

<mpy-script src=p5js.py></mpy-script>
<mpy-script src=p5js.py></mpy-script>

[villares]

I hope @taconi will soon join this conversation telling all about his great work adding more py5 to pyp5js and adding both together into flok.

To keep the conversation going, I've been reading https://www.davepagurek.com/blog/p5-2.0-philosophy/ today and here a quote:

p5.js was started in 2013 by Lauren McCarthy to imagine what Processing would look like if Processing were invented then, instead of in 2001. Both p5.js and Processing aimed to open up creative coding to a wider audience, both by making it easy to get started writing code, and by making it easy to see those creations via the web. In 2001, that meant creating Java applets. By 2013, the web had evolved—Processing too had evolved and now served slightly different needs, and a JavaScript-based project would better serve those initial web-based goals.
In addition to the underlying technologies the project is built on, the general economic landscape of software was a factor. Who makes software, and who can access software, had changed by 2013, with less control over how we interact with software, and less involvement in its creation. The p5.js project was set up to put a greater emphasis on its community, prioritizing both accessibility of sketches and inclusivity in the software development process itself.
Now, it's 2025, exactly as far away from the start of p5.js as the start of p5.js was from the launch of Processing. The landscape of the web has definitely changed since 2013. We also wanted to make sure the community could have a say in the changes, and strengthen itself for the future. So we took the time to prepare p5.js for the next 12 years.

In my view if Processing was invented in 2025 it could have been done with pyscript 😆, but I guess my point is we should also prepare for p5js 2.0 changes (see the link above for more details). 🥲

[hx2A]

Thanks for posting that link. Very interesting to read about p5 2.0 and the plans there.

we should also prepare for p5js 2.0 changes

Agreed. And this is where py5 will shine. Remember that I don't maintain py5 directly; I maintain py5generator, a project that outputs a complete Python library. It's like a custom template engine for Python code, driven by data and examination of Processing's core.jar file. It happens that in the early days of py5, py5generator worked fine with both Processing 3.x and Processing 4 beta, outputting two different versions of the library. It could handle that. Also, I knew that in time Processing would change, so I made it dynamic. I'm not worried that Processing will one day get a bunch of updates that breaks py5 and then I have to spend a lot of time getting it to work again.

Right now I am very busy getting things ready for a show at The Whitney that opens the beginning of April. Once things slow down on that front, making a web version of py5 will be my top priority. I am excited to work on this and I think it is something that will add tremendous value to the community.

[vsquared]

@berinhard
What do envision using for an editor? JavaFX has a text to html editor.

[villares]

What do envision using for an editor? JavaFX has a text to html editor.

Oh, I guess we would love to work more with @taconi on the flok project integration to some extent, but any online editor infrastructure, like pyp5js using Ace Editor, would do nicely. The currently popular offline editors like Thonny and VS Code could be used too.

[hx2A]

What do envision using for an editor? JavaFX has a text to html editor.

Oh, I guess we would love to work more with @taconi on the flok project integration to some extent, but any online editor infrastructure, like pyp5js using Ace Editor, would do nicely. The currently popular offline editors like Thonny and VS Code could be used too.

Jupyter Notebook also work with Pyscript! This would be a good choice.