let timer = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  p = new Vector(

    width / 2,

    height / 2,

    20,

    0,

    0,

    0,

    false,

    width / 2,

    height / 2

  );

}

​

function draw() {

  background(255,255,0)

  timer = (timer+1)%10

​

  if (p.locktimer !=0){

    trail.push([p.x,p.y])

  } 

  if(timer%2 ==0){

    trail.splice(0,1)

  }

  noFill()

  strokeWeight(90)

  strokeJoin(ROUND)

  stroke(128,128,128)

  beginShape()

  trail.forEach((item) => vertex(item[0],item[1]))

  endShape()

   strokeWeight(80)

  strokeJoin(ROUND)

  stroke(0,0,0)

  beginShape()

  trail.forEach((item) => vertex(item[0],item[1]))

  endShape()

  noStroke()

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

    fill(255-i*2);

  circle(trail[i][0],trail[i][1],60)

  }

  fill(0)

  p.move();

​

}

​

class Vector {

  constructor(x, y, size, rotation, col, speed, locked, tempX, tempY) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.rotation = rotation;

    this.col = col;

    this.speed = speed;

    this.locked = false;

    this.tempX = tempX;

    this.tempY = tempY;

    this.locktimer = 0;

  }

​

  display() {

    translate(this.x, this.y);

    rotate(-atan2(mouseX - this.x, mouseY - this.y));

    beginShape();

    triangle(

      0,

      0 + this.size,

      0 + this.size / 2,

      0 - this.size / 2,

      0 - this.size / 2,

      0 - this.size / 2

    );

    endShape();

  }

​

  move() {

    if (mouseIsPressed) {

      this.locktimer = min(this.locktimer + 0.5, 100);

    } else {

      this.locktimer = max(this.locktimer - 0.1, 0);

    }

  if(this.x-5 <= mouseX &&

     this.x+5 >= mouseX &&

     this.y-5 <= mouseY &&

     this.y+5 >= mouseY ){

    p.locktimer = 0

  }

​

    this.x = map(this.locktimer, 0, 200, this.tempX, mouseX);

    this.y = map(this.locktimer, 0, 200, this.tempY, mouseY);

​

    this.tempX = this.x;

    this.tempY = this.y;

  }

}

​