Lab 7: Turtle Graphics
CS145: Images and Imagination, Spring 2010

Goals Learn about String concatenation and the print command. Learn about function return values. Learn about recursion. Learn about Fibonacci Series. Create fractal images using recursion.

Resources and Readings

• Processing's online reference: String, print(), println()
• In our text:
  • pp. 20-21: String concatenation
  • pp. 194-196: Function return values
  • pp. 201-204: Recursion
  • p. 153: Mandelbrot Set
• Fibonacci Sequence
  • Fibonacci number
  • In Nature

Directions

• String concatenation: Read about string concatenation in your text as well as the print() and println() commands in the online reference. Suppose you have the following items declared in Processing:

  int age = 21; String name = "Frank";

  How would you print to the console the sentence "Frank is 21 years old" using the variables age and name. Practice writing other thing that combine literal strings (e.g. "years old") with variables of types string, int, float, boolean, etc.

• Return values: Read about function return values in your text. For example, study the following code:

  void setup() { int a = 23; int b = 6; int sum = add(a,b); println("The sum of a=" + a + " and b=" + b + " is equal to the sum " + sum); } int add(int a, int b) { return a+b; }

  The add() above is said to have a return value of type int. Note, you could have simplied the setup() function as follows:

  void setup() { int a = 23; int b = 6; println("The sum of a=" + a + " and b=" + b + " is equal to the sum " + add(a,b)); }

  Add additional functions for subtract() and multiply(). Test them out by printing out sample results as was done above for add().

  Once you have these functions, do you see that you can use the function return values to calculate more complex expressions such as c*(a+b) as follows:

  void setup() { int a = -2; int b = 6; int c = 12; int result = multiply(c, add(a,b)); // do you see what this is doing? println("The result is " + result); }

• Recursion: In class, we will go over how recursion works. Examine the examples in class and the example below.

  // Prints out the numbers from 0 to 10 void setup() { printNums(10); } void printNums(int n) { if (n<0) { // don't really need this but it helps to see the stopping criteria return; } else { printNums(n-1); println(n); } }

  How do you modify the above code to do the following:

  • print the numbers in reverse order
  • add the numbers from 1 to 10
  • multiply the numbers from 1 to 10

• Fibonacci Numbers: Read about the fibonacci sequence (see links above). The sequence can be computed recursively by noting that F(n) = F(n-1) + F(n-2). Write processing code that calculates the fibonacci sequence for some range of n. That is, complete the following code:

  void setup() { for (int n = 0; n < 10; n++) { println("The fibonacci number for " + n + " is " + fib(n)); } } int fib(int n) { // fill in the code here }

  The program should output

  The fibonacci number for 0 is 0 The fibonacci number for 1 is 1 The fibonacci number for 2 is 1 The fibonacci number for 3 is 2 The fibonacci number for 4 is 3 The fibonacci number for 5 is 5 The fibonacci number for 6 is 8 The fibonacci number for 7 is 13 The fibonacci number for 8 is 21 The fibonacci number for 9 is 34

• Circle Drawing: Here is an example of using recursion to draw an image. In this case, each time the program recurses, the radius of the circles decreases in size. Read through the code to try to make some sense of it. Do you understand why the number of circles of a given radius increases as the radius decreases?

  Note, in the image, the colors have been added to help you differentiate circles of different sizes. Each radius has a specific color. There is 1 yellow circle, 2 green circles, 4 cyan circles, etc. Each level of recursion increases the number of circles by a power of 2.

  void setup() { size(400,400); smooth(); startHere(); } void startHere() { background(255); stroke(0); noFill(); drawCircle(width/2, height/2,width/2); save("circles.jpg"); } void drawCircle(float x, float y, float radius) { ellipse(x,y,radius,radius); if (radius > 8) { // what happens if you change the 8? drawCircle(x + radius/2,y,radius/2); drawCircle(x - radius/2,y,radius/2); } }

  What happens if you change the 8 (int drawCircle) to a larger or smaller value? Try it.

  What happens if you modify drawCircle by adding two additional lines:

  void drawCircle(float x, float y, float radius) { ellipse(x,y,radius,radius); if (radius > 8) { // what happens if you change the 8? drawCircle(x + radius/2,y,radius/2); drawCircle(x - radius/2,y,radius/2); drawCircle(x ,y + radius/2, radius/2); drawCircle(x ,y - radius/2, radius/2); } }

• Turtle Graphics: (This is the part that will be turned in!)

  Run the following Processing code. Study it carefully so you understand what it is doing. We will go over it in class but, to really understand it, you need to step through the code yourself.

  void setup() { size(400,300); background(255); float len = 300; int depth = 2; // change the depth here. goTurtle(len,depth); save("turtle.png"); } void goTurtle(float len, int depth) { resetMatrix(); translate((width-len)/2,(height)/2); recurse(len,depth); } void recurse(float l, int depth) { if (depth == 0) { line(0,0, l, 0); translate(l,0); return; } float len = l/3.; recurse(len,depth-1); rotate(radians(-60)); recurse(len,depth-1); rotate(radians(120)); recurse(len,depth-1); rotate(radians(-60)); recurse(len,depth-1); }

  Do the following:

  1. Try changing the value of depth in setup() to see how the image changes. The values of depth should range from 0 to around 3. The resolution isn't high enough for anything much larger than 3.

  2. In the above code, when depth is set to 1, one gets the image

     Modify the recurse() function so that the depth=1 image looks like following instead: The values at each of the depths should now give you an image that looks like

     depth=0	depth=1	depth=2

  3. In the above code, when depth is set to 0, one gets an image that is just a horizontal line. Now, modify the goTurtle() function so that the starting shape (i.e. what you get when depth=0) is a square.

     

     If you run the code with both of the changes you made in goTurtle() and recurse() then you should get the image:

     

  4. When modifying recurse as in the above problem, it is important that:

     1. Each segment is the same length.
     2. The turtle begins and ends aimed in the same direction (towards right) (see image below)
     3. The length remains the same at all depths (see image below)
       

     Modify recurse() again but this time with any shape you want as long as it satisfies the above three criteria. It helps to draw the shape on a piece of paper in order to get the lengths and angles correct. You don't have to get the criteria exact, but try to come close.

     Below is an example. Each segment is drawn with a different color so they are easier to see.

     

  5. Now, relax the criteria, and see if you can come up with an interesting image. By relaxing the criteria, the entire shape will likely shrink or grow at each recursion level. It may also move off the screen altogether. You will just need to experiment. You can also combine it with color changes and loops or other things we have learned.

Deliverables

Friday, March 19, before class:

Turn in via Wise a single zipped file containing your Processing sketch for your code created in 4) and 5). Be sure to include image files of what your code produces.

Before turning in any of your code, make sure that you have cleaned it up!