Concept
While I was reviewing The Coding Train videos on the topics we took in class this week, I was thinking about what to do for my assignment and how to implement OOP. I was specifically trying to figure out an object I could create multiple of. Then suddenly, the ghosts from the game Pac-Man popped into my head. I’m a huge fan of video games, so I immediately decided to use Pac-Man as inspiration for the assignment. I based my project on the design elements of the game, like the way the ghosts look, and had it so that when they’re moving around, they create a dotted line along their path, with the design being inspired by the dots Pac-Man eats around the map.
My Code
Process
I started my code by creating the ‘Ghost’ class, as that would be the main part of the project. Before starting any of the code, I watched ‘6.2: Classes in JavaScript with ES6 – p5.js Tutorial’ from The Coding Train as a refresher, and worked through creating the class myself.
Next, I began working on randomly spawning in the Ghosts when the program is run. To do this, I used a combination of the p5 reference site, searching on Google, and again the video ‘6.2: Classes in JavaScript with ES6 – p5.js Tutorial’ from The Coding Train.
Once I was able to get the ghost to spawn in properly, I began to work on getting them to move. I wasn’t sure where to start with this, so I looked for help on YouTube and came across a video titled “p5.js Coding Tutorial | Array of Bouncing Balls (OOP / mousePressed)” by Patt Vira. With the help of the video, I implemented the ‘moveGhost’ function and ‘checkBoundaries’ function, allowing the ghosts to move around the screen without going off of it. Additionally, I changed the dx and dy speed variable in the constructor allowing for variation in the speed between different ghosts.
Next, I decided to work on adding color to the ghosts, so I added an array holding a few colors for the ghosts. To give them a color, I added an argument to the constructor that would select a random color from the array when the ghost is created.
The next section of code ended up taking the longest to figure out. At first I tried to implement it by myself, but it wasn’t working out, so I looked through some of The Coding Train’s videos and found ‘9.7: Drawing Object Trails – p5.js Tutorial’. I used their help to implement an array that holds the vector location of each ghost and creates a point for each one.
Code I’m Proud Of
//creates vectors of the ghost position
let v = createVector(this.x,this.y);
this.history.push(v);
if (this.history.length > 500) {
this.history.splice(0,1);
trail(){
stroke(this.color);
for (var i = 0; i<this.history.length; i=i+1) {
var pos = this.history[i];
ellipse(pos.x,pos.y,1,1)
The part of the code that allowed the ghosts to draw a path while they were moving was a completely new concept to me, so being able to learn how to do it was really exciting, and therefore it is also the code I am most proud of. I definitely plan to implement this in future projects as well.
Problems I Ran Into
The biggest problem I had during this assignment was definitely getting the ghosts to draw a path as they moved. Before, I looked for a video to help me; I ended up making it so that there were just lines connecting each of the ghosts, rather than them creating a line as they moved.
Additionally, when I added the colors to the ghosts, my first attempt resulted in them flickering between the color options rather than having one. This was because I put the color randomization in the ‘Show’ function, so every time the ghost was drawn, the color changed. I was able to fix this tho by moving the color selection into the constructor.
Reflection
Overall, I’m happy with what I was able to create for the assignment, and it helped me a lot with practicing the latest concepts we’ve learned during class. I was especially happy, I could inccorparte my love for videos games to some extent. Although figuring out how to get the ghosts to draw a trail along their path was a bit challenging at first, learning to implement the array capturing the positions of the ghosts was a really interesting and I hope to explore it’s capabilities further in future assignments and projects. In terms of improvements, I think adding a way for the eyes of the ghosts to change direction based on which way they’re moving would add another fun element to the work and make their behaviours more similar to the actual game.