const center = 100;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  blendMode(ADD);

  imageMode(CENTER);

  particle = new Particle();

}

​

function draw() {

  background(20, 20, 28);

  noStroke();

  particle.run();

}

​

class Particle {

  constructor() {

    this.distvar = 125;

    this.mouseOn = 0;

    this.growing = false;

    this.image = createImage(center * 2, center * 2);

    this.image.loadPixels();

  }

​

  run() {

    this.update();

    clear();

    background(20, 20, 28);

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

      if (i % 10 === 0) {

        let x = windowWidth/2 + i*0.6*cos(radians(i));

        let y = windowHeight/2 + i*0.6*sin(radians(i));

        x += this.mouseOn = dist(x, y, mouseX, mouseY) < 15 ? 10 : 0;

        image(this.image, x, y);

      }

    }

    this.image.updatePixels();

  }

​

  update() {

    if (this.growing) {

      if (this.distvar < 125) {

        this.distvar += 1.4;

      } else {

        this.growing = false;

      }

    } else {

      if (this.distvar > 25) {

        this.distvar -= 2;

      } else {

        this.growing = true;

      }

    }

    for (let y = 0; y < this.image.height; y++) {

      for (let x = 0; x < this.image.width; x++) {

        let distance = (sq(center - x) + sq(center - y)) / this.distvar;

        let id = (x + y * this.image.width) * 4;

        this.image.pixels[id] = (80+this.mouseOn) / distance;

        this.image.pixels[id + 1] = 130 / distance;

        this.image.pixels[id + 2] = 110 / distance;

        this.image.pixels[id + 3] = 255 / distance;

      }

    }

    this.image.updatePixels();

  }

}

​

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}