teaching | Marc Liberatore

A Gentle Graphical Introduction to Recursion

Mon, 07 Oct 2019 10:10:00 -0400

These are notes from an in-class exercise on recursion I did in a First Year Seminar. The basic idea is an old one: to draw a tree recursively.

(This particular exercise is directly inspired by a talk Dan Garcia gave at a recent SIGCSE about part of their CS 10 (CS Principles) class, The Beauty and Joy of Computing.)

Recursion and fractals

Many things can be expressed “recursively” that is, partly or wholly in terms of themselves. This is usually where your CS teacher immediately brings up factorial. BUT I WILL MANFULLY RESTRAIN MYSELF!

Instead, I’ll point out two things to get us started:

First, that recursion is a beautiful, simple (though maybe not easy) way to think about computation. The dual of the Turing machine is the lambda calculus, and it’s elegantly powered by recursion.

Second, that recursion is all around us in nature, in the form of fractals, which when used colloquially means “things that are similar to themselves over extended, but finite, scales.” (Show some examples from Wikipedia.)

We’re going to explore the concept of recursion graphically today, rather than with factorials and Fibonacci and the like. Well, I will probably do a little bit of factorial stuff at the end, but only because I’m contractually required.

Getting started

So, we’re going to learn to draw beautiful trees that look like this (slides).

But we’ll start with something simpler).

The important thing to see is that this tree is self-similar; in other words, it’s fractal: each part contains smaller versions of itself. (on board)

We’re going to draw this in Processing. But first, some preliminaries.

Setting up processing

Processing lets you do pretty arbitrary things (it’s Java, after all). We’re going to tame the complexity somewhat by doing “turtle graphics” aka “pen graphics.” In other words, we’re going to draw everything in terms of pen. The pen has three pieces of state: X, Y, and direction. This is similar to a turtle with a pen attached crawling around on a piece of paper, or my hand on the board, sorta.

float penX;
float penY;
float penDirection;

OK. So far, so nothing. Let’s set up the sketching area:

void setup() {
  size(600, 600);
  penX = width / 2;
  penY = height / 2;
  background(255);
  noLoop();
}

Line by line, what’s happening here?

size(600, 600); creates a viewable (x, y) rectangle to draw on – it’s the sketch, in Processing lingo. The x coordinates increase left to right, and the y coordinates increase top to bottom. This is the opposite of algebra y-axes! But it is common in graphics.

penX = width / 2; and the following line center the pen on the x/y coordinates.

background(255); sets the entire background to white. If you pass a value on the range 0…255 as a color, Processing interprets it as a shade of grey (0 = black, 255 = white).

noLoop(); tells Processing that once we start to draw, call draw() only one time; otherwise (by default) it is called repeatedly in an endless loop.

Now, let’s teach processing how to move the pen:

void move(float amount) {
  float newX = penX + sin(radians(penDirection)) * amount;
  float newY = penY - cos(radians(penDirection)) * amount;
  
  line(penX, penY, newX, newY);
  
  penX = newX;
  penY = newY;
}

This is a three-step process. First we have to compute where we’re going, on the basis of where we are. We use trig to figure out how far away in the x and y directions we need to go (remember, y is flipped, hence the minus). We draw a line from the pen’s current location to its new location. Then we update the pen’s location.

Let’s test it out in a draw() method:

void(draw) {
    move(50);
}

OK, that works. What about if we want to turn?

void turn(float degrees) {
  penDirection += degrees;
}

void(draw) {
    move(50);
    turn(90);
    move(50);
    turn(90);
    move(50);
    turn(90);
    move(50);
    turn(90);
}

Great. How about a random walk?

void draw() {
  turn(random(360));
  stroke(random(255), random(255), random(255)); // random pen color each time, RGB when you pass three values
  move(random(20));
}

And how about we use the mouse to turn it on and off?

void mousePressed() {
  loop();
}

void mouseReleased() {
  noLoop();
}

OK, now we’re cooking!

Drawing a tree

So, back to our drawing: notice that each tree is made up of smaller trees. We’re going to write a tree method that draws a tree? It’ll start with a move() call to draw the trunk, then it will turn left, draw the smaller tree, turn right, draw the smaller true, and go back to where it started.

In other words, It’ll start with a move() call to draw the trunk, then it will turn left, draw the smaller tree using tree(), and so on.

“Hey dawg, I heard you liked trees inside of your trees, so can you show me how I can use tree() inside of tree() to draw a tree?” That’s today’s magic.

No recursion here

First write tree1. All it does is draw the trunk by moving forward size and then backward size:

void tree1(float size) {
  move(size);
  move(-size);
}

Make sure it works:

void draw() {
    tree1(100);
}

Maybe also move the root of the tree down a bit:

// in setup()
penY = height * 0.9

Now, let’s draw a two-level tree.

void tree2a(float size) {
  move(size);
  turn(-15);
  move(size * 0.75);
  move(-size * 0.75);
  turn(30);
  move(size * 0.75);
  move(-size * 0.75);
  turn(-15);
  move(-size);
}

At this rate, it’s gonna take a lot of code to draw a beautiful tree. Don’t worry, though, we’ll get better.

Does everyone understand what’s happening above? (Trace through on board.)

More levels

OK, let’s simplify a bit. Do you see that tree2a contains tree1 if you stop and squint at it a bit? Let’s rewrite it to use tree1:

void tree2(float size) {
  move(size);
  turn(-15);
  tree1(size * 0.75);
  turn(30);
  tree1(size * 0.75);
  turn(-15);
  move(-size);
}

Now, I want you to write a tree3 that uses tree2. It should not use tree1. (Hint: it looks almost exactly like tree2; copy/paste and change three characters).

void tree3(float size) {
  move(size);
  turn(-15);
  tree2(size * 0.75);
  turn(30);
  tree2(size * 0.75);
  turn(-15);
  move(-size);
}

How would tree4 look? Exactly the same, except it would call tree3. So, here’s the big idea: we can write a tree method that uses itself to draw a tree, so long as it knows how many levels it’s expected to draw.

A Recursive `tree`

tree will need a levels parameter in addition to size:

void tree(int levels, float size) {
    move(size);
    turn(-15);
    tree(levels - 1, size * 0.75);
    turn(30);
    tree(levels - 1, size * 0.75);
    turn(-15);
    move(-size);
}

What happens when we run this in our draw() method?

As Processing helpfully explains, there’s a problem with our recursion. Let’s think about what’s going on. (on board, trace operation with levels = 2)

The problem is that the methods we wrote before aren’t all exactly the same: tree1 in particular just drew a trunk, and no branches. So, we need a special case to handle this:

void tree(int levels, float size) {
  if (levels == 1) {
    move(size);
    move(-size);
  }
  else {
    move(size);
    turn(-15);
    tree(levels - 1, size * 0.75);
    turn(30);
    tree(levels - 1, size * 0.75);
    turn(-15);
    move(-size);
  }

And now it works. Let’s try a larger levels for a prettier tree. (show 9)

This general code pattern, with a simple base case that doesn’t call the method itself, and a less simple case that does call itself, is typical of recursive code. Let’s break it down:

void tree(int levels, float size) {
  // the base case; a problem so simple we know how to handle it
  // completely
  if (levels == 1) {
    move(size);
    move(-size);
  }
  // the recursive case
  // do a small part here, and delegate the rest to somebody else
  else {
    // draw the trunk
    move(size);
    // position the pen for the left sub-tree
    turn(-15);
    // delegate drawing the left sub-tree to someone else
    tree(levels - 1, size * 0.75);
    // re-position for the right sub-tree
    turn(30);
    // delegate drawing the right sub-tree to someone else
    tree(levels - 1, size * 0.75);
    // re-position to go back to the start
    turn(-15);
    // retrace our steps back to where we started
    move(-size);
  }

Notice that in the recursive case, we are always making progress toward the base case – here, levels is guaranteed to be decremented by one each time the method calls itself, so we’re guaranteed (mostly) to hit levels == 1 and stop. If we don’t do this, the method calls itself indefinitely, and we end up with a StackOverflow (at least in Java).

What would happen if we started with levels < 1?

Sometimes a recursive program is more elegant if you have a smaller base case. What would a “zero level” tree mean? Can you rewrite the program to have a base case where levels == 0?

Some questions

(slides)

An exercise

Try to draw a more “beautiful” tree. Two things that might help:

strokeWeight(5);

makes the stroke (the ink left by the pen) five pixels wide instead of one.

And you can change the color by red green blue components. Google has a nice color picker to help.

stroke(75, 160, 15); // kinda greenish

Other comments on recursion

Of course we can define factorial recursively, too. And write in in Java. And probably you can trivially transform it to its iterative form. There’s a deeper truth here, that all recursive algorithms have an iterative equivalent (and vice versa), though the problem of designing the algorithm might yield more easily to one or other. For example, how would you draw a tree of arbitrary depth iteratively? For the supernerds: without a stack?

And, some other languages make use of recursion and recursive definitions much more natural than Java. For example, here’s a snippet of OCaml to computes the factorial:

let rec factorial = function 
  | 0 -> 1
  | x -> x * factorial (x - 1)
;;

print_int (factorial 10)

It’s like a direct transcription of the mathematical description!

Nominated for a Distinguished Teaching Award

Mon, 14 Nov 2016 12:00:00 +0000

I have been nominated for a 2016–2017 Distinguished Teaching Award (DTA), a campus-wide student-driven recognition of teaching, for my teaching of COMPSCI 190D this semester.

COMPSCI 190D (Using Data Structures) and 365/590F (Digital Forensics)

Mon, 24 Oct 2016 12:00:00 +0000

Next semester (Spring 2017) I am teaching two courses: COMPSCI 190D: Using Data Structures and COMPSCI 365/590F: Digital Forensics.

CICS handles course wait lists centrally. If during preregistration (or add/drop) SPIRE indicates a course requires department consent, or that it is full and you want to get on a wait list, please request an override.

COMPSCI 190D

COMPSCI 190D is intended for students who have completed COMPSCI 121. It will focus on using, rather than implementing and analyzing, the data structures now studied in COMPSCI 187, along with additional structures (such as sets and maps) which are not covered there but that are useful for practical programming.

For some students, 190D can serve as an alternative to 187. It will be recognized as one of the core courses for the proposed Informatics major, and the practical programming with data structures in 190D will be adequate preparation for some courses such as COMPSCI 326.

Computer Science majors (both BA and BS) must still take 187, which is a prerequisite for all the 200-level core courses. But the College of Information and Computer Sciences (CICS) hopes that many majors and applicants to the major will find 190D to be good additional advance preparation for 187.

COMPSCI 365/590F

Undergraduates COMPSCI majors with a strong technical background (COMPSCI 220 or 230) and an interest understanding the technical aspects of digital forensics. This course counts as a COMPSCI elective toward the major (B.S. or B.A.). Graduate students who enroll in 590F will also find the material topical to their program of study and to their professional development. They should expect to cover more of the details, both technical and legal, than the undergraduates enrolled in 365.

COMPSCI 190D: Using Data Structures

Tue, 10 May 2016 12:15:00 +0000

Next semester (Fall 2016) I am teaching COMPSCI 190D: Using Data Structures. COMPSCI 190D is intended for students who have completed COMPSCI 121. It will focus on using, rather than implementing and analyzing, the data structures now studied in COMPSCI 187, along with additional structures (such as sets and maps) which are not covered there but that are useful for practical programming.

CICS handles course wait lists centrally. If during preregistration (or add/drop) SPIRE indicates the course requires department consent, or if it is full and you want to get on the wait list, please request an override.

COMPSCI 391L/591L: Computer Crime Law

Tue, 10 May 2016 12:00:00 +0000

Next semester (Fall 2016) I am teaching COMPSCI 391L/591L: Computer Crime Law. COMPSCI 391L/591L is a study, analysis, and discussion of the legal issues related to crimes involving computers and networks, including topical actions by dissidents and governments. We will also study the technologies of forensic investigation, intelligence gathering, privacy enhancement, and censorship resistance.

Our main legal topics will include recent and important case law, statutes, and constitutional clauses concerning authorization, access, search and seizure, wiretaps, the right to privacy, and FISA. Our technology topics will include methods of investigation and resistance in the context of the Internet and Cellular networks. Students are assumed to have no background in legal concepts. All students will be required to complete substantial legal readings, complete significant written analysis of rulings, learn about technologies in detail, and participate in lively class discussion. Graduate students enrolled in 591L will be expected to read selected current law and technical articles and to analyze state-of-the-art systems in the context of law and policy.

Nominated for a Distinguished Teaching Award

Tue, 20 Oct 2015 15:30:00 +0000

I have been nominated for a 2015-2016 Distinguished Teaching Award (DTA), a campus-wide student-driven recognition of teaching, for my teaching of CMPSCI 187 last semester.

(DTA selection evaluations are only conducted when nominees teach during a Fall semester. I am not teaching this semester, so I must defer my nomination.)

COMPSCI 290NW: A Networked World

Wed, 30 Sep 2015 15:30:00 +0000

Next semester (Spring 2016) I am tentatively scheduled to be the instructor for COMPSCI 290NW: A Networked World. Last offered in Fall 2014, COMPSCI 290NW is not intended for CS majors, but it is an excellent introduction to networking, the Internet, and related technologies for non-majors. It is of particular interest to students pursuing the IT minor and for (BDIC) Informatics majors.

The College of Information and Computer Sciences handles course wait lists centrally. If during preregistration (or add/drop) SPIRE indicates the course is full and you want to get on the wait list, please request an override.

CMPSCI 187: Programming with Data Structures

Fri, 31 Oct 2014 12:00:00 +0000

Next semester (Spring 2015) I am the instructor (with John Ridgway) for CMPSCI 187: Programming with Data Structures.

Computer Science handles course wait lists centrally. If SPIRE indicates the course is full and you want to get on the wait list, please request an override.

CMPSCI 383: Artificial Intelligence

Wed, 28 May 2014 12:32:00 +0000

Next semester (Fall 2014) I am the instructor for CMPSCI 383: Artificial Intelligence.

Computer Science handles course wait lists centrally. If SPIRE indicates the course is full and you want to get on the wait list, please request an override.

CMPSCI 290NW: A Networked World

Wed, 09 Apr 2014 15:00:00 +0000

Next semester (Fall 2014) I am the instructor for CMPSCI 290NW: A Networked World.

Computer Science handles course wait lists centrally. If SPIRE indicates the course is full and you want to get on the wait list, please request an override.

CMPSCI 453: Computer Networking

Thu, 16 Jan 2014 15:30:00 +0000

This semester (Spring 2014) I am the instructor for CMPSCI 453: Computer Networking. All course material will be posted (or linked to) at the course website.

teaching | Marc Liberatore

A Gentle Graphical Introduction to Recursion

Recursion and fractals

Getting started

Setting up processing

Drawing a tree

No recursion here

More levels

A Recursive tree

Some questions

An exercise

Other comments on recursion

Nominated for a Distinguished Teaching Award

COMPSCI 190D (Using Data Structures) and 365/590F (Digital Forensics)

COMPSCI 190D

COMPSCI 365/590F

COMPSCI 190D: Using Data Structures

COMPSCI 391L/591L: Computer Crime Law

Nominated for a Distinguished Teaching Award

COMPSCI 290NW: A Networked World

CMPSCI 187: Programming with Data Structures

CMPSCI 383: Artificial Intelligence

CMPSCI 290NW: A Networked World

CMPSCI 453: Computer Networking

A Recursive `tree`