Creating an interactive sketch
This week, the challenge was to create our own buttons/roll-overs/ or sliders that then interact or change the sketch.
I had something different in mind, but felt the easiest way to accomplish the above tasks, was to combine different things we’ve learned and practice.
I started by creating a grid like in our quiz, but with squares instead of lines, so I could fill portions of it and create a checkerboard. My variable names were really important here, because they helped be sort out how to think about the grid. I didn’t want it to just be x and y when we’re dealing with rows and columns. In addition, it is important to note that the for loops create rows vertically and columns horizontally. The num variable allows you to change the number of squares in the gird (num x num).
Including mod was a cool breakthrough. I knew the best way to alternate fill was to identify which squares were in an even or odd position for both row and column. Mod does just this. If a number is mod 2 (N%2) == 0 this means that after being divided by 2 there is no remainder. Even numbers divided by 2 leave no remainder. Conversely, odd numbers will create a remainder of 1 ( N%2 == 1). This set the rules for my conditional statements. It took a couple tries and a couple if statements to make the whole grid cooperate with these rules.
Just a condition to fill when row and column are both even.
But the board should also fill when row and col are both odd.
Creating a button:
Using what we learned about toggle switches, I thought an easy interaction with the checkerboard, would be to make the checkerboard switch its configuration upon a mouse click – turn what were black squares into white squares and white squares to black squares.
Inside the for loops, I had to create a sort of “state” condition. If the switch is on, fill this way, if it is off, fill the opposite. This concept allowed a lot of copying of code with minor changes. I think its a good way to see how the loops really work.
Inside the mousePressed () function, I indicate where the mouse should be in order to turn on/off this switch. So essentially this creates the button.
Creating a hover/rollover:
Although the sketch at this point had a button, I wanted to create another visual cue that the top left corner square is indeed the button. I did this by turning it into a rollover as well. The top left square changes color when the mouse is placed over it, but only switches the checkerboard if clicked. This whole piece had to be placed outside the for loops and required the addition of identifying what row and column the mouse should be in in the conditional statement, otherwise the whole board filled.
Bad teal fill.
Adding the parameters of row == 0 && col == ), keeps the teal fill within the top left square.
Interact with the checkerboard switch with teal hover button here.
Adding animation:
I wanted the mouseclicked button to stimulate some sort of movement, but I wasn’t sure how to incorporate this. In fact, adding in the animated part was the most difficult part for me. It was hard to figure out where in the for loops to place it, which is why I ended up borrowing our bouncing ball code (lines 37-41) from class and just plopping it in the program until I could see a moving square.
Try checkerboard switch with moving square for yourself here.
Final thoughts:
Moving forward, I would like to more logically attempt the animation. Maybe have the square move to the right from the top left, row by row leaving a trail and filling the whole sketch a different color. I can picture where to place movement so that it moves to the right along one row, but I’m not sure how to get it to drop down the the next row and continually do that. My instinct is that it would go inside the nested for loop, because the loop already makes both rows and columns. However, that is also where the issue lies, because on top of creating the grid, I want to make another moving square. My brain hurts just thinking about this.
Final final thoughts:
I am struggling with programming right now. I can see the creativity in it and the potential to make such interesting things. But if I have an idea, I often don’t even know how to begin turning it into code. It feels like instead of being a tool for me, it’s a hinderance. Hopefully with more practice and knowledge, this will go away. It’s truly a different way of thinking because I have to “make” within certain rules and parameters.