Turtle graphics in the browser with Pyscript!
Since we are using Pyscript, NO server side is needed: all python code runs entirely in the browser in a real CPython environment.
STATUS: BETA
DEMO: https://coderdojotrento.github.io/turtle-pyscript/
EXAMPLES: see tests.py
Turtle API: We try to be faithful to original api as much as we can. Currently we support most important things and it should work. Tested successfully in a high school classroom.
Most noticeable problems:
- movements are currently always immediate, see issue about concurrency.
- Stamp is currently buggy (see issue)
- There is noticeable lag (see issue) if you have the pen down, to prevent it keep calling
color('yellow')
Game engine: We also provide an experimental Sprite API built on top of Turtle which is in flux and subject to change.
- Pyscript needs a way to find your python files: If you deploy to a server with a subpath you have to set PATH template accordingly in pyscript.json
For example, normally the PATH would be just / but in the demo https://coderdojotrento.github.io/turtle-pyscript/
the PATH must be set to /turtle-pyscript
-
serve the website with any static https (mind the s) webserver
-
open
index.htmlwith the browser!
If you run any https server (mind the s) and open index.html you should be able to see something actually drawn by turtle.
You need httpS because currently there is a Pyscript component (sabayon) which insists on calling crypto.randomUUID()
which can only be executed in an https environment
So to easily setup a test https server run these scripts:
- Create
test/server.pemfile
openssl req -new -x509 -keyout test/server.pem -out test/server.pem -days 365 -nodes- Run the server:
python3 test/server.py- Open browser to this link:
It will warn you the certificate is not signed, just click proceed.
NOTE: DON'T run this test server in production, you don't need it and it would also be unsafe.
To interface between the browser and Python interpreter we're using Pyscript, which in this case runs pyodide a WASM port.
Note there is no transcompilation to Javascript, the python code runs entirely in a true CPython environment.
As graphical display we use a native <svg> element in the browser. This has the following benefits:
- provides a lot of primitives
- svg is easily inspectable with browser tools
- if they want, students can get to learn svg also
- can be styled with css, another occasion to learn stuff
Typically for videogames you would choose <canvas>, as svg is slower for videogames but
since this lib is thought for educational purposes we think svg is sufficient.
-
some code initially was taken from Pyscript Antigravity example
-
most turtle code was copyied from this transcrypt implementation:
https://github.com/TranscryptOrg/Transcrypt/blob/master/transcrypt/modules/turtle/__init__.py
which has liberal license Apache v2.0 (reported in third-party-licences
Note we don't use transcrypt lib at all, our project code entirely runs in a CPython environment.