@extends('template')

@section('title')
    Lab 6: Turtle Graphics with For Loops
@stop

@section('content')

# Lab 6: Turtle Graphics with For Loops

<br>
This part of today's lab should be completed in the provided
`lab06/grids.py` file.


## Task A. `randomSquares`

In this task, you'll complete a function called `randomSquares` that
draws random square on the canvas. Below two different invocations are
shown on the same canvas:

```py
randomSquares(10, 50, 'red')  # 10 red randomly-positioned squares of size 50
randomSquares(20, 10, 'cyan') # 20 cyan randomly-positioned squares of size 10
```
   
<img src="random10_50_red.png" style="width:300px" alt="A turtle canvas with 10 larger red squares and 20 smaller cyan squares scattered about randomly, with some of the cyan squares overlapping the red ones.">
<img src="random2.png" style="width:300px" alt="Another turtle canvas with the same squares scattered, just this time in different random positions.">


Your `randomSquares` function should take the following 3 parameters:

1. `number` of squares in the Layer
2. `size` of the individual squares
3. `color` of the squares

Each time through the loop, one square is drawn. The turtle is repositioned
before drawing each square at a randomly generated location (the x coordinate of the center point is a random integer
between -400 and 400, and the same is true for the y coordinate of the
center point). 

**Hint**: use `random.randint()`. Here are two `randint` refresher links:
[last week's lab with the coin
flip](http://cs111.wellesley.edu/content/labs/solutions/lab04/conditionals.py)
&  [general python documentation pages for
random numbers](https://docs.python.org/3.7/library/random.html).

Develop your code in baby steps. 
Write your function, at first, to simply produce the right number of squares.
After that works, then work on placing them in random locations.

Tips:
1. Each time through the loop, you will draw another square
2. The function is not fruitful; it merely draws
3. Since the points are random, your results will differ from what is depicted above

## Test your work
Here is how you can test your `randomSquares` function:

```py
#             replace these with actual values
randomSquares(HOW_MANY, SIZE, COLOR)
```


## Task B. `makeRow`
<img src="row_5_100_navy_bisque.png" style="width:300px" alt="A row of 5 squares filled with a light tan color and outlined in dark blue. Each square is directly touching the next so the row forms a solid line.">
<img src="row_8_55_pink_green.png" style="width:300px" alt="A row of 8 bright green squares outlines in pink.">

In this task, you'll complete a function called `makeRow` that draws a row of squares.

This function should take the following 4 parameters:

1. `number` of squares in the row
2. `size` of the individual squares
3. `color` of the outline of the squares
3. `color` of the fill of the squares

The row is produced by adding one new square each time through the
loop. 

Tips:
1. Each time through the loop, you will add draw another square
2. Each successive square's center point shifts `size` to the right
3. The function is not fruitful; it merely draws
4. The function maintains a heading and position invariant (so the turtle
ends up where it started when the function is complete)

## Test your work
Here is how you can test your `makeRow` function:

```py
makeRow(5, 100, 'navy', 'bisque')
makeRow(8, 55, 'pink', 'green')
```


## Task C. `makeOverlapRow`

<img src="overlap5_100.png" style="width:300px" alt="A row of 5 overlapping squares, where only 1/4 of each square is visible because of the overlaps, except for the last square which is completely visible.">
Create a new function called `makeOverlapRow` that draws a row of overlapping squares.

This function takes 4 parameters:

1. the `number` of squares
2. the `size` of the square
3. the `color` of the outline of the square
4. the `color` of the interior of the square

Tips:
1. Each time through the loop, you will add draw another square
2. Each successive square's center point shifts `size`/4 to the right
3. The function is not fruitful; it merely draws
4. The function maintains a heading and position invariant (so the turtle
ends up where it started when the function is complete)


Starting testing code (you can figure this out):

```py
# [your code here] # Draw the overlapping row

```


## Task D. `makeTwistySquares(number, size, angle)`
<img src="twist8_100_25.png" style="width:200px" alt="Eight squares layered on top of each other with random colors, each rotated relative to the others so that behind the final square which is fully visible, the corners of the others stick out at odd angles.">
<img src="twisty15_200_33.png" style="width:400px" alt="More layered rotated squares, this time there are 15 of them, each rotated 33 degrees relative to the previous one.">
<img src="twisty50_200_3.png" style="width:400px" alt="More layered rotated squares, this time there are 50 squares rotated only 3 degrees each time, so the outline looks very much like a circle.">

Create a new function called `makeTwistySquares` that draws a set of overlapping rotated squares of varying colors.

This function should take the following 3 parameters:

1. `number` of squares
2. `size` of the square
3. `angle` of rotation

Like the previous function, colors should randomly be generated for each square.

Tips:
1. Each time through the loop, you will draw another square 
2. Each successive square rotates `angle` degrees more than its predecessor
3. Use the provided `randomTurtleColor()` function to generate a random
color for each square drawn, or use one of the random color functions
found in `turtleBeads.py`, like `randomPastelColor` or `randomWarmColor`.
3. The function is not fruitful; it merely draws
4. The function maintains a heading and position invariant (so the turtle
ends up where it started when the function is complete)

Testing code (the images above were generated with the following invocations, each on a new canvas):
```py
   makeTwistySquares(8, 100, 25)
   makeTwistySquares(15, 200, 33)
   makeTwistySquares(50, 200, 3)
    
```


## Task E. `makeRotatedRow`
<img src="rotated8_100_25.png" style="width:500px" alt="8 randomly-colored squares in an overlapping row, except each one is rotated a bit relative to the previous one. The entire row is still straight, however.">

Create a new function called `makeRotatedRow` that draws a row of rotated squares of varying colors.

This function takes the following 3 parameters:

1. `number` of squares
1. `size` of squares
2. `angle` of rotation

Note there is no color parameter; each square's color should be randomly
generated using the provided function `randomTurtleColor()`, or one of
the random color functions from `turtleBeads`; example
usage:

```py
# sets variable randomColor to store a randomly generated color
randomColor = randomTurtleColor()
# picks from a specific set of warm colors (see turtleBeasd.py)
randomColor = randomWarmColor()
```

(randomTurtleColor works by randomly generating three integers between [0, 1] that are the Red, Green and Blue values, respectively. You can read [more about RGB colors here](http://www.w3schools.com/html/html_colors.asp))

Tips:

1. Each time through the loop you will draw another square 
2. Each successive square's center point shifts `size`/4 to the right
3. Each successive square rotates `angle` degrees more than its predecessor
3. The function is not fruitful; it merely draws
4. The function maintains a heading and position invariant (so the turtle
ends up where it started when the function is complete)


## Task F [challenge problem]. `makeFlower`
Create a new function called `makeGrid` that draws a set of squares arranged in a circle-like
shape, with each corner touching the corner of the two adjacent squares. This function takes the following parameters:


1. Number of squares (`petals`)
3. `size` of each square
4. `color` of all the squares

<img src="flower6_70_orange.png" style="width:250px" alt="Six orange boxes that touch at the corners to form a hexagon. The boxes extend outside the circle like flower petals extending from the center of a flower.">
<img src="flower_12_55_red.png" style="width:250px" alt="A similar arrnagement of boxes around a central empty area, this time with 12 red boxes.">
<img src="flower_18_50_magenta.png" style="width:250px" alt="Another arrangement of boxes, this time there are 18 magenta boxes.">

Tips:
1. Each time through the loop, you will draw another square 
2. You can divide `360/number of squares` to determine the angle of rotation 
3. The function is not fruitful; it merely draws
4. The function maintains a heading and position invariant (so the turtle
ends up where it started when the function is complete). In this case, the
turtle starts and finishes at the lower right corner of the leftmost flower "petal".
If you look carefully, you can see the turtle in each of the images above.

Examples:
```py
makeFlower(6, 70, 'orange')
makeFlower(12, 55, 'red')
makeFlower(18, 50, 'magenta')
```


## Task G. `makeGrid`
Create a new function called `makeGrid` that draws a set of squares arranged in a grid. This function takes the following parameters:

1. `rows` in the grid
1. `columns` in the grid
3. The `size` of each square
4. `color1` outer square color
4. `color2` fill square color


Examples:
```py
makeGrid(8, 3, 50, 'orange', 'grey')
```
<img src="grid8_3_50.png" style="width:300px" alt="A grid of gray squares with orange borders, touching each other so that the whole grid forms one rectangle. The grid is three squres wide adn 8 squares tall; the turtle is visible in the upper-left square of the grid.">
<br>

```py
makeGrid(4, 10, 50, 'gray', 'black')
```
<img src="graygrid.png" style="width:300px" alt="Another grid, with gray squares and black lines, which has 10 columns and 4 rows.">
<br>

```py
makeGrid(2, 15, 30, 'black', 'orange')
```
<img src="orange.png" style="width:300px" alt="A 15-column 2-row grid with orange squares.">

<br>
The grids can be large, so make sure to start with a fresh canvas for each one.

Tips:
1. You can use a nested loop and draw squares, or you can use a loop that invokes `makeRow`
2. The function is not fruitful; it merely draws
3. Make sure you test your function on a variety of different sized grids



## Task H. `makeRowColorGrid` 
Create a new function named `makeRowColorGrid` that draws squares arranged in a grid, where each row of squares is a random color.

**This function may, but does not need to, use the `makeRow` function you've already created.**

This function should take the following 3 parameters:

1. Number of `rows`
2. Number of `columns`
3. `size` of the individual squares

<br>
__Example__
```py
makeRowColorGrid(8, 3, 50)
```
<img src="rowGrid8_3_50.png" style="width:200px" alt="Another grid with 3 columns and 8 rows, but this time each row has random fill and outline colors.">


## Task I. `makeRandomColorGrid` 
Create a new function named `makeRandomColorGrid` that draws squares arranged in a grid, where each row of squares is a random color.

This function should take the following 3 parameters:

1. Number of `rows`
2. Number of `columns`
3. `size` of the individual squares

Each square has a randomly assigned color (use the provided `randomTurtleColor()` function).

```py
makeRandomColorGrid(10, 15, 50)
```

<img src="randomGrid10_15_50.png" style="width:500px" alt="Another grid of squares, with 10 rows and 15 columns. This time, there are no outlines, and each square has a random color.">


@include('/labs/lab06/_toc')

@stop