I started with the idea of a girl makeover or dress-up game with transitions and other elements. I started the project with some raw ideas that were not so specific because I knew that during the process I will experiment multiple times and come up with different outcomes. The first step in my process was to learn how to get objects as png images and upload them to my game to give them more character and give them a more believable look. In class, the professor helped me upload a face of a barbie as a test and I learned how the numbers worked for the dimension of the image. I tested that on my own a couple of times and finally learned how to upload the images by keeping the canvas size in mind.
That following weekend, I got a viral cold infection that delayed my working process since I was drowsy with all the medications I was taking. I tried pushing myself as much and during the hours I felt better, I continued working again on my project. I looked back at code examples from class and the dinosaur project had some cool features because it highlighted a lot of the major elements covered in class such as sound, tint, jump, and more of the new elements that I wanted in my project. I tested out the dinosaur code and started by replacing it with fairy and keeping the cactus. My fairy would jump and it gave me an understanding of the gravity effect and speed that helped manage the sound and the tint element. I then looked at the p5 official website for help with uploading the sound since I needed to refresh my memory. In the code, it had similar steps of uploading a png image but with sound. I added that every time the fairy would jump it would use the sound I used. I downloaded the free png images from freepngimg.com and I downloaded the mp3 sound from a free website called https://www.zapsplat.com/.
I tried adding more features from my honey bee project with the blooming flower but I failed to manipulate the code on the first few tries. I sent the professor an email and he highlighted that I should use the bee code and experiment so I can add more to the project. Here is an image of one of the few errors I was facing. My fairy was stuck and the score had no limit and kept increasing.
I then copied my bee code and went through different attempts. I created variables for the object that would collect the item and the object that would be collected. Then I added values for the speed and movement values I wanted for the objects. I uploaded multiple images and sounds so that I would have more options to work with new fairytale characters and construct my project around the story. I then tested ways to make my fairy move up-down and left-right by using the keys on the keyboard. I successfully was able to execute the movement and was able to make it collect the points by passing in the variables. I also then added sound to it when it collected a point. I then wanted to add the flower blooming code from my bee project to add movement to the object being chased in the game. I then created a gold magic starlike circle with two ellipses and added a png swirl of gold around it to add character.
I removed my initial blue background with the grass png at the bottom and I wanted to add more character to my overall background. I did more research on the P5 website and came across some cool snowfall codes with cool movement and I looked at more examples to get an idea about the values. I then constructed a for loop that created a random star-like pattern of gold dust in the background that elevated the look of my game.
I started developing more ideas and faced many challenges along the way. I was having a hard time coming to the conclusion if I really wanted a losing score or an ending game. I tried multiple times to make something that my object would touch and lose the game but I was able to execute some parts while others did not execute properly. Here is a screenshot attached, that shows one of the few attempts at creating the scores. I continued brainstorming ideas and wrote them down to get a clear understanding of what I wanted in my game. I then tested blocking the sides and came up with the top of the screen and bottom left of the width. I later copied it and edited it in a way that the bottom and right sides would work. I then added a bad object that looks like an eye and represents the evil energy that reduces points when touched. The gold object whereas collects the gold energy and transforms it into a fairy by increasing the score. Later, I visited the professor and he guided me through the steps of the character's transition with conditionals that helped me change the character as it reaches the set number and continues collecting points.
The dragon represents the magical power of transitioning into the good and calm energy of a fairy. The dragon in Asian cultures holds a lot of importance. As a South Asian myself, the cultural mythical legends and stories are a huge part of my culture. I have Asian friends that shared stories of dragons and the beliefs of good and bad energy in their culture. Since I've seen similarities between cultures I wanted to add that to my final project. The fairy represents the transformation I want the user to experience and the background is a representation of another dimension in which the fairy and dragon live. The sound and collecting points are supposed to be engaging for the user as they have entered this dimension of good and bad. The goal of the users is to ignore the bad and focus on achieving the good, which does come with obstacles. The background gives the game movement that is perfect for both the fairy and the dragon. The gold coins represent energy gold coins for transition. Another feature I added was an enter key control that changes the character and gives a sound. I also separated the sounds for both the good points and bad energy points and added different texts for when the user loses so it shows that they have transformed, otherwise it shows that you have failed.
The creative aspect I have envisioned for the game was fully completed without any errors and the code did have some execution errors but it came out nicely with the concept. I think being an artist and doing more hands-on physical projects is easier for me as compared to logical code but the documentation has definitely helped me express the obstacles and address what I did to resolve them in a better manner. Overall, I think the project was a good source for me to combine art with javascript, and I had fun creating and testing the project. Lastly, I would like to mention that since this is my last blog post for the semester I would like to share that my overall experience throughout the semester was amazing in this class. I learned so much about breadboards, wires, javascript, and creating robots. I feel like this is a class I would always remember and I would recommend it to other students to take this class even if their not a computer science major because this class touches on both the sides of art and technology mixed into a whole and Professor Eric Hagan, has been a great professor overall and has taught us so many valuable skills. Thank you, professor! and thank you to all of my readers for viewing my blog posts throughout the semester, bye!
Link to game: