​

function setup() {

  createCanvas(560,390);

  mover = new Mover();

}

​

function draw() {

  background(220);

    mover.update();

  mover.checkEdges();

  mover.display();

}

class Mover {

  constructor() {

    this.position = createVector(width / 2, height / 2);

    this.velocity = createVector(0, 0);

    this.acceleration = 0;

    this.topspeed = 4;

    this.xoff = 1000;

    this.yoff = 0;

    this.r = 16;

  }

​

  update() {

    let mouse = createVector(mouseX, mouseY);

    let dir = p5.Vector.sub(mouse, this.position);

    dir.normalize();

    dir.mult(0.5);

    this.acceleration = dir;

​

    this.velocity.add(this.acceleration);

    this.velocity.limit(this.topspeed);

    this.position.add(this.velocity);

  }

​

  display() {

    //heading() function: calculates the angle of rotation for a vector (2D vectors only)

    let angle = this.velocity.heading();

​

    stroke(0);

    strokeWeight(2);

    fill(63,63,147);

    push();

    //https://p5js.org/reference/#/p5/rectMode

    rectMode(CENTER);

​

    translate(this.position.x, this.position.y);

    rotate(angle); //rotate according to angle

    rect(0, 0, 30, 10);

​

    pop();

  }

​

  checkEdges() {

    if (this.position.x > width) {

      this.position.x = 0;

    } else if (this.position.x < 0) {

      this.position.x = width;

    }

​

    if (this.position.y > height) {

      this.position.y = 0;

    } else if (this.position.y < 0) {

      this.position.y = height;

    }

  }

}