Tutorial: The Living Forest


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

In this project, we are going to be using our class's methods to update its properties to create a more dynamic system. For example, you can call a grow() method to modify a width property to make a tree grow.

To start, you are going to add an age() method that will change our trees as time passes. We're going to use this passage of time to allow trees to spawn, grow, change colors, and eventually die, representing a full life cycle in our terrarium.

Here is an example of a completed terrarium, changing with the passage of time. Note the growth, and color changes for our trees.

See p5 documentation here.
See JS property documentation here.



Directions
  1. Lets make your forest dynamic! Now your forest does not change after you create it. In this tutorial, we are going to make the forest change before your eyes, that is, in real time. p5 does this in the draw() function.

  2. So first, declare (create) your trees array outside of your setup() function. As you create your trees, push them them to the trees array as before.

  3. Next, move your code to iterate through all your trees and call each tree's show() method, to be in the program's draw() function instead of the setup() function. This will make the trees update in real time instead of only once. Does your forest still look good?

  4. Now let's make your tree's grow. Add an age() function to your Tree superclass. In your age() function, increase the tree's size property. Call each tree's age() function in draw(). Your trees should now get bigger and bigger as time passes.

  5. At this point, you'll have created a forest of immortal trees that grow indefinitely. To prevent that, let's stop our trees from living forever. Create a currentAge property for our Tree class. In our age() function increment the currentAge property. Finally, set a maxAge for trees. Trees with a currentAge beyond their maxAge should no longer call show().

    BONUS: How can we fade our trees gently away, rather than having them suddenly disappear?

  6. Now after a period of time, all of your tree's die and you will be left with a blank canvas. Instead of creating 50 trees all at once, create a new tree every few seconds. Now your forest should be a mix of young and old trees that spawn, grow old, and die!

  7. As tree's age in real life, more than their size changes. Instead of using a random leafColor for our trees, change a Tree's leaf color based on its currentAge to show time is passing. BONUS: How can we make the color changes smooth?

  8. Next let's add fruit to some of your trees. For some tree subclasses (for example EvergreenTree's don't grow fruit), add a showFruit() function that is called from Tree's show() function. Play around with where your tree spawn on the tree, and when they start, and end appearing until you are happy.

  9. Continue to tweak the styling of your tree's changes until you are satisfied!








(c) 2019 by Code Craft Academy