let imgUniverse; // variable to hold image for the background

let angleXrotate = 0; // Rotation angle for X-axis

let angleYrotate = 0; // Rotation angle for Y-axis

let objectsme = []; // array to hold ME graphics objects

let guitar; // variable to hold graphics objects of guitar

let racket; // variable to hold graphics objects of racjet

​

function preload() {

  // load image files

  imgBlackhole = loadImage('blackhole.jpg');

  imgUniverse = loadImage('the universe.jpg');

}

​

function setup() {

  createCanvas(480, 700, WEBGL);

  // restrict frame rate to debug

  // frameRate(30);

  // create ME graphics objects and add to array 'objectsme

  callingme();

}

​

function draw() {

  // place background image

  push();

  translate(-width / 2, -height / 2);

  image(imgUniverse, 0, 0);

  pop();

  // create blackhole sphere

  if (objectsme[0]) {

    blackhole();

  } else {

    filter(BLUR, 10)

  }

​

  // show all instances in the objectsme array

  for (let i = 0; j = objectsme[i]; i += 1) {

    j.show();

  }

​

}

​

function mouseClicked() {

  // call the first instance in objectsme array to attack the blackhole

  if (objectsme[0]) {

    objectsme[0].attack();

  }

​

}

​

// the hovering MEs' class

class Hoveringme {

  constructor(relativeX, relativeY, shape, status) {

    this.relativeX = relativeX;

    this.relativeY = relativeY;

    this.shape = shape;

    this.status = 'hovering';

    this.displayedX = 0

    this.displayedY = 0;

  }

  // show the MEs

  show() {

    push();

    // Reset the transformations due to 3D

    translate(-width / 2, -height / 2); // Move to 2D context origin

    if (this.status === 'hovering') {

      // Update the ME's position around the mouse

      this.displayedX = mouseX + this.relativeX + random(-100, 100) * 0.05; 

      this.displayedY = mouseY + this.relativeY + random(-100, 100) * 0.05; 

    } else if (this.status === 'attacking') {

      let spherePosition = createVector(0, -200, 0); // Sphere's position

      let targetX = spherePosition.x + width / 2; // Sphere's X position in 2D

      let targetY = spherePosition.y + height / 2; // Sphere's Y position in 2D

      // Update the ME's position towards the target

      this.displayedX += (targetX - (this.displayedX)) * 0.05; // Move towards target X

      this.displayedY += (targetY - (this.displayedY)) * 0.05; // Move towards target Y

      // Remove the ME from canvas if close enough

      if (((this.displayedX - targetX)**2 < 200) & ((this.displayedY - targetY)**2 < 200)) {

      objectsme.splice(objectsme[0], 1);

      }

    }

    if (this.shape === 'guitar') {

        // show the guitar graphics

        image(guitar, this.displayedX, this.displayedY);

      } else if (this.shape === 'racket') {

        image(racket, this.displayedX, this.displayedY);

      } else {

        fill(mouseX + random(0, 50), mouseY + random(0, 50), mouseX + mouseY + random(0, 50))

        rect(this.displayedX, this.displayedY, 50);

      }

​

    pop();

  }

  // ME to attack the blackhole

  attack() {

    this.status = 'attacking';

  }

}

​

// create ME instances, add to array objectsme, and create graphics objects

function callingme() {

  guitarObject = new Hoveringme(20, 20, 'guitar');

  racketObject = new Hoveringme(-40, -60, 'racket');

  rectObject1 = new Hoveringme(-70, -10);

  rectObject2 = new Hoveringme(-80, 90);

  rectObject3 = new Hoveringme(60, -60);

  objectsme.push(guitarObject, racketObject, rectObject1, rectObject2, rectObject3); 

  drawGuitar();

  drawRacket();

}

function drawGuitar() {

  let c = color('#bd6d36');

  let c1 = color('#592c0e');

  let c2 = color('#814116');

  // Create a graphics object guitar

  guitar = createGraphics(100, 150);

​

  // Draw to the graphics object guitar

  // Body of the guitar

  guitar.fill(c); // Brown color

  guitar.noStroke()

  guitar.beginShape();

  guitar.vertex(25, 100); // Start at bottom left

  guitar.bezierVertex(10, 75, 10, 50, 25, 25); // Left curve

  guitar.bezierVertex(75, 0, 75, 50, 25, 25); // Right curve

  guitar.bezierVertex(90, 50, 90, 75, 25, 100); // Bottom curve

  guitar.endShape(CLOSE);

​

  // Neck of the guitar

  guitar.fill(c2); // Mid-dark brown color

  guitar.rect(25, 5, 8, 80); // Neck

  // Sound hole

  guitar.fill(c1); // Dark sound hole

  guitar.ellipse(25, 50, 10, 25); // Draw sound hole

​

  // Strings

  guitar.stroke('white'); // White color for strings

  guitar.strokeWeight(1);

  for (let i = 0; i < 6; i++) {

    guitar.line(25 + 2 * i, 0, 25 + 2 * i, 60); // Draw strings

  }

}

​

function drawRacket() {

  let c = color('#a8d8a2'); // Light green color for the racket handle

  let c1 = color('#4f7c4f'); // Dark green for the racket frame

  let c2 = color('#d9e6d9'); // Light color for the racket strings

​

  // Create a graphics object for the racket

  racket = createGraphics(100, 150);

​

  // Draw to the graphics object racket

  // Frame of the racket

  racket.fill(c1); // Dark green color

  racket.noStroke()

  racket.beginShape();

  racket.vertex(50, 100); // Bottom point

  racket.bezierVertex(70, 50, 30, 50, 50, 0); // Upper curve

  racket.bezierVertex(70, 50, 70, 100, 50, 100); // Right curve

  racket.endShape(CLOSE);

​

  // Handle of the racket

  racket.fill(c); // Light green color

  racket.rect(45, 100, 10, 40); // Handle

​

  // Strings of the racket

  racket.stroke(c2); // Light color for strings

  racket.strokeWeight(1);

  for (let i = 0; i < 5; i++) {

    racket.line(30 + i * 5, 0, 30 + i * 5, 100); // Vertical strings

  }

  for (let j = 0; j < 4; j++) {

    racket.line(30, j * 25, 60, j * 25); // Horizontal strings

  }

​

}

// draw the sphere with texture

function blackhole() {

  // Increment the rotation angles

  angleXrotate += 0.005; // Adjust the speed by changing this value

  angleYrotate += 0.005; // Adjust the speed by changing this value

​

  push(); // save the current state

  translate(0, -200, 0); // translate the coordinate system temporarily to place the sphere

  rotateX(angleXrotate); // Rotate around X-axis

  rotateY(angleYrotate); // Rotate around Y-axis

  texture(imgBlackhole); // adding texture to the sphere

  stroke('white'); // contour the sphere

  strokeWeight(0.25);

  sphere(100); // placing the sphere on the canvas with r = 100

  pop(); // return to the previous state

​

}