Author: Shariar Sadi

For my final project, I have created an audio focused game that is played by a user listening for a bird sound’s in various scenarios. A user then can press a key if they think they heard the bird and based on; if they were right or wrong. The user would then gain points or loose attempts. If you use up more than three attempts you lose the game. The game really requires a user to use their listening skills and tests the user’s ability to focus. Below I have attached a picture of the games start screen. The link to the game and all of its code is:

https://alpha.editor.p5js.org/shahriarsadi98/sketches/BkHJGovhz

A link to the google drive to access much of the games audio files and visuals:

https://drive.google.com/drive/folders/1hJmN0dj4OaV0l20YK7rFIx935Wz5Lb6X?usp=sharing

I created the game solely in p5js, I chose to use p5js over processing in Java is because of the libraries in p5js, the most important of which was scene manager. Scene manager allowed me to create a start menu, and instruction menu, a game function, winner and looser screens. Using scene manager I was easily able to switch to those scene’s and not have one scenes code effect others. Below I have attached an image of some snippets of the scene manager code. I also had various menus with buttons which would lead to new scenes and having scene manager really made the process easier.

Another crucial aspect of the game was a timer, I need the timer in order to keep track of what time the user clicked on the key and if it matched up with the correct time the bird sound played. The timer had to be activated exactly when the user was in the game function menu. I did not want how long the user was on the start menu to affect the game. So I created a variable called offset to mitigate that issue and subtract it from a variable I had called game seconds. Below I have attached an image of some of my code for the timer.

An issue that I ran into while making the game was that the audio would run in a never-ending start loop, that sounded screechy. I mitigated this by creating a preload function and the audio played smoothly. Scene manager made it easy so the audio files only played when they were in their given menus. I created a point system and attempt system under my key pressed function and setting if statements to check when the key was pressed and to act accordingly. I have attached below, screenshots of both the attempts and score code snippets.

My game also has this visualizer which I coded to move with how loud the sound is in game. To give the user a visual in to maybe help the user in a way and overall I think it looks cool and helps with the overall game aesthetic. One addition I wanted to add to that portion was color changing based on if the user gets an answer right or wrong. I tried to get it to change color, but everything I tried simply did not work. Hopefully, in the future, I can fix this.

For the future of this game, I would like to do two things, one have the game be more automated and random. Right now the game follows a sequence if the audio clips and random and unpredictable in when the bird will come. It will make the game more challenging and fun. I already have an idea on how to achieve that. Which would be to upload all bird noises and scenarios into p5js and then creating an algorithm to play the sounds randomly and then a if statement to see if a specific bird sound is played and the user clicks a button then give a point. Another addition I would like to add is a high score system and then a twitter bot that would tweet out anytime the high score is beat. I believe both of those are possible and something I will be working on over the summer.  I hope you enjoyed my final and having me as a student. I really enjoyed your class and learned a lot. I hope to one day have a class with you again thank you very much for a wonderful semester.

If you would like to see the slides I have attached them below here as well.

Bird Audio Game Final Presentation

For my final, I have finally decided to create a bird finder game, where you identify birds by their sound. The basic idea behind this is that a guide will tell you what bird to look out for and then you try to listen for it. If you do hear the bird you press a buzzer or a key on the keyboard that’s how you get points, if you dont press it at the correct time you lose.   I have created the start menu and instruction menu. These menus have clickable buttons which take you to the next scene. I have also created a timer to which is extremely useful in the creation of this game.  Once the game scene is loaded I have created all the sounds for how the game is going to sound. now I have some of the files left. I am now working on getting the buzzer to work and creating the scenarios of if it is missed and if you hit the buzzer correctly. Once I have those two things done the rest should be easy. The final thing I would have to implement is a reset button if they lose and want to get a higher score and maybe a level system of easy, medium and hard.

For my final project, I will be creating a bird identifier game. I have already created audio tracks that contain various sounds, of random birds. The game will first start with a player prompted with a start menu. The user then clicks start a prompt will play urging the user to memorize a specific bird noise and what bird makes that noise. On screen, an image of that bird will be displayed as well. Next, a sound clip will play of several birds in different environments and a user must then press a buzzer only if he or she hears that birds specific voice again. If they click correctly they will gain a point, then a new sound clip of a different bird will play and if it is pressed at the wrong time they will lose a losing screen will prop up with their final score and option to restart the game again. I plan to accomplish this with the scene manager and sound libraries on P5JS. I mainly have to figure out how to keep the timer and if mouse pressed on track with each other. Below I have attached a sound clip of how the game may sound.

https://drive.google.com/file/d/1oC6FXc3vbTvcx79VbrkzpIhKULHURN9h/view?usp=sharing

 

 

http://www.syedrezaali.com/   

For my research project, I decided to write about Reza Ali. He is a computational designer, software engineer, and creative director.  He is highly accomplished currently works at Google full time, on webXR its a google owned VR platform. His main position there is as a UX designer for  AR/VR experiences.  Along with that Reza is an artist in residence for Auto Desk. He uses technology and code to express himself, creating visual art sculptures and interactive installations.

Reza creates and collaborates with a lot of people and different companies. His work normally does not stay in one field or one area of interest. One of the fields that he works on the most with is Augmented Reality. My favorite Augmented reality peace from Reza Ali is called Paper Galaxy.  Paper Galaxy is a collaboration between Reza and Jeff Linnell. They use iPads to scan 3D objects and putting them into a 3D AR artwork that can be searched. Reza said “It’s about bringing students together and building communities through the use of creative coding and data visualization. ”         https://vimeo.com/105421711

Reza also makes interactive artwork, one of his most interesting 3D art pieces that I found was entitled BioRhythm and as its name implies it is a biofeedback installation. Which means that it takes feedback from the body to create movement in the artwork. The art piece is controlled by a users PPG which is the pulsating of the user’s blood tissues. The biological content of the artwork was the reason that the artwork was made to look organic. You can also change the sliders on the side to get more color options which I found relating because, just a week ago we learned to use the DOM library. http://www.syedrezaali.com/#/biorhythm/

He also has used processing multiple times, one of the artworks he has created from processing is an audio-reactive visualization.  The particles in his sketch repel and attract to one another so he could make them look like microorganisms in his opinion. http://www.syedrezaali.com/#/a-drifting-up/

Reza has also been known to dabble in generative works, he created a generative terrain maker called FLuid Scapes. He generates these renders and 3D prints them. http://www.syedrezaali.com/#/fluidscapes/

 

For my final, I want to create a video game. For my midterm, I was halfway complete but it wasn’t enough. I want to figure out how to make a bow and arrow shooter game in processing. I’ve seen many attempts at bow and arrow structure but never a full-fledged game. So I plan to do that, I drew some inspiration from a game I saw on open processing which is a complete copy of the old brick breaking game a lot of people used to play in their blackberries. I checked the code for that game and learned how to make object bounce until it hits its intended goal. Which I can use the bow and arrow game to only do something when it hits its intended target and maybe do nothing or bounce off when it doesn’t. If I find more similar examples I feel as if I could accomplish my bow and arrow game. I also saw some processing sketch on a bow and arrow shooting maybe this will help me understand how I should make the mechanics of my game. Im also excited for the use of the DOM library I feel there’s a lot of possibilities from that as well. Maybe I can add in buttons or sound to my game which would make it a real game if it has those features.

Brick Breaking game I drew inspiration from:  https://www.openprocessing.org/sketch/533634

 

Project 2

 

At first, I really wanted to use the open CV library in processing. I saw that it had a lot of features mainly for using the camera to detect motion or even faces. The library has many features I didn’t know could just be added to a regular webcam. But I realized that Open Cv was more complex I hope to learn more about it next week and put it in next weeks assignment. For this week instead, I used the regular Video library in processing to create what looks like artwork. By artwork I mean it looks like paint stripes on top of you as you look at yourself live. That is why I called it live art.

open processing link : https://www.openprocessing.org/sketch/532625

For this assignment, I tried taking a different approach from everyone else. By using images to convey a story, my original plan was to make a movie clip sort of to tell a story. So the idea was that a bird flying above throws an apple on a bears head a hunter notices the bear is getting too close to town so he shoots the apple on his head and then the bear runs off. So far I have the last part but not the portion where the apple is thrown on the bears head. I am not sure if it was smart going a different route relying heavily on images but will see how everyone reacts to it. The hardest part was trying to switch images changing scenes I researched for hours how to do it. Till I finally figured it out by using classes and an if statement to say what class gets displayed when. I think this use of scene change is a great example of the use of classes. Here are some images of how it looks when running properly. I was unable to load it up properly because of images not showing up errors in openprocessing.org I will be sure to upload it correctly soon.