Learning to code often feels like taking apart a clock to see how it works. Coding combines curiosity and play to see what might happen.

This project lets you create something simple—two trees—and then tweak it to see what else might be possible with the code. We’ll use CodeGuppy, a fun, online site that includes a coding platform for JavaScript. The language you use doesn’t matter at this point, because all languages share common ideas and problems to solve.

Go to the CodeGuppy.com website, log in or create an account, then go to their code workspace URL here: https://codeguppy.com/code.html. You should see a blank code workspace like this:

The code panel is on the left column and code output displays on the right side of the workspace. Notice the Play button at the top right of the left side code panel. Clicking the Play and Stop button toggles any code to display (Play) or not display (Stop) in the right side code output panel. Now type or copy/paste this JavaScript code into the Code panel on the left side of the workspace.

Then click the Play button. The workspace should look like this:

Now let’s have some fun. See the first line of code: noStroke()? I wonder what that does! Use your mouse to select that first line of code, then delete it. Press the Stop button, then the click the Play button.

Notice every object, including the frame, has a line around it. Setting noStroke() as the first line of code allows us to then add lines around other objects. Otherwise, adding a line around an object would make for a thicker line.

Next, let’s look at the two line-related functions CodeGuppy provides: stroke(color) and strokeWeight(weight). The words color and weight between the parentheses are placeholders. We’ll put in a color value, red, and a weight value, 10. Add these two lines of code at the start of the first tree definition:
// First tree
stroke("red");
strokeWeight(10);

Don’t forget to add a semicolon at the end of each line, and double quotes around the color name red. Your code should look like this:

Notice how both trees have a thick border around them, despite coding only the first tree to have a thick red border?

Can you think of a way we might get rid of the border around the second tree? What might work?

What if we add noStroke() code to the top of the code that defines the second tree? What do you think will happen? Press the Stop button then the click the Play button to see the changes.
// Second tree
noStroke();

It works. Adding noStroke() to a specific block of code acts like an eraser to get rid of the thick red border around the second tree. And adding stroke(“red”) and strokeWeight(10) to the definition of the first tree applies to all code that follows.

With these basic changes, it’s easy to see what else you might tweak. And don’t worry too much about breaking things: copy or retype the code at the start of this article to begin again.

If you’re wondering about some possible colors besides red, check out https://www.w3schools.com/ colors/colors_names.asp.

Here’s another neat idea. Compare the triangle() code for the first tree with the second tree. Notice anything different? For the second tree, all the parameters use a plus + sign or minus – sign to add or subtract two parameters.

The plus and minus signs are a way to use JavaScript code to place a second object, or more objects, to a flat workspace.

The triangle function takes six parameters to define the x.y coordinates of the three corners of a triangle: triangle(x1,y1,x2,y2,x3,y3) with x1,y2 for the top point, x2,y2 bottom left point, and x3,y3 bottom right point. And the rectangle function takes four parameters: rectangle(x,y,height,width). Notice that using height and width from a start x,y coordinate is easier than defining the four x,y coordinates
of a rectangle. It’s clever. All measurements are in pixels because a pixel is a uniform unit of measure with all computers.

If you want to learn more about CodeGuppy’s JavaScript functions, look up their Draw with Code Projects Book at https://codeguppy.com/site/download/draw_with_code.pdf.

It’s fun and challenging to experiment with code by asking “what if?”. You can learn a lot!