Turtle and draw a tree with Transcrypt

today I want draw a tree in browser with Transcrypt. I have code in Python which is work in Skulpt:

import random
import turtle

def tree(size, myTurtle):
    myTurtle.pensize(size / 20)

    if size < random.randint(1,2) * 20:
        myTurtle.color("green")
    else:
        myTurtle.color("brown")

    if size > 5:
        myTurtle.forward(size)
        myTurtle.left(25)
        tree(size - random.randint(10, 20), myTurtle)
        myTurtle.right(50)
        tree(size - random.randint(10, 20), myTurtle)
        myTurtle.left(25)
        myTurtle.penup()
        myTurtle.backward(size)
        myTurtle.pendown()

window = turtle.Screen()
window.setup(800,600)
window.bgcolor("white")

myTurtle = turtle.Turtle()
myTurtle.color("brown", "blue")
myTurtle.left(90)
myTurtle.speed(0)
myTurtle.penup()
myTurtle.setpos(0, -250)
myTurtle.pendown()

And I want to run it in browser to get this effect:

Don't worry about text over the tree, is in polish ;) I run this in Skulpt, maybe you hear about it, effect you have above. Now I want to run this in Transcrypt and compare it to Skulpt and Brython.

As you can see here: http://www.transcrypt.org/live/turtle_site/turtle_site.html

Transcrypt somehow can draw with turtle.

What change in this code, to work with Transcrypt?

Can you help me with this?

Solution

First: you need some modification in code because some functions in Transcrypt have different names or don't exist. You have to add turtle.done() to dislay result.

turtle_tree.py

import random
import turtle

def tree(size, myTurtle):
    myTurtle.pensize(size / 20)

    if size < random.randint(1,2) * 20:
        myTurtle.color("green")
    else:
        myTurtle.color("brown")

    if size > 5:
        myTurtle.forward(size)
        myTurtle.left(25)
        tree(size - random.randint(10, 20), myTurtle)
        myTurtle.right(50)
        tree(size - random.randint(10, 20), myTurtle)
        myTurtle.left(25)
        myTurtle.up()       # penup()
        myTurtle.back(size) # backward(size)
        myTurtle.down()     # pendown()

#window = turtle.Screen()   # doesn't exists
#window.setup(800,600)      # doesn't exists
#window.bgcolor("white")    # doesn't exists

myTurtle = turtle.Turtle()
myTurtle.color("brown", "blue")
myTurtle.left(90)
myTurtle.speed(0)
myTurtle.up()         # penup()
myTurtle.goto(0, 250) # setpos(0, -250)     
myTurtle.down()       # pendown()

tree(135, myTurtle)

myTurtle.done() # display

Install Transcrypt using pip

pip install transcrypt

Compile Python into JavaScript

transcrypt turtle_tree.py

You get folder __javascript__ with file turtle_tree.js (and turtle_tree.min.js, turtle_tree.mod.js but you don't need it now)

You need HTML file which loads turtle_tree.js and has <div id="__turtlegraph__"> to display result.

turtle_tree.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8"/>
    <title>Turtle Tree</title>

    <style>
        #__turtlegraph__ {
            height: 600px;
            width: 800px;
        }
    </style>
</head>

<body>

    <div id="__turtlegraph__"></div>
    <script src='turtle_tree.js'></script>

</body>

</html>

Put HTML file in __javascript__ folder and open it in browser.

Tested on Python 3.5.2 / Linux Mint 17.3 / Firefox 48.0 - it draws in 1 second (or less).