constructor(angle, r, frames) {

    this.r = r;

    this.angle = angle;

    this.sizeX = 18;

    this.sizeY = 75;

    this.direction = -1;

    this.increment = 1;

    this.positionX = 0;

    this.positionY = 0;

    this.frames = frames;

​

    this.x = this.r * cos(this.angle);

    this.y = this.r * sin(this.angle);

  }

​

  display(i) {

    // noFill();

    // stroke("#FFFFFF");

    noStroke();

​

    let g = drawingContext.createLinearGradient(

      -this.sizeX - 50,

      0,

      this.sizeX,

      this.sizeY

    );

​

    // -this.sizeX * 4,

    //  this.sizeY / 2,

    //  this.sizeX,

    //  this.sizeY

​

    // -this.sizeX,

    //   this.sizeY,

    //   this.sizeX,

    //   this.sizeY

​

    let c1 = color(181, 60, 228);

    let c2 = color(254, 182, 188);

    let c3 = color(250, 197, 187);

    let c4 = color(255, 255, 255);

    g.addColorStop(0.0, c1.toString());

    g.addColorStop(0.25, c2.toString());

    g.addColorStop(0.25, c3.toString());

    g.addColorStop(0.3, c4.toString());

    g.addColorStop(0.4, c3.toString());

    g.addColorStop(0.45, c2.toString());

    g.addColorStop(0.7, c1.toString());

​

    drawingContext.fillStyle = g;

​

    // ellipse(this.positionX, this.positionY, windowWidth, windowHeight)

​

    push();

​

    translate(this.x, this.y);

​

    rotate(1.6);

​

    rotate(this.angle);

​

    ellipse(this.positionX, this.positionY, this.sizeX, this.sizeY);

​

    pop();

  }

​

  move(i) {

    this.increment += TWO_PI / this.frames;

​

    this.positionX = 20 * sin(this.increment + i / PI);

  }

}

​