Simple turtle demo in Brython

434 views
Skip to first unread message

Pantsik Grifoi

unread,
Nov 17, 2020, 1:18:35 AM11/17/20
to brython

Brython is a very cool project. With it you can write python scripts directly inside an html document. However, I can't figure out how the turtle graphics library works with Brython. They have a demo page with turtle graphics: https://www.brython.info/gallery/turtle.html but I want something simpler, without the demo selector and without showing the python code in the html page.

Has anyone written a simple turtle demo with Brython? If so, what is the html document for it from start to finish?

Raspberry Pieman

unread,
Nov 17, 2020, 11:15:11 AM11/17/20
to bry...@googlegroups.com
Pantsik,
     I have reproduced the gallery example in a more simplified form, below, with everything in one html file apart from the Brython libraries.
A couple of things that caught me out when starting Brython:

1. You need to have your html page running on a web-server for it to work - it will not work using the file:/// protocol.
    If you do not have access to a web-server, then you can run a pseudo web-server using Python.

 2. For most applications you will need both the 'brython.min.js' and 'brython_stdlib.js' libraries, either locally or from a trusted source, see my example.

Good Luck
Martyn

=== CODE STARTS HERE ===  
<!DOCTYPE html>
<!-- turtleDemo.html - a simplified version of: https://www.brython.info/gallery/turtle.html -->
<html>
<head>
    <meta charset='utf-8'>
   
    <!-- publicly available Brython code  -->
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bry...@3.8.8/brython.min.js'></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bry...@3.8.8/brython_stdlib.js"></script>
   
</head>

<body onload='brython()'>

<h4>Brython Turtle Demo</h4>
<div id='turtle-div'></div>
<div>The turtle graphics should appear above here</div>

<script type='text/python'>
try:
    from browser import document, alert
    import turtle

    turtle.set_defaults(
        turtle_canvas_wrapper = document['turtle-div']
    )
    t = turtle.Turtle()

    t.width(5)

    for c in ['red', '#00ff00', '#fa0', 'rgb(0,0,200)']:
        t.color(c)
        t.forward(100)
        t.left(90)

    # dot() and write() do not require the pen to be down
    t.penup()
    t.goto(-30, -100)
    t.dot(40, 'rgba(255, 0, 0, 0.5')
    t.goto(30, -100)
    t.dot(40, 'rgba(0, 255, 0, 0.5')
    t.goto(0, -70)
    t.dot(40, 'rgba(0, 0, 255, 0.5')

    t.goto(0, 125)
    t.color('purple')
    t.write("I love Brython!", font=("Arial", 20, "normal"))

    turtle.done()

except Exception as err:
    alert('Exception: ' + str(err))

</script>

</body>
</html>
=== CODE ENDS HERE ===

On Tue, Nov 17, 2020 at 6:18 AM Pantsik Grifoi <pant...@gmail.com> wrote:

Brython is a very cool project. With it you can write python scripts directly inside an html document. However, I can't figure out how the turtle graphics library works with Brython. They have a demo page with turtle graphics: https://www.brython.info/gallery/turtle.html but I want something simpler, without the demo selector and without showing the python code in the html page.

Has anyone written a simple turtle demo with Brython? If so, what is the html document for it from start to finish?

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/brython/035dc845-f7bf-4c89-b896-94742fdc92f9n%40googlegroups.com.

Pantsik Grifoi

unread,
Nov 17, 2020, 12:46:30 PM11/17/20
to brython
Martyn, thanks for yor answer. Unfortunately it doesn't work for me.
I changed the 2 script lines to:
<script type='text/javascript' src='https://cdn.jsdelivr.net/npmbr...@3.8.8/brython.min.js'></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bry...@3.8.8/brython_stdlib.js"></script>
I opened a pseudo web server with python -m http.server and I executed the command localhost:8000/turtle-demo.html   where the turtle-demo.html contains your code with the above correction. I get the following response from the web server:
::1 - - [17/Nov/2020 19:36:17] "GET /turtle5.html HTTP/1.1" 200 -
::1 - - [17/Nov/2020 19:36:18] code 404, message File not found
::1 - - [17/Nov/2020 19:36:18] "GET /favicon.ico HTTP/1.1" 404 -

and the following result to my Chrome page, with no graphics displayed:
Brython Turtle Demo

The turtle graphics should appear above here

I also tried with the Brython version 3.9.0 with the same results. Does it work to your PC? Any ideas what might be the problem?

Pantsik Grifoi

unread,
Nov 17, 2020, 1:01:25 PM11/17/20
to brython
Wait, it worked! After a couple of minutes the graphics popped up!
Is it normal to wait that long? Next run was much quicker.

Raspberry Pieman

unread,
Nov 17, 2020, 1:47:44 PM11/17/20
to bry...@googlegroups.com
It might be a bandwidth problem - try downloading the 2 Brython libraries to the same folder as the html and point the html to the local ones.
Martyn 

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/bf4a88f4-f59a-40d3-920d-2ab52d0e5023n%40googlegroups.com.

Pantsik Grifoi

unread,
Nov 18, 2020, 7:16:16 AM11/18/20
to brython
Martyn, thank you so much for your help!
First time run takes about 14 seconds on my PC. Second run is almost instant. This doesn't change when I load the libraries localy.
Does it run instantly on your PC from the first run (i.e. when you make a change in html code and rerun it) ?

André

unread,
Nov 18, 2020, 9:04:59 AM11/18/20
to brython
On Wednesday, 18 November 2020 at 08:16:16 UTC-4 pant...@gmail.com wrote:
Martyn, thank you so much for your help!
First time run takes about 14 seconds on my PC. Second run is almost instant. This doesn't change when I load the libraries localy.
Does it run instantly on your PC from the first run (i.e. when you make a change in html code and rerun it) ?


It normally should not take that long.  However, as *I* wrote for the demo (yes, I am the guilty party who wrote the "new" turtle module quite a while ago):

" The first time you do this, Brython has to do extra work to translate the turtle module from Python into Javascript; subsequent runs will be faster."

Note that the translation stage takes about one second for the simplest demo on the Brython site.  I have no idea why it would take so long on your own computer.  Can you try with different browsers?  I see significant time differences between Chrome and Firefox when I run the "Complex scene" example from Brython's site.

André Roberge

Raspberry Pieman

unread,
Nov 18, 2020, 10:41:39 AM11/18/20
to bry...@googlegroups.com
André  - Thanks for your input and for your original gallery example. The gallery is very helpful for us, starting out with Brython.
Pantsik - In my case, I only get 2 - 3 seconds delay using Firefox, Vivaldi, Opera and Edge(latest). 
So I am puzzled by the 14 seconds delay.
I don't know what your eventual goal is, and if you really need turtle, but if you just want to display graphics, 
it is much faster to use SVG or canvas - see the gallery for examples.
Regards, Martyn

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/4db514ef-381e-4bd9-9433-900fd2fcc317n%40googlegroups.com.

Pierre Quentel

unread,
Nov 18, 2020, 12:04:02 PM11/18/20
to brython
Hello,

I have also noticed that loading the module takes a few seconds the first time (much less on next runs if brython_stdlib.js is used, thanks to the cache). This is because it imports 2 modules from the standard distribution, copy and inspect, which themselves import a few dozens of modules. Without the cache, loading and translating all these Python scripts is not immediate.

In this gist I have slightly modified the code of turtle.py to avoid importing these modules. For copy, all it takes is to use the dict method copy() instead of copy.copy(dictionary). For inspect I had to make a little more changes, ignoring the signature of methods and replacing it by (*args, **kw) - maybe there are side effects that I don't think of.

With these changes, even without brython_stdlib.js the example runs almost without any delay.

André, que penses-tu de cette version ?
Pierre

André Roberge

unread,
Nov 18, 2020, 12:28:12 PM11/18/20
to bry...@googlegroups.com
On Wed, Nov 18, 2020 at 1:04 PM Pierre Quentel <pierre....@gmail.com> wrote:
Hello,

I have also noticed that loading the module takes a few seconds the first time (much less on next runs if brython_stdlib.js is used, thanks to the cache). This is because it imports 2 modules from the standard distribution, copy and inspect, which themselves import a few dozens of modules. Without the cache, loading and translating all these Python scripts is not immediate.

In this gist I have slightly modified the code of turtle.py to avoid importing these modules. For copy, all it takes is to use the dict method copy() instead of copy.copy(dictionary).

I can't figure out why I didn't use this. Perhaps the first turtle module for Brython required the use of a deep copy, but I should have noticed that it was not needed.

 
For inspect I had to make a little more changes, ignoring the signature of methods and replacing it by (*args, **kw) - maybe there are side effects that I don't think of.
I cannot think of any either; I simply copied that code from the original, without spending any time thinking about ways to simplify it.
 

With these changes, even without brython_stdlib.js the example runs almost without any delay.

André, que penses-tu de cette version ?

I am not set up to try it, but looking at the code and comparing with the current module, it definitely looks like an improvement.  I'd say go for it! :-)

André

 
Pierre

Le mercredi 18 novembre 2020 à 15:04:59 UTC+1, André a écrit :
On Wednesday, 18 November 2020 at 08:16:16 UTC-4 pant...@gmail.com wrote:
Martyn, thank you so much for your help!
First time run takes about 14 seconds on my PC. Second run is almost instant. This doesn't change when I load the libraries localy.
Does it run instantly on your PC from the first run (i.e. when you make a change in html code and rerun it) ?


It normally should not take that long.  However, as *I* wrote for the demo (yes, I am the guilty party who wrote the "new" turtle module quite a while ago):

" The first time you do this, Brython has to do extra work to translate the turtle module from Python into Javascript; subsequent runs will be faster."

Note that the translation stage takes about one second for the simplest demo on the Brython site.  I have no idea why it would take so long on your own computer.  Can you try with different browsers?  I see significant time differences between Chrome and Firefox when I run the "Complex scene" example from Brython's site.

André Roberge
 

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/brython/bf4a88f4-f59a-40d3-920d-2ab52d0e5023n%40googlegroups.com.

--
You received this message because you are subscribed to a topic in the Google Groups "brython" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/brython/zBaCGkSIXp0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to brython+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/brython/ea331262-8fc6-4f9b-9236-877331ce94b0n%40googlegroups.com.

Pantsik Grifoi

unread,
Nov 19, 2020, 3:45:37 AM11/19/20
to brython
Happy that my post became the motive for a possible turtle library improvement!

@Martyn: The reason I stick with turtle to make my game is that I don't want to insert javascript inside my python code. As far as I understand, Canvas animation requires javascript instuctions. From what I read, SVG can be inserted in python via the svgwrite library but the instructions seem more difficult than these of turtle. I have already made a couple of turtle games and I know how to handle the graphics there.

Pantsik Grifoi

unread,
Nov 28, 2020, 2:59:00 AM11/28/20
to brython
I am trying to assign a GIF image to a turtle in Brython but I think that the register_shape method is not implemented.
Is there anything I can do?
I am trying the following lines:

screen = turtle.Screen()
screen.register_shape('image.gif')
sprite = turtle.Turtle()
sprite.shape('image.gif')

André Roberge

unread,
Nov 28, 2020, 5:21:17 AM11/28/20
to bry...@googlegroups.com
On Sat, Nov 28, 2020 at 3:59 AM Pantsik Grifoi <pant...@gmail.com> wrote:
I am trying to assign a GIF image to a turtle in Brython but I think that the register_shape method is not implemented.
Is there anything I can do?

Other than modifying the source code of the Turtle module itself, I'm afraid that the answer is no.

All the drawings in Brython's turtle module are made using scalable vector graphics (svg)
(https://en.wikipedia.org/wiki/Scalable_Vector_Graphics), and all the functions/methods
result in either creating an svg element or changing its attributes (for example, its position),
most often using the builtin animate method of such objects.
There is currently no option to add other types of elements, such as a gif image,
nor are there any options to interact with turtles using a mouse: the way drawings are done
is that a "scene" is created (like the script of an entire movie) and the entire scene is
then animated following a predetermined sequence.

The original Python turtle module was designed with the assumption that the drawings
were done on a Tkinter canvas.  It would have been possible to use an html canvas for Brython's
turtle module but I believe that when the first version was written (which I did not write but relied
upon to create the existing version), it was not possible to do animations as smoothly using the html canvas compared with using
svg. 

André
 

Pantsik Grifoi

unread,
Nov 28, 2020, 2:28:02 PM11/28/20
to brython
Thanks for your answer  André .
It seems that turtle graphics is not the way to go for me. 
I have written a game in Python without the graphics yet and I want to transfer it into html via Brython. I don't need scalable graphics and I don't know any javascript.
What I realy need to transfer my game into html are the following:
1. A way to assign a gif image to something like a sprite that I can animate.
2. A way to read the mouse clicks on specific positions on screen.
3. A way to display some text on specific positions on screen.

What graphics library or libraries should I use?  
Can I import these libraries in Python and use them in a pythonic environment or do I have to use an html environment to further develop my game?

Thanks in advance,
Panos

Francisco Javier Vazquez Umbria

unread,
Nov 30, 2020, 3:50:16 AM11/30/20
to brython
I will recommend to use the Canvas Javascript API:

just use the javascript API calls from brython. Use Brython for the game logic, and the Canvas API for the graphics engine.

Pantsik Grifoi

unread,
Nov 30, 2020, 5:39:26 AM11/30/20
to brython
Thank you very much! I will definetely try it.
Reply all
Reply to author
Forward
0 new messages