Project A: Generative Visuals

Game in Action
Winner! 

Particle Ripple

My Project A, Particle Ripple, is a coded game with generative visuals implemented into it. My initial visual was to create a ripple effect through objects and lines, where each movement interacts between the objects. However, to make my project more interactive and purposeful, I decided to turn it into a game. The purpose of the game involves two players, where each player is to maneuver the ball to push their corresponding colored particles across the white “finish” line on the side where the initial ball is spawned. To win the game, one of the players must utilize a ball push either the blue or pink particles (depending on which team they are on) past the white line, where the score reaches at least 200. Once either of the scores reaches 200 points, an automated text will pop up indicating which player won (either Team Blue or Team Pink). The blue ball is controlled by the arrow keys on the keyboard, while the pink ball is controlled by using keys: A W S D; my inspiration for the movement controls were from computer games. One of the key rules of the game is that only corresponding colored objects can interact and affect each other; essentially the blue ball can only affect the blue particles, while the pink ball can only affect pink particles. My idea was to create a game that was simple to understand, interactive and fun, and had a hint of difficulty. The most difficult aspect of the game is pushing the particles far enough to go beyond the white line, as the repelling movement between the ball and the particles causes the particles to move in various directions. Another main aspect of the game is to illustrate the physics of the repelling movement between the particles and the ball as they are constantly pushed away, but never out of bounds. Overall, the fundamental purpose of the game was to create a sense of competition for the players in a visually appealing way with interesting, yet simplistic interactions.

Initial Visual

Like I previously mentioned, my initial inspiration for this project was to create a generative visual focusing on the moving paint aspect of pouring acrylic paint. However, the idea itself was too difficult to accomplish with what we learned so far. Therefore, I decided to minimalize my idea even more with the idea of an interactive visual where an object protrudes an array of lines, and they alter and morph to that object’s shape. Essentially, I wanted to create a ripple effect where one object’s movement would affect each object inside the canvas, while never directly touching each other. As I began to lay out the coding foundation of my project, I ran into much difficulties with nearly every aspect, which I reached out to the learning assistants: Sonny and Carrot. Sonny assisted me in creating the repel effect between two classes, as well as making rows of the particle class array. During interaction day, I received feedback from my classmates and realized that my desired visual was still a far fetched, and I found both the interactions and image boring. I decided to alter my project and create it into a simple game with a purpose; however, I still incorporated some initial inspirations I had into it.

Code to create the Class Array of Objects
Code for Class Methods & Interconnection

Throughout the entire design process of my project, there was lots of trial and error. I ran into numerous issues with the code as sometimes it did not function the way I wanted, or it crashed. After Sonny assisted me in creating the foundation of the effect I wanted, I still strived to produce my initial project inspiration. However, I decided to make it into a game and noted down numerous aspects I wanted to incorporate into the game. In my project, there is a total of 4 classes: Blue Ball, Pink Ball, Blue Particles, Pink Particles. I first experimented with one class of particles and only one ball, as a one player game, but later on decided it would be more fun and interactive to create two players, which led to me adding in two more classes. I decided to go with the colors blue and pink as they contrast each other, yet also compliment each other. At first, I had made the particle colors a random variation of set RGB parameters; however, it was not as pleasing to look at. Implementing the visuals and methods for each of the classes was somewhat difficult, but I referred to previous codes we learned in class, my past mini projects, and the example codes provided for us for the particle mini project. From the slides, I referred to Moon’s codes for repelling objects and bounce + slow down. For most of the code, I referred back to my previous projects and the codes Leon taught us in class. For the scores, I referred to an online blog post by Kevin Lewis (https://blog.deepgram.com/p5js-game-logic/) and altered the code to fit into my project. I believe that throughout my project code, I incorporated much of what we learned throughout the first half of the semester. I also wanted to distinguish that there was a random aspect to it, in which I made the two balls change sizes randomly depending on their x-position, as well as when they are still. What I struggled with most for this project was making the classes interact with one another: blue ball and blue particles, and pink ball and pink particles. Each class was also an array, and although the arrays were necessary for the particles, it was not necessary for the balls. The main reason why the ball classes are also arrays is due to a fundamental mistake on my part, and I did not have enough time to fix the issue. Two other aspects I had difficulty with was making the array of the particle class multiply into rows, and making the particles repel the ball; to resolve this issue, I sought out to Sonny for assistance. She was extremely patient and kind as she helped me work out the problems. Once again, this project was mainly trial and error as I tested out a variety of different methods for each effect I wanted to implement. As I was incredibly immersed in having the code function properly, I did not document the process as much as I would have liked to. If I could go back and restart my project, I would first begin with the idea of creating a game, because then I would have more time to fully execute my plan for a fun, engaging, and heavily interacted game.

After receiving criticism and feedback from my classmates, and guest critics: Sonny and Moon, I realized there were quite a few issues with my project as well as much room for improvement. One suggestion I received was to fix my score counter to count the number of particles, rather than the time elapsed as the first particle passes the white line. Another was to make the winning player’s ball grow larger, while the losing player’s ball decreases in size. One serious issue with my game was that two players could not play simultaneously as the keyboard keys can only be used once at a time, which led to the suggestion to have one player use the mouse to control a ball, while the other uses the keyboard. If I had more time to hone this project, I would have altered my project to meet those standards, as well as make it more visually appealing and interesting by adding foreign objects that the ball can essentially “eat” to gain different powers. There were quite a few problems with my code, but overall, I believe the foundation and purpose of it was well-oriented for what I have learned throughout the first half of the course. Through creating this project, I learned how to properly use a class array of objects and how to make those classes interact with each other. I have also practiced my own knowledge of coding and better understand how each line of code actually functions. 

Prototypes & Process

Prototype 1
Prototype 2 (Interaction Day)
Prototype 3 (Prevalent Issues)

 

Leave a Reply

Your email address will not be published. Required fields are marked *