Assignment #3: The Poor Man’s Aimlabs

Concept:

  • As someone who occasionally plays first-person shooter games and is admittedly very bad at them, Aimlabs is a great tool for honing my aiming skills with a mouse. The most common mode of training in Aimlabs involves clicking on a number of orbs that are suspended mid-air; with each well-placed click, the targeted orb disappears and a new one appears in another position. Since I haven’t incorporated any interactive elements in my previous assignments, I decided to challenge myself by roughly recreating Aimlabs in p5js.

Highlight:

  • A challenge I faced during this project involved setting up the mousePressed() function so that orbs are replaced with new ones when clicked on. Since the coordinates of the orbs are randomized in the Orb class, I was unsure how to reference their current coordinates in the main sketch while trying to calculate the distance between the mouse and the center of the orb at the time of the click. I ultimately set up a clickPos() function within the Orb class that checks if the distance of the mouse from the orb center is less than the orb’s radius. Then, I simply referenced clickPos() within the if statement of the mousePressed function in the main sketch.
let orbs = [];

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 5; i++) {
    orbs[i] = new Orb();
  }
}

function draw() {
  background(0);
  print(mouseX + "," + mouseY);
  noStroke();
  fill(90);
  quad(0, 0, 400, 0, 340, 100, 60, 100);
  fill(160);
  rect(60, 100, 280, 230);
  fill(130);
  quad(0, 0, 60, 100, 60, 330, 0, 400);
  quad(340, 100, 400, 0, 400, 400, 340, 330);
  fill(195);
  quad(60, 330, 340, 330, 400, 400, 0, 400);

  for (let i = 0; i < orbs.length; i++) {
    orbs[i].display();
  }
}

function mousePressed() {
  for (let i = 0; i < orbs.length; i++) {
    if (orbs[i].clickPos()) {
      orbs[i] = new Orb();
    }
  }
}


class Orb {
  constructor() {
    this.x = random(50, 350);
    this.y = random(50, 350);
    this.diameter = 70;
    this.color = color("rgb(167,226,241)");
  }

  display() {
    fill(this.color);
    stroke('#2CA9C9');
    strokeWeight(3);
    ellipse(this.x, this.y, this.diameter);
  }
  
  clickPos(){
    let d = dist(mouseX, mouseY, this.x, this.y);
    return d < this.diameter/2;
  }
}

Sketch:

Try clicking on the blue orbs!

Reflection and Future Improvements:

  • Overall, I’m proud of myself for managing to incorporate an interactive element despite how intimidating it felt at first as a beginner. However, this project isn’t the most accurate when compared to the actual Aimlabs. In my sketch, the orbs are static while the cursor is free to move around to click on the orbs. In Aimlabs, however, the cursor is fixed on the center of the screen as a crosshair; while the crosshair remains static on screen, the orbs move in relation to the movement of the crosshair even though they are supposedly static as well. In the future, it would be interesting to recreate this so that the program feels three-dimensional and more immersive.

Leave a Reply