let numBullets = 20

let radius = 120

let bullets = []

const speed = 0.05

​

class Ship {

  render() {

    fill('tomato')

    ellipse(mouseX, mouseY, 20)

  }

}

​

class Bullet {

  constructor(i) {

    this.x = 0

    this.y = 0

    this.r = random(8, 15)

    this.angle = random(0, 360)

    this.radius = random(50, radius)

    this.speed = random(0.01, speed)

    this.history = []

  }

​

  position(x, y) {

    this.y = y + this.radius * cos(this.angle)

    this.x = x + this.radius * sin(this.angle)

    this.angle += this.speed

    this.history.push([this.x, this.y])

    if (this.history.length > 10) {

      this.history.splice(0, 1)

    }

  }

​

  render() {

    fill('white')

    line(this.x, this.y, mouseX, mouseY)

    this.history.forEach((pos, i) => {

      stroke(0, 0, 0, map(i, 0, this.history.length, 0, 100))

      ellipse(pos[0], pos[1], map(i, 0, this.history.length, 2, this.r))

      stroke(0)

    })

    ellipse(this.x, this.y, this.r);

  }

}

​

function setup() {

  createCanvas(600, 600)

  ship = new Ship()

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

    bullets.push(new Bullet())

  }

}

​

function draw() {

  background(255, 255, 255)

​

  bullets.forEach(bullet => {

    bullet.position(mouseX, mouseY)

    bullet.render()

  })

​

  ship.render()

}