top of page
Project Brief:
Create a sketch that adds objects based on interaction (mouse press, keystroke, etc) that interact with each other (collision, repulsion, etc.) OR create a sketch that makes faces which have multiple dimensions of variability (skin color, eyes, ears, mouth, hair, age, etc). A new face should be created every time you click the mouse. For either example, write the sketch as pseudo-code first, then fill in your code afterwards.
Finally till the interaction part! I am an FPS game lover & player, so I want to try to bring an Aim lab to the p5js platform. The first thing I do is to screenshot CSGO AIM LAB and an arm with a weapon inside the game. And also, I use 4 rectangles to create the crosshair I use in the game. Then I load the image in p5. The arm will move based on your aiming (mouseX)
Then, creating enemies by using Class{ }. I decide to use the random shape of ellipses and rectangles as enemies so that users can focus on practicing aiming. The enemies will be born between 150 - 420 at the y-axis.
Then I create contain( ) function which was inspired by The Coding Train video. If mouseX and mouseY are inside the shape(which means you hit the enemies), then splice( ) the enemies.
contains(px, py){
let d = dist(mouseX, mouseY, this.x, this.y);
if(d < this.r){
return true;
}else{
return false;
}
}
function mousePressed() {
for (let i = enemiesArray.length - 1; i >= 0; i--) {
if (enemiesArray[i].contains(mouseX, mouseY)) {
enemiesArray.splice(i, 1);
}
}
for (let g = sqenemiesArray.length - 1; g >= 0; g--) {
if (sqenemiesArray[g].contains(mouseX, mouseY)) {
sqenemiesArray.splice(g, 1);
}
}
}
Later on, I started to think. As an FPS player, what do I need for an aim lab map?
The first thing that comes to my mind is the add enemies button and reset button. For the add enemies button is quite easy, I use an enemies array to randomly push, new enemies, into the map. It's quite hard to the reset button. After brainstorming I decide to use the splice function to splice all existing enemies first, then randomly push new enemies as the map started. I think that works best.
Another important function is a button to get enemies moving, and when you pause it, the "move" button changes to pause. I first tried using if( ) and mousePressed. But I notice the moving animation only moves for one frame. I was so struggling with it until I went to the office hour with Prof. Cotter. He showed me an example by using a boolean. Yes! That works. I was so struggling in the if( ) and mousePressed. Just like Prof. Cotter said, sometimes we should take a step back and think.
So, I set the enemiesMoving = false at the beginning, and when mousePressed, the boolean changes. And it works! Yah! Inspiring from here, I create 3 different moving modes so that users can try the different moving speeds of the enemies while they are practicing.
bottom of page