constructor(_color) {

    this.points = [];

    this.color = _color;

  }

  draw() {

    if (this.points.length <= 0) {

      return;

    }

    noFill();

    stroke(this.color);

    strokeWeight(10);

    beginShape();

    curveVertex(this.points[0].x, this.points[0].y);

    for (let point of this.points) {

      curveVertex(point.x, point.y);

    }

    curveVertex(

      this.points[this.points.length - 1].x,

      this.points[this.points.length - 1].y

    );

    endShape();

    if (this.points.length > 0) {

      this.points.shift();

    }

  }

  addVertex(_x, _y) {

    this.points.push({

      x: _x,

      y: _y,

    });

    // if (this.points.length > 30) {

    //   this.points.shift();

    // }

  }

}

​

class Trails {

  constructor(_number) {

    this.color = ["#FA6950", "#DB2E8C", "#C672ED", "#9A93CF", "#C7DFFF"];

    this.trails = [];

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

      this.trails[i] = new Trail(this.color[i]);

    }

  }

  addVertex(_points) {

    let count = 0;

    if (this.trails.length != _points.length) {

      console.log(

        "Error: does not match the array length",

        this.trails.length,

        _points.length

      );

    }

    for (let point of _points) {

      this.trails[count].addVertex(point.x, point.y);

      count++;

    }

  }

  draw() {

    for (let trail of this.trails) {

      trail.draw();

    }

  }

}

​

var trails = new Trails(5);

function setup() {

  createCanvas(400, 400);

  drawingContext.shadowBlur = 7;

  drawingContext.shadowOffsetX = 5;

  drawingContext.shadowOffsetY = 5;

  drawingContext.shadowColor = color(150, 150, 150);

}

​

function draw() {

  background(220);

  trails.draw();

}

​

function mouseMoved() {

  trails.addVertex([

    { x: mouseX, y: mouseY },

    { x: mouseX + 5, y: mouseY + 5 },

    { x: mouseX + 10, y: mouseY + 10 },

    { x: mouseX + 15, y: mouseY + 15 },

    { x: mouseX + 20, y: mouseY + 20 },

  ]);

}

​