Hi, I'm trying to complete a project in Processing using python, but I'm completely stumped. I've been at it for days now and I can't seem to get past some parts of it. Here's the full prompt:
"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."
What I have below is how far I was able to get. If someone could explain how I would achieve scaling the squares while maintaining the x-axis, as well as getting every other square-layer, that would be great!
"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."
What I have below is how far I was able to get. If someone could explain how I would achieve scaling the squares while maintaining the x-axis, as well as getting every other square-layer, that would be great!
Code:
def setup():
size(600, 600)
global squareW
squareW = height * 1/3
global hw
hw = height/2
def draw():
background(256, 256, 256)
rectMode(CENTER)
fill(0)
rect(height/2, width/2, squareW, squareW)
rect(mouseX, hw/2, squareW/2, squareW/2)
rect(width - mouseX, hw + hw/2, squareW/2, squareW/2)
rect(hw + hw/2, mouseX, squareW/2, squareW/2)
rect(hw/2, width - mouseX, squareW/2, squareW/2)
