let manualBgImage;

let screenState;

​

function preload() {

  backgroundImage = loadImage("bgImgVec3.svg");

  coverImage = loadImage("cover_photo.svg");

  manualBgImage = loadImage("bgImgManualVec.svg");

}

​

class AcuteIsoscelesTriangle {

  constructor(x, y, sideLength, angle) {

    // Calculate the coordinates of the three points of the triangle

    this.x = x;

    this.y = y;

    this.sideLength = sideLength;

    this.angle = angle;

    this.x1 = x - sideLength / 2;

    this.y1 = y + (sideLength / 2) * tan(angle);

    this.x2 = x + sideLength / 2;

    this.y2 = y + (sideLength / 2) * tan(angle);

    this.x3 = x;

    this.y3 = y - sideLength / 2 / cos(angle);

    this.trail = [];

    // Store the angle of inclination of the vertex opposite to the non-equal side

    this.angle = angle;

  }

​

  // Function to draw the triangle

  display() {

    triangle(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3);

  }

​

  // Function to move the triangle

  move(x, y) {

    // Update the coordinates of the three points of the triangle

    this.x1 += x;

    this.y1 += y;

    this.x2 += x;

    this.y2 += y;

    this.x3 += x;

    this.y3 += y;

  }

​

  rotate(angle) {

    // Convert angle to radians

    angle = radians(angle);

​

    // Calculate the new coordinates of the three points of the triangle after rotation

    let x1New =

      (this.x1 - this.x3) * cos(angle) -

      (this.y1 - this.y3) * sin(angle) +

      this.x3;

    let y1New =

      (this.x1 - this.x3) * sin(angle) +

      (this.y1 - this.y3) * cos(angle) +

      this.y3;

    let x2New =

      (this.x2 - this.x3) * cos(angle) -

      (this.y2 - this.y3) * sin(angle) +

      this.x3;

    let y2New =

      (this.x2 - this.x3) * sin(angle) +

      (this.y2 - this.y3) * cos(angle) +

      this.y3;

    let x3New =

      (this.x3 - this.x3) * cos(angle) -

      (this.y3 - this.y3) * sin(angle) +

      this.x3;

    let y3New =

      (this.x3 - this.x3) * sin(angle) +

      (this.y3 - this.y3) * cos(angle) +

      this.y3;

​

    // Update the coordinates of the three points of the triangle

    this.x1 = x1New;

    this.y1 = y1New;

    this.x2 = x2New;

    this.y2 = y2New;

    this.x3 = x3New;

    this.y3 = y3New;

  }

  respawn() {

    // Reset the position of the triangle to the center of the screen

    console.log("Respawned");

    this.x1 = this.x - this.sideLength / 2;

    this.y1 = this.y + (this.sideLength / 2) * tan(this.angle);

    this.x2 = this.x + this.sideLength / 2;

    this.x2 = this.x + this.sideLength / 2;

    this.y2 = this.y + (this.sideLength / 2) * tan(this.angle);

    this.x3 = this.x;

    this.y3 = this.y - this.sideLength / 2 / cos(this.angle);

  }

​

  moveInDirection(distance) {

    let dx =

      (this.x3 - (this.x1 + this.x2) / 2) /

      dist((this.x1 + this.x2) / 2, (this.y1 + this.y2) / 2, this.x3, this.y3);

    let dy =

      (this.y3 - (this.y1 + this.y2) / 2) /

      dist((this.x1 + this.x2) / 2, (this.y1 + this.y2) / 2, this.x3, this.y3);

​

    // Move the triangle in the direction of its head by the specified distance

    this.move(dx * distance, dy * distance);

​

    // Check if any point of the triangle goes off the canvas

    if (

      this.x1 < 0 ||

      this.x2 < 0 ||

      this.y1 < 0 ||

      this.y2 < 0 ||

      this.x1 > width ||

      this.x2 > width ||

      this.y1 > height ||

      this.y2 > height

    ) {

      // Condition for respawn

      this.respawn();

    }

  }

​

  turnRight() {

    this.rotate(45);

  }

  turnLeft() {

    this.rotate(-45);

  }

  // Method to leave a trail of circles at the previous position of the triangle

  leaveTrail(radius) {

    // Create a new circle with the current position of the triangle

​

    let circle = {

      x: (this.x1 + this.x2 + this.x3) / 3,

      y: (this.y1 + this.y2 + this.y3) / 3,

      r: radius,

    };

​

    // Add the circle to the list of circles in the trail

    this.trail.push(circle);

​

    // // If the trail has more than 50 circles, remove the oldest circle

    // if (this.trail.length > 50) {

    //   this.trail.shift();

    // }

​

    // Draw the circles in the trail

    for (let i = 0; i < this.trail.length; i++) {

      // fill("red");

      noStroke();

      stroke("#cb6ce6");

      ellipse(

        this.trail[i].x,

        this.trail[i].y,

        this.trail[i].r,

        this.trail[i].r

      );

    }

  }

}

​

let button1X, button1Y, button1Width, button1Height;

let button2X, button2Y, button2Width, button2Height;

​

let tri;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  tri = new AcuteIsoscelesTriangle(windowWidth / 2, windowHeight / 2, 30, 45);

  background(0);

  screenState = 0;

​

  rectMode(CENTER);

​

  // set the position and size of the first button

  button1X = (3*width) / 7;

  button1Y = height - 50;

  button1Width = 100;

  button1Height = 40;

​

  // set the position and size of the second button

  button2X = (4 * width) / 7;

  button2Y = height - 50;

  button2Width = 100;

  button2Height = 40;

}

​

function draw() {

  if (0 == screenState) {

    background(coverImage);

  }

  else if (1 == screenState) {

    background(backgroundImage);

​

    tri.leaveTrail(8);

    fill("#000");

    stroke("#00BCD4");

    strokeWeight(3);

    tri.display();

    strokeWeight(1);

    stroke("#8c52ff");

    displayButtons();

  }

  else if(2 == screenState){

    background(manualBgImage);

    displayButtons();

  }

}

​

function keyPressed() {

  if (keyCode === UP_ARROW) {

    tri.moveInDirection(10);

  }

  if (keyCode === DOWN_ARROW) {

    tri.moveInDirection(-10);

  }

​

  if (keyCode === RIGHT_ARROW) {

    tri.turnRight();

  }

  if (keyCode === LEFT_ARROW) {

    tri.turnLeft();

  }

}

​

function mouseClicked() {

  if (screenState == 0 && mouseX < width / 2) {

    tri.respawn();

    screenState = 1;

  }

  if(screenState == 0 && mouseX > width / 2){

    screenState = 2;

  }

  if((screenState == 1 || screenState ==2) && (mouseX > button1X - button1Width / 2 && mouseX < button1X + button1Width / 2 &&

      mouseY > button1Y - button1Height / 2 && mouseY < button1Y + button1Height / 2)){

    console.log("Button 1 clicked");

    screenState = 0;

    tri.trail = [];

  }

  if((screenState == 1 || screenState ==2) && (mouseX > button2X - button2Width / 2 && mouseX < button2X + button2Width / 2 &&

      mouseY > button2Y - button2Height / 2 && mouseY < button2Y + button2Height / 2)){

    console.log("Button 2 clicked");

    saveCanvas("robot_playground", 'png');

  }

}

​

function displayButtons(){

  // draw the first button

    rect(button1X, button1Y, button1Width, button1Height);

  // draw the second button

    rect(button2X, button2Y, button2Width, button2Height);

   // Draw text in the middle of the button

  textAlign(CENTER, CENTER);

  textSize(25);

  fill("#fff"); // black color

  text("Back", button1X, button1Y);

  text("Save", button2X, button2Y);

  fill("#000")

}