From pick up robot to Ricochet robot

For my 5th dev-log I tried to create a robot that can move randomly and pick up objects that are displayed on the screen. To create the robot, I used a simple grey circle and for the objects, I generated 3 blue squares on one side of the screen. The goal for this dev-log is that I had to see if I can have the robot pick up each square that I generated from the left side of the screen and take each square object and place it in another spot on the canvas. This was such a fun project idea and I loved figuring out how to make the robot move and how I can generate the pick-up function for the robot to be able to grab objects. One of the challenges that I faced while developing this project was creating the pick up function for the robot. I couldn't figure out how to make the other squares attach to the robot so I decided to make the objects move which made me think of another idea where the robot could ricochet in between the moving objects without touching them while the objects moved from the left side of the screen to the right side of the screen.

Here is some code that I wrote for this project :

``` 

let x;

let y;

//Pos = createVector(x,y)

//vel = createVector(x,y)

var squareX = 0;

var squareY = 0;

var speedX = 10;

var speedY = 10;

let myRobot;

function setup() {

  createCanvas(500, 500);

  myRobot = new Robot();

}

function draw() {

  background(220);

  myRobot.move();

  myRobot.display();

  myRobot.update();

  

  fill("blue");

  square(frameCount-1, 200-frameCount, 20);

  square(frameCount-1, 300-frameCount, 20);

  square(frameCount-1, 400-frameCount, 20);

  

  if(squareX > frameCount || squareX < frameCount){

    speedX = speedX*-1

  }

  

  if(squareY > frameCount || squareY < frameCount){

    speedY = speedY* -1;

  }

    

  

}

class Robot {

  constructor() {

    this.pos = createVector(randomGaussian(width), randomGaussian(height));

    this.vel = createVector(randomGaussian(-1, 1), randomGaussian(-1, 1));

    this.size = 10;

  }

  move() {

    this.pos.add(this.vel);

  }

  display() {

    fill("grey");

    circle(this.pos.x, this.pos.y, 30);

  }

  update() {

    this.pos.add(this.vel);

    if (this.pos.x < 0 || this.pos.x > width) {

      this.vel.x = this.vel.x * -1;

    }

    if (this.pos.y < 0 || this.pos.y > height) {

      this.vel.y = this.vel.y * -1;

    }

    class Square {

      constructor() {

     this.pos = createVector(randomGaussian(width), randomGaussian(height));

      this.vel = createVector(randomGaussian(-1,1), randomGaussian(1,1));

      }

      

      move(){

        this.pos.add(this.vel);

  

      }

      

      display(){

        

fill('blue');

square(frameCount,frameCount,20);

    

        

      }

      

      update(){

      this.pos.add(this.vel);

        

      if(this.pos.x < 0 || this.pos.x > width){

        this.vel.x = this.vel.x * -1;

        

        if(this.pos.y < 0 || this.pos.y > height){

          this.vel.y = this.vel.y * -1;

        }

        

      }

      }

    

    }

  }

}

```