Recursive Mondrian

Tim points out that we are missing an "On this page" here. --MF, 5/23/20

PG: And, of course, I'd be inconsistent here if I said keep this, though I love the project. Here, too, I'd want to check the supports. I'm really not sure we've done enough to prepare students to be able to /do/ this with confidence and independence. Of course, it should be a challenge, but one that /we/ are confident they can manage. Otherwise, we're teaching them that they /can't/ program and that CS is really /not/ for them. If we're going to do pages 2-5 here, we need to have done much more earlier (which, of course, I think we /should/ do).
Generic editing: I find the constantly flicking gifs enormously distracting, annoying and, frankly, show-offy. Two /static/ pictures—or three if we desperately need them—are enough. The constant motion is like these distracting pop-up ads, and serves only to show off how clever we all are. Please let us let the /students/ be the clever ones who show off /their/ creations without having to compete with ours.

BH: See Paul's comment in the big red box.

Recursion is not just for fractals...

  1. Search for the Dutch painter Mondrian to see examples of his artwork.

Mondrian did not use a computer, but we can use recursion to model his paintings and create similar images:

The corners of the outside border in this picture are missing. This happens when you choose "Flat line ends" from the settings menu the settings icon and use a large pen size, as we did for this project. You will probably want to change that setting back for other projects.
Mondrian picture created recursively

  1. Talk with Your Partner
    PG: There's no time to fix this now, but this is so scaffolded that the only work the student is left to do is not about the recursion. The recursion is harder here, but that's what the lesson should be about. Instead, learning about recursion is sidestepped. The student chooses numbers—an exercise in fractions—but never needs even to look at the structure and does no actual programming beyond the base case, a Unit 1 task. In revision, reverse the scaffolding. Also not clear why we have the scripts with hat blocks. This is all stuff the student can do.
    Click here to load this file. Then save it to your Snap! account.
    Some blocks are already created for you and the script that calls Mondrian is already set up.
  2. First, finish programming the base case, the rectangle block. Use a line of color with a pen size the width of the rectangle to paint the inside and then create the black border. Maintain state transparency.
    The rectangle block already contains two custom blocks for you to use. Look inside these two custom blocks to see how they work.
  3. Click "r" a few times to be sure you have rectangle set up correctly. Each time, you should get a big rectangle with one of the five colors inside and a black border, like this:
    Mondrian base case pictures

  4. Take turns speaking Then, program the code for the recursive case. The Mondrian block already contains some structure. Your job is to figure out what inputs it will need based on how the script should work.

    • You've already seen level 1, a filled-in rectangle. At each level, Mondrian subdivides the space it has into two rectangles (which will further subdivide if more levels are required). For example, in level 2, Mondrian will randomly divide the area specified by its width and height inputs in two pieces, and draw a rectangle in each piece. For level 3, Mondrian uses a level-2 Mondrian to subdivide the two smaller rectangles (for a total of four filled-in rectangles). Level 4 will subdivide again, creating eight rectangles, and so on.
    • The fraction variable will contain a random fraction between 1/5 and 4/5, specifying how to subdivide the area at this level.
    • The algorithm decides whether to subdivide the width or the height.

    Mondrian level:(level#) width:(width#) height:(height#){if(level=1){rectangle width:(width) height:(height)} else{script variable(fraction); set(fraction) to((pick random(1) to (4))/5); if (width>height){Mondrian level:() width:() height:(); change x by (); Mondrian level:() width:() height:();change x by ()} else{.....}}}
  5. Click "space" a few times. When you have Mondrian working, it should produce pictures like this:
    Mondrian pictures
  1. Recursion is not just for commands either. You'll learn about recursive reporters in Unit 8. For example, this block reports the factorial of a number. Can you see how it works?
    (num)!{if(num=1){report(1)} else{report(num*(num-1)!}}