# Lab Week 2

## Three Squares

This programming task is designed to exercise and/or sharpen your skills using variables.

The requirements are:

• In a canvas of 600×300 (width x height) pixels,
• Declare a variable, which should be called `myUnit`, and assign it to have a value of 50.
• Draw a square, whose width and height are equal to that variable, `myUnit`.
• Draw another square, whose dimensions are exactly twice as large as the first square, and whose dimensions are defined in terms of `myUnit`s.
• Likewise, draw a third square, whose dimensions are exactly three times as large as the first square.
• These squares should be coded in such a way, that if the `myUnit` variable had instead been initialized with a different value (such as 60), all three squares would immediately assume new dimensions, while maintaining the same relative size proportions of 1:2:3.
• There are no requirements for the positioning (placement) of the squares – only their sizes.

The image below represents an example of what your program’s output might look like. Of course, you don’t need to imitate the colors, positions, stroke join, or line weight.

## Three Squares Animation

Copy your Three Squares folder. In the new folder, modify your code as follows:

• When `draw` is called, be sure to call `background` to erase the canvas.
• When `draw` is called, set the variable `myUnit` to half the value of `mouseX` before drawing the squares. (Use the same drawing code from Three Squares.
• When you successfully complete and test your program, you will see that the squares can grow quite large when you move the mouse, causing them to overlap.
• Modify the code further by constraining `myUnit` to be between 1 and 50 using the statement
`myUnit = constrain(myUnit, 1, 50);`

## People Warmup Exercise

Copy your Three Squares folder yet again. In the new folder, modify your code as follows:

• Make the canvas size 300 x 300.
• Create and initialize the variable `inches` to be 8 (pixels per inch).
• Create and initialize the variable `head` to be `6 * inches` (so `head` is the head size of 6 inches, expressed in pixels).
• Draw a circle representing the head. The width and height should be `head`.
• Create and initialize variables to represent body width and height. `bodyH` (height) is 4 times `head`.
• `bodyW` (width) is `bodyH * 0.4`
• Draw the body. Where to draw the ellipse is a bit tricky because you want the top of the body to match the bottom of the head. See the image below to help you.