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 myUnits.

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 ThreeSquares 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 constrainingmyUnit to be between 1 and 50 using the statementmyUnit = constrain(myUnit, 1, 50);