You will create an interactive program that will draw a specific pattern of squares next to other squares. First, start by creating a drawing window that is square 600x600 pixels in size. You should draw one large square in the exact center of the drawing window. The width of this square should be 1/3 the width of the drawing window.
You will then draw four smaller squares, each that has a width that is smaller the width of the middle square. To start with, make this smaller square’s width half the width of the middle square. Each of these smaller squares will have its position offset from the middle square in a different direction. Taken together, the middle square and the four smaller satellite squares will create a pattern that is rotationally symmetric. To be more specific, let (s, t) be the offset between the middle square and one of its satellite squares. You can think of this offset as being the horizontal and vertical distances between the middle square’s center and the satellite square’s center. Each of the other three satellite squares will have their offsets based on the same values (s, t). The four sets of offsets should be (s, t) (-s, -t) (t, -s) (-t, s).
The values of the offsets (s, t) will be partially controlled by the position of the mouse cursor. Every time you move the cursor, the pattern should be re-drawn according to the new cursor position. You should calculate the values of (s, t) so that when you draw the four satellite squares, the top one of them (call it A) is positioned so that its center is exactly at the same horizontal position as the cursor. When the cursor is at the far left of the screen, the square A should have its center on the left edge of the screen. When the cursor is on the far right, A’s center should be on the right edge of the screen.
The size of the smaller squares should be controlled by the cursor’s vertical position. When the cursor is at the bottom of the screen, the smaller squares should be size zero (not visible). When the cursor is half-way up the screen, the small squares should be half the size of the middle square. When the cursor is at the very top of the screen, the “smaller” squares should be the same size as the middle square. We can use the symbol k to represent the ratio between the size of the smaller square and the middle square.
The size of the smaller squares will also affect the offsets (s, t). In particular, the smaller squares should be positioned so that the top square (A) is just barely touching the center square. If the size of the square changes, this will mean that you will have to push A upwards in order for the bottom edge of A to continue to just touch the top edge of the center square.
Each of the smaller squares should in turn have four even smaller squares that are satellite squares to each of them. In total, there will be 16 of these smaller squares. Each smaller square should be k times the width of its “parent” square. The offset of these satellite squares from their parent square should be k times the offset of the original (s, t) offsets. This pattern of smaller squares will repeat several more times, and each time the sizes of the squares and their offsets will shrink by a factor of k. The next level of squares will have 64 squares, then 256, and so on.
Your pattern should have at least five different sizes of squares, from the largest to the smallest. Even though you will be drawing many, many squares, your code should include very few calls to the rect() function to draw those squares. If you find yourself using many calls to the rect() function, you are not approaching the problem correctly.
Project Restrictions
For this first warm-up project, you may not use some of the built-in capabilities of Processing. In particular, you must not use translate, scale, rotate, or any of the other built-in transformations. You also cannot use the matrix commands, such as push and pop. (We will use many of these tools in later projects, just not in this one.) It is fine for you to use basic mathematics tools such as addition, multiplication, cosine and sine. You are also expected to make use of the rect() command to draw the squares. It is fine for you to use the rectMode() command to change how rectangles are drawn. If you are uncertain about what is allowed, check with the instructor.
Additional Requirements
To add more variety to the images that you draw, add some kind of color variation to your squares. You may choose colors based on the positions of the squares, based on how “deep” they are in the pattern, or based on almost any other scheme of your own choosing. However, do not cause the colors of the squares to flicker randomly each time they are drawn.
Your pattern drawing program must be written in the Python version of Processing. The python Processing web site is here: http://py.processing.org. This web site includes downloadable versions of Processing for Windows, OS X, and Linux machines. This web site has extensive documentation and examples. Processing will have all of the familiar Python language constructs.