Circles

var circles = [];

var img;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(100);

  noStroke();

  img = loadImage("music-player.png");

  for (var i=0; i<10; i++) {

    circles[i] = new Circle();

  }

}

​

function draw() {

  background(0);

  translate(width/2,height/2);

  drawBackground();

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

    circles[i].move();

    circles[i].display();

  }

  fill(26,37,68);

  ellipse(0,0,300,300);

  fill(53,36,61);

  ellipse(0,0,250,250);

  imageMode(CENTER);

  image(img,0,0);

}

​

function drawBackground() {

  pop();

  var a = 0;

  for(var i=400; i>=100; i=i-3) {

    fill(249,42,130,a);

    ellipse(0,0,i,i);

    a++;

  }

  push();

}

​

class Circle {

  constructor() {

    this.x = 0;

    this.y = 0;

    this.r = random(0,150);

    this.alpha = 255;

    this.angle = random(360);

    this.speed = random(1,5);

    this.size = random(10,80);

    this.red = random(180,250);

  }

  move() {

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

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

    this.r = this.r + this.speed;

    this.alpha = this.alpha - this.speed;

    if (this.alpha <= 0) {

      this.angle = random(360);

      this.x = 0;

      this.y = 0;

      this.r = random(0,150);

      this.alpha = 255;

      this.size = random(10,80);

    }

  }

  display() {

    pop();

    fill(this.red,42,130,this.alpha);

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

    push();

  }

}