Problem Set 8 - Due Mon, Apr 10 at 23:59 EST

Reading

About this Problem Set

This problem set has two goals: (1) to give you practice with fruitful recursion; and (2) to give you an introduction to HTML and CSS that will be useful for displaying results from analysis of data from Web APIs (the lecture topic on Thu. Apr. 6 and Mon. Apr. 10).

There are three tasks in this problem set:

In Task 1, you will learn about HTML and CSS in the context of some exercises. You should complete this task by Sun. Apr. 9, since knowledge of HTML and CSS will be useful for the Web API II lecture on Mon. Apr. 10.
In Task 2 (Individual Task), you will define a fruitful recursive function that draws a pattern using Turtle World and returns information about the pattern.
In Task 3 (Partner Task), you will generate quilts with a recursive pattern. Use this shared Google Doc to find a pair programming partner.
- Remember that you can work with the same partner a maximum of TWICE this semester.
- We will deduct 2 points per day for any students who have not recorded their names on the pair programming google doc by Thursday, Apr 6th at 11:59pm

The CS111 Problem Set Guide gives an overview of psets, including a detailed description of individual and partner tasks.

In Fall 2016, students spent these times:

Task 1 (HTML/CSS): most students completed these exercises in a 70 minute lab held during lecture time.
Task 2 (Shrubs): average 2.34 hours, min = 1 hour, max = 8 hours
Task 3 (Recursive Quilts): average 2.53 hours, min = 1 hour, max = 6 hours

All code for this assignment is available in the ps08 folder in the cs111/download directory within your cs server account. This assignment also uses the Otter Inspector program to help you do a final check for Task 2, Task 3, and your Honor Code form before you submit.

Task 1: Introduction to HTML and CSS

In this particular lab-like task, you should mostly work on your own, but you are allowed to ask for help from fellow students as well as from the CS111 staff

In this task, you will complete some exercises involving HTML (the language describing the structure of a web page) and CSS (the language describing the visual display of a web page).

In many semesters, we have covered this material in a lab. But because of constraints in this semester's schedule, we do not have a slot for an HTML/CSS lab. So we're asking you to complete the HTML/CSS lab exercises as part of PS08. (We have removed a third recursion problem to make room for this material.)

For this task, you should do the following:

Read the HTML/CSS lab introduction
Follow the instructions for the Part 1. HTML subtask. This involves creating a file top5.html in your ps08 folder.
Follow the instructions for the Part 2. CSS subtasks. This involves:
- creating a file top5.css in your ps08 folder.
- publishing your top5.html and top5.css files in your public_html folder in your account on cs.wellesley.edu.

Note:

There are no Otter Inspector tests for this task. You should manually verify the following

Viewing your local file top5.html in a web browser should show a correctly formatted web page
Viewing your public file http://cs.wellesley.edu/~your_accountName_here/top5.html should show a correctly formatted web page

Task 2: Turtle Shrubs

This is an individual problem which you must complete on your own, though you may ask for help from the CS111 staff.

In this task, you'll write a fruitful recursive function named shrub that draws a tree pattern with a turtle and returns a tuple of values (see below for details). Your shrub function should be invariant with respect to the turtle's position and direction. Define your function in the shrub.py file in the ps08 folder.

A turtle shrub is a variation of the turtle tree in Lecture 13 (slides 13-40 through 13-75). It is created by the shrub function, which takes four parameters in order:

trunkLength: the length of the branch at the base of the shrub.
angle: the angle relative to the trunk for the right and left branches
shrinkFactor: the trunk of the right branch is shrinkFactor times trunkLength, and the trunk of the left branch is shrinkFactor*shrinkFactor times trunkLength
minLength: the minimum branch length in the shrub.

The shrub function returns a pair (a tuple with two elements) of:

The total number of branches in the shrub, including the trunk
The total length of branches in the shrub, including the trunk

Below are sample invocations of the shrub function, with the magenta text indicating the value returned by the invocation, i.e., the number of branches in the shrub:


`shrub(100, 15, 0.8, 60)` -> (4, 308.0)
`shrub(100, 15, 0.8, 50)` -> (7, 461.6)
`shrub(100, 15, 0.8, 10)` -> (232, 3973.9861913600025)
`shrub(100, 30, 0.82, 10)` -> (376, 6386.440567704483)
`shrub(200, 90, 0.75, 10)` -> (232, 5056.675148010254)

Notes:

Solve this problem in parts:
1. First draw the correct picture without worrying about the returned values.
2. Then modify the code to return only the correct number of branches.
3. Then modify it to return only the correct total branch length.
4. Only after solving all of the above subparts should you modify shrub to return the correct tuple.
For examples of turtle functions that return results (including tuples), see the fruitful recursion lecture solution slides (slides 14-52 through 14-55).
Python has a tuple assigment feature for assigning the elements of a tuple to a tuple of variables that is particuarly helpful in this problem. For example, the invocation shrub(100, 15, 0.8, 60) returns the tuple (4, 308.0). The tuple assignment

(numBranches, branchLen) = shrub(100, 15, 0.8, 60)

simultaneously assigns 4 to the variable numBranches and 308.0 to the variable branchLen. For more information, see Sec. 12.2 on Tuple Assignment in the Think Python book.
Your shrub function should calculate both tuple elements in a single pass of drawing the tree. It shuld not draw the tree more than once.
Your shrub function should not use any global variables to calculate the tuple elements.
Use the provided testShrub and testShrubPrint functions to test shrub. testShrub initializes the screen and turtle for drawint the shrub from the middle bottom of the screen. As shown in the following image, it also (1) displays the invocation and result in the title bar (blue box) and (2) displays the result next to the turtle (red box).

testShrub also returns the result of calling shrub. testShrubPrint is like testShrub, but additionally prints the invocation and result to the console window.
There are Otter Inspector test cases for shrub, but they only test the returned tuple and not the turtle drawing. You need to manually verify that the drawings are correct. Also, the Otter Inspect test cases only include simple cases; you need to verify that more complex cases work as expected.

Task 3: Quilts with Recursion

This task (and only this task) is a partner problem in which you are required to work with a partner as part of a two-person team.

You will write a program that generates quilts like this:

The ps08 folder contains picture.py, our module built upon cs1graphics where every object is a 200x200 "picture." The module includes several functions to generate and combine pictures, such as upperRightNest that we saw in lecture 14, fourPics and rotations that you saw earlier in the course, and others.

The recursiveQuilts.py file includes the following predefied pictures that you can use as building blocks for your patterns:


`pyTri`	`gwTri`
`redLeaves`	`greenLeaves`
`emptyPic`

Write all your code for this task in the recursiveQuilts.py file.

Task 3(a). quadRecurse

Define a function, quadRecurse(pic1, pic2, levels), that generates the following pictures:


`quadRecurse(pyTri, gwTri, 1)`	`quadRecurse(pyTri, gwTri, 2)`
`quadRecurse(pyTri, gwTri, 3)`	`quadRecurse(pyTri, gwTri, 4)`
`quadRecurse(pyTri, gwTri, 5)`	`quadRecurse(pyTri, gwTri, 6)`

quadRecurse(pyTri, gwTri, 0) should be an empty picture:

Notes:

Used the Divide/Conquer/Glue strategy to break the quadRecurse pattern into parts.
Define as many helper functions as necessary. Some of these helper functions should themselves be recursive. In particular, you will need recursive helper functions for the upper left and lower right quadrants of quadRecurse.
Use fourPics to combine pictures.
First make sure quadRecurse works for levels arguments 0, 1, and 2. Then the rest will follow more easily.
Uncomment the test invocations at the bottom of recursiveQuilts.py to test your functions. Type closeAllPics() in the interactive pane to close the picture canvases without crashing Canopy.
There are no Otter Inspector test cases for this task. You need to manually test all the pictures and verify that they are correct.

Task 3(b). quilt

Now define a function, quilt(pic1, pic2, levels), that generates the following pictures. quilt is not a recursive function, and is very short. (The function body can be written in one (rather long) line, but you may want to express it in several lines). You will need to invoke quadRecurse, as well as at least two of the functions from picture.py.

Carefully study the relationship between the patterns produced by quadRecurse and quilt for the same number of levels.


`quilt(pyTri, gwTri, 1)`	`quilt(pyTri, gwTri, 2)`
`quilt(pyTri, gwTri, 3)`	`quilt(pyTri, gwTri, 4)`

(Note: invoking quilt with levels ≥ 4 may cause your program to freeze.)

quilt(pyTri, gwTri, 0) should be an empty picture as well.

quilt(redLeaves, greenLeaves, 4) generates the picture shown at the beginning of the task.

Uncomment the test invocations at the bottom of recursiveQuilts.py to test your functions. Type closeAllPics() in the interactive pane to close the picture canvases without crashing Canopy.

Task 4: Honor Code Form and Final Checks

As in the previous problem sets, your honor code submission for this pset will involve defining entering values for the variables in the honorcode.py file. This is a Python file, so your values must be valid Python code (strings or numbers).

If you wrote any function invocations or print statements in your Python files to test your code, please remove them, comment them out before you submit, or wrap them in a if __name__=='__main__' block. Points will be deducted for isolated function invocations or superfluous print statements.

Remember to run otterInspect.py one final time before you submit to check that your shrub.py program work as intended, and that your honor code form is complete. While running your code through otterInspect is not required, it is highly recommended since it may catch errors that you haven't noticed. However, many parts on this pset are not tested by Otter Inspect, and you need to test those parts on your own to verify that they are working properly.

If you have issues running otterInspect.py, first check for the following common issues.

Your code is written in the provided program files in the ps08 folder, and you haven't deleted or moved any of the existing files, or created new files.
You have selected "Keep directory synced to editor" when running otterInspect.py in Canopy
You have followed the specifications here of how your code should be organized into functions.
If otterInspect says you have failed test cases, read the problem set directions carefully to verify exactly what your functions are supposed to do. In particular, be careful about the distinction between print and return, and check that the returned values are of the appropriate types. Precision is important in CS! Points will be deducted for such mistakes.

If you are unable to resolve this issue after going through this checklist, seek help from any of the course staff.

How to turn in this Problem Set

Save your final top5.html, top5.css, and shrub.py files in your ps08 folder.
Each team member should save their recursiveQuilts.py file in their ps08 folder.
Save your filled-up honorcode.py file in ps08 folder as well.
Note: It is critical that the name of the folder you submit is ps08, and your submitted files are top5.html, top5.css, shrub.py, recursiveQuilts.py, and honorcode.py. In other words, do not rename the folder that you downloaded, do not create new files or folders, and do not delete or re-name any of the existing files in this folder. Improperly named files or functions will incur penalties.
Drop your entire ps08 folder in your drop folder on the cs server using Cyberduck by 11:59pm on Monday, Apr 10th, 2017.
Failure to submit your code before the deadline will result in zero credit for the code portion of PS08.