ICM, Wk 3: A simple game that turned out to be pretty complicated

I’ll be honest, the last thing I want to do is write a blog post about this week’s assignment. What grief it gave me!

Before I write any more, I want to direct readers to my repository of code:


I created a new file every time I made major changes to the code. So this is the best preservation of all my different attempts. I’ve embedded some aspects of the code, along with a few screenshots/videos. But if you want a real look at the process, go there.

It all started out during class last week when we were learning how to make rollovers and buttons from scratch. As we were playing around with changing backgrounds and fills, I thought, “Wouldn’t it be fun to have the button appear MYSTERIOUSLY OUT OF NO WHERE?” It could be like a sort of game! Maybe I could even had a sound happen when you clicked on the right spot!

I started by modifying the rollover code we learned in class where instead of the background changing color, the fill of the rectangle would change.
At first I had some issues with getting the fill to change and then when I looked at some other code examples, I noticed that the command for rectangle was placed after the if statement. So I tried that and my rollover worked! So I changed it so the rectangle wouldn’t become visible until the mouse was within its parameters and the mouse was clicked.

At this point, the button would only stay on the screen for as long as I you held down the mouse but I really wanted it to remain in that state. So I tried to turn it into a switch using a combination of mouseIsPressed and mousePressed, along with a variable for state so I could use the state = !state codeline.

This…didn’t do anything.

So I set that aside for a second and looked at other button/rollover code examples to see their syntax. I altered my code again, replacing numbers with global variables.

Then, I went back to playing around with this state variable. Commented out the mousePressed function and instead tried to expand the previous if statement by including an else { state = !state. and…it made my rectangle continuously flicker. but go bright when I clicked on it?

Then when I went to correct it, I ended up re-writing a piece of code I wrote earlier…and forgot about. So maybe that had to do with the flickering? Also, why does this stuff make so much sense in class and when watching the videos but when I try to put it into practice I just can’t seem to speak the language? Sad face.

And then…I got rid of the extra code, put back in the mousePressed function and took out the mouseIsPressed command and…voila! I now had the rollover/button/switch of my homework dreams!

Screenshot 2015-09-20 23.42.39

rollover/button/switch vid

I even showed it to my roommate and made her play my little game.

Then I thought, wouldn’t it be fun if I had a triumphant horn play once you clicked on the button?

Apparently freesound.org doesn’t have anything when you search ‘triumphant horn’ but it did have an old man cackle…so I thought it would be funny to have the old man cackle every time you didn’t click on the right spot.

Getting the sounds to play at the right location and time was a bit tricky. I had to make sure the laugh was before my rectangle parameters code (so it would play in the space outside of it) and that my victory sound was after (so it would play inside of it). Using a basic conditional statement proved to be not enough. This was especially true because the laugh was super long, so I didn’t want each mouse click to restart the laugh or else it go pretty obnoxious real fast. I tried a couple of if statements like,
if victory is playing, laugh is not playing, etc. Also tried to use while (while (victory.isPlaying()), etc.) and then p5 froze. lovely. When I got back to it, the while statement made my fill disappear…but it did also stop the sounds after the area had been clicked on (which I wanted). Unfortunately, the laugh was still happening at the same time as the triumphant sound. I was beginning to feel like it was laughing at my anguish.

After several hours, many offers of help and some solid logical deduction, I solved it by turning the rectangle parameters into a local variable and using multiple conditional statements that allowed me to control both the location and duration of the sounds, so they played at the right spot and at the right time:

[One question I’m left with is how to turn off the switch function once the shape appears as well as stop the sounds?] [The other thing I want to try is having an image appear instead of a shape. I found this really fun Bill Nye sound and thought it would be great to have a picture related to that appear.]

I was feeling pretty good about my code, but still wanted to do more. Lindsay had the suggestion of having the rectangle appear in a different location each time you refresh the page, so it was more like a game.

Me and the random function are still, unfortunately, not friends. Or maybe we are now, I’m not sure. Something about the syntax and placement of the variables isn’t sticking with me. After playing around with variables and random functions, I put the question to the ICM GoogleGroup to see if anyone out in the ether had some ideas.

I was pleasantly inundated with helpful thoughts, each of which I tried out…with small to moderate success. The advice I got usually did one of two things: enable random rectangles but not have any sound or sound and colors, but no random rectangles. Felt like I was living a conditional statement. If random rectangles, no sounds!, etc.

random rectangles vid

Screenshot 2015-09-21 21.27.44

A lot of it had to do with the placement of certain code – such as the background, fill, and rectangle. Trying to put it in setup seemed to nullify my later mousePressed() function code. Not having it in setup meant my randomization was left to draw and thus looping within the browser.

Sehyun Kim offered a code that used conditional statements and a reset() function. Again, this gave me random rectangles AND the code would reset without having to press the refresh. That was cool. However, it totally messed up my sound code, which super sucked since I spent a LOT of time getting that to work.

I *think* my problem with not having my random rectangles AND my sound work together has to do with my state variable. So I thought, Maybe I need another variable instead of state? Because I changed my state to false for my rectangles because otherwise it wouldn’t fill with a color, but when I did that my sound stopped working correctly.

But when I tried to replace the variable in the mousePressed() function with a different variable name, but also equating to False…it screwed everything up. So, got rid of that. [In hindsight, I wonder if working with a local variable would have changed this?]

So I commented out the sections of code relating to the in-drawing refresh…

and…that got me closer to what I wanted? It starts with a black screen, the laughs happen if I don’t click on the rectangle and when I click on the rectangle – I get a victory sound! Sadly, the in-drawing reset was functioned out, but! If I reset the canvas, the square pops up in a different location. Neat-o! And I figured out how to get the colors to randomize with each reset!


UPDATE: Got my partner Xiqiao’s code! He made a neat sketch featuring an algorithm of lots of flashy squares. When you press the button in the middle, the squares stop flashing.

I integrated his flashy squares and stop event into my button/switch game and voila! Now you have to hunt amongst the squares to find the hidden switch, and once you find it the squares stop blinking and you get the triumphant noise!

I have to say, integrating Xiqiao’s code was surprisingly easy. I just looked for the code that didn’t pertain to the circular switch, added it to mine (modifying a few variables so they didn’t conflict to the one’s that I created) and yeah. It works!

(Visited 45 times, 1 visits today)

23. September 2015 by zoe.bachman.itp
Categories: ICM | Leave a comment

Leave a Reply

Required fields are marked *