During the renaissance in Germany around the 16th century, Germans began the tradition of decorating a tree inside the house near Christmas time. In the centuries that followed, this tradition spread to England, the United States, and many other countries around the world. In these countries, early December is the time to go out and find the perfect Christmas tree. It is not always easy to find a tree of the ideal height and type for a given house. Wouldn’t it be nice if we could create a custom tree of just the right proportions?
While this is quite challenging to do in nature, it is not so hard to do with code. In this article we build off of the concepts introduced in the October issue of Beanz (Coding with Pyret), expanding our abilities to use the Pyret editor in order to create a custom tree function.
First, let’s begin by just making a tree in the Pyret editor: https://code.pyret.org/editor.
This requires making a green triangle (the treetop) placed above a brown rectangle (the trunk).
The code (and resulting image) for the treetop is as follows:
In case you missed the October issue, the code above can be summarized as follows:
- include image: the first command we use when we plan to access Pyret’s image library (ie. when we plan to have shapes and other images in our code).
treetop: the name of the variable we chose to store a dark green equilateral triangle that we will use for the tree top.- After entering these two lines of code on the left side of the editor, click the blue Run button.
- In order to see the “tree top”, on the right side of the editor we type
treetopand hit the enter key (do not click Run when working on the right side of the screen).
We follow the same line of thought to create a tree trunk using the rectangle function. In Pyret, the rectangle function requires four inputs: the width, the height, the filling type (solid or outline), and the color. The code (and resulting image) for the tree top and the trunk is as follows:
Next we can use the built-in function above(image1, image2) to center the treetop above the trunk.
We have successfully made our first tree!
We may want to quickly be able to make many of these trees, so we will save the code for our tree in a variable called tree (on the left side of the window). This way, every time we want a new tree, we simply enter the variable name tree on the right side and hit enter. Remember, every time you put new code on the left side of the editor, you need to click Run in order for it to register.
Now that we have a tree, let’s try to generalize our code so that we can easily make trees of different sizes, proportional to this tree.
We start by considering the three numbers involved in the code above: 50, 25, and 15. If we can figure out what percent of 50 is 25 as well what percent of 50 is 15, we can easily make proportional trees.
Without having to think too hard, we might notice that 25 is half of 50, or in other words, 50 * 0.5 = 25. So if we store 50 in a variable called size, we can say that the height of the trunk is size * 0.5.
The code above is updated to reflect this idea. We get the exact same tree, but now we can change the 50 and the height of the trunk will change proportionally.
We need to do the same for the width of the tree, currently set to 15. What percent of 50 is 15? One way to figure this out is to write the numbers as a fraction 
. When we simplify this we get 
. To avoid more calculations, we won’t convert three tenths into a decimal. Instead, we will just use the fraction in our generalization as shown in the code below:
To make different size trees that are proportional to our original tree, all we need to do is change 50 to another number, and the rest of tree will be updated in proportion:
We have now generalized our original tree in terms of the size of the treetop!
So far we have been using built-in functions such as rectangle(), triangle(), and above() to create our own shape (a simple tree). In the next section of the article we will create our own function called customTree() that takes in two inputs (called arguments) and makes a tree based on them. The two arguments will store the size of the tree top and the color of the tree top (we’ll call them top_size and top_color respectively). This is a very advanced topic so hold on tight!
We start the process on Line 9 in the Pyret editor by entering the following:
The line starts with the “word” fun, which is short for function in Pyret. This tells the editor that we are about to create a function. We follow fun with the name we chose for our tree, customTree. The arguments in the parentheses are the two aspects of the tree that we’ll be able to customize (the size of the tree top and the color of the tree top). Recall, since we already generalized the size of the entire tree, once we enter the size of the tree top the rest of the tree will be proportional to it.
The colon at the end of the line is part of the syntax in Pyret when writing a new function.
The following code does the trick:
This is quite a mouthful. But if we look carefully, we’ll realize it is not all that different from what we have already done. We are putting a triangle above a rectangle. The pseudocode (basic idea of the code without all the details) might look like this:
above(triangle(), rectangle()).
In essence, we are just putting a triangle above a rectangle. However, the arguments that go into the triangle and rectangle functions are in terms of the arguments that people using our functions will type in.
The size of the triangle is whatever the user types in when they use our customTree() function. We called this top_size. The color of the triangle is whatever color the user types in when they use our function. We called this top_color. The rectangle is created with the same code that we used earlier in this project, however we had to change the variable size to top_size, as that is how we’re referring to it in our customTree() function.
In Pyret, we must tell the editor when we are done writing our function. We use the word end to do this. Now we can Run our code and test it out on the right side of the editor.
The image below shows the final code for our customTree() function on the left side of the editor, as well as a couple custom trees that we created by calling our function on the right side of the editor.
Interested in learning about more built-in Pyret functions? How about more information on creating your own functions? Try out the links below to continue learning about coding with Pyret!
Learn More
Pyret image functions and colors
https://www.pyret.org/docs/latest/image.html
Lesson plans/projects using Pyret (created by Bootstrap World)
Pyret background information
https://www.pyret.org/pyret-code/index.html
