Tutorial: Many Trees

Terrarium: Many Kinds of Tree

This is the second project on the way to building your virtual Terrarium. The first project can be found here. If you haven't completed it yet, please start there.

In this project, we'll learn about subclasses. A subclass is an extension of an already existing class that can be used to add new behavior while also inheriting methods from its parent, the superclass.

Here is an example: lets say you have a class called Car. It has properties like speed and color, and methods like drive(), stop() and blowHorn().

You can extend Car to create subclasses FlyingCar and ConvertibleCar. They will have all the methods that Car has (including constructor()!). They can also override (replace) those methods, or add completely new ones!

So ConvertibleCar might add a method openRoof(). FlyingCar might override the drive(), and the stop() methods to have the car fly. The superclass Car wont have these changes.

Here is what these Car classes might look like.

So a subclass is a great way to re-use all the code in original class, while easily adding new capabilites.

In this exercise you are going to create subclasses called EvergreenTree and RedwoodTree, and one your own design. Each will have unique traits and you'll use these subclasses to add variety and life to your forest, much like a real one!

Here is an example of a completed terrarium with different species of tree.

See p5 documentation here.
See JS subclass documentation here.

	Directions
	Let's first make some updates to our Tree code to make subclassing easier. Split the code from show() into two new functions: showTrunk() and showLeaves(). Call these new functions appropiately in your show() function. Test things to ensure your forest functions the same way, and show your instructor. OK now we are ready to make new Tree types using subclass. Let's begin by creating a new EvergreenTree subclass. Use the extends keyword to extend Tree like this: class EvergreenTree extends Tree { showLeaves() { // Change the draw code to create an evergreen's unique appearance } } Modify your showLeaves() function to give the EvergreenTree its Christmas-tree-like appearance. HINT: p5's has a triangle() function that can help. Change the setup() function to create EvergreenTrees so you can see how they look on the screen. Now modify the setup() function again to randomly create either a Tree or an EvergreenTree. Check that your forest now has both kinds of trees. Now let's add another subclass: RedwoodTree. This tree will have a very tall trunk, and leaves clustered in bundles at the top. This time we will overwrite Tree's showTrunk() function to create a very tall trunk. Then we will overwrite Tree's showLeaves() function to create a bundle of small leaves near the top. Your RedwoodTree class should look something like this: class RedwoodTree extends Tree { showTrunk() { // Change the draw code to create a very tall trunk } showLeaves() { // Change the draw code to create bundles of small leaves } } In your setup() function, add RedwoodTree to the list of trees that can be randomly selected. Come up with a new variety of tree and create your own subclass. Be creative, but think of what properties you can change to generate a new tree. You could change the way the leaves look, change the the size or colors, anything you can imagine. Just be sure to allow that tree to be selected in your setup() function. Your forest should now have 4 different trees that each have a unique look. Next we'll make our forest come alive by having trees evolve with the passage of time!