Giter Site home page Giter Site logo

fractaltree's Introduction

Fractal Tree

How to draw a tree

alt text

Imagine you were describing how to draw a tree. You might say:

  • Draw a vertical line
  • At the top of the line, draw two smaller lines ("branches") in a v shape
  • At the ends of each of those two branches, draw two even smaller branches
  • Keep repeating the process, drawing smaller and smaller branches until the branches are too small to draw

This process of repeating the same design at a continually decreasing scale is an example of a Fractal. Using fractals to draw trees can give some interesting and beautiful patterns. In this assignment we will use a recursive branching function to create a fractal tree.

Suggested steps to completing this assignment:

  1. Fork and clone down this repository

  2. Run the program. It should draw a single green line on the screen. This will be the "trunk" of the Fractal Tree. Notice the three private variables. Changing the numbers in these private variables will change the appearance of the tree, i.e. how much smaller the branches are, how small the branches will get and the angle between the branches.

  3. Now we'll write a function to draw the branches on the tree Here's some pseudocode describing the drawBranches function:

    • declare two local double variables: angle1 and angle2. These will hold the angles of the branches. Initialize one to angle plus branchAngle and the other to angle minus branchAngle. This will create the V shape of the branches.

    • reduce branchLength by multiplying it by fractionLength. This will be the (shorter) length of the new branch.

    • While the starting point of the new branches is just the endpoint of the previous branch or trunk, we'll have to use some trig to calculate the branches endpoints before we can draw them. Declare four local variables endX1 endY1 endX2 endY2. We can calculate the endpoints with code like:

      int endX1 = (int)(branchLength*Math.cos(angle1) + x);
      int endY1 = (int)(branchLength*Math.sin(angle1) + y);

    • Now, draw two lines, both starting from (x,y) but ending at the two different end points you just calculated.

  4. Now go back to the draw function, and uncomment the call to drawBranches. You'll fill in the four arguments: 320 and 380 (the endpoint of the trunk is the starting point of the two branches) 100 (the length of the trunk) 3*Math.PI/2 (The angle of the trunk--a vertical angle in Java's system of radian measure). You should now see two branches in a V shape on the end of the trunk.

  5. Now, the magic starts! We're going to use recursion to put branches on the branches! At the end of the drawBranches function write code so that if branchLength is larger than smallestBranch, drawBranches is called twice, once for each of the endpoints, e.g. (endX1,endY1). Be sure to use the two different angles for the two different branches. You should now see a fully formed Fractal Tree!

Adding Keyboard input

The program becomes more interesting when you can adjust branchAngle fractionLength and smallestBranch. Add a keyTyped() function that allows the user to adjust those values and then call redraw() to draw the screen again.

Extensions: You can have the width of the branches change with the length. You can also introduce a little bit of randomness for more realism. You could also add a third, middle branch to make a more realistic looking tree. There are also many other types of Fractal Trees. Browse the internet and see what ideas you can come up with, your fractal tree doesn't have to look like any other.

Samples of Student Work

Dante
Zachary
Jingbin
Kenta
Lucy

fractaltree's People

Contributors

simart avatar sereenbenchohra avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.