広がる縞々の円

/**
 * expanding circular stripes
 * 
 * @author aadebdeb
 * @date 2017/02/15
 */

var circles = [];
var isWhite = true;

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(10);
  noStroke();
}

function draw() {
  background(255);
  
  var nextCircles = [];
  for (var i = 0; i <circles.length; i++) {
    var circle = circles[i];
    circle.render();
    circle.update();
    if (circle.isInScreen()) {
      nextCircles.push(circle);
    }
  }
  circles = nextCircles;
  var cr = 200;
  var ca = frameCount * 0.08;
  var center = createVector(width / 2 + cr * cos(ca), height / 2 + cr * sin(ca));
  var radiusSpeed = map(sin(frameCount * 0.37), -1, 1, 5, 20);
  var c = isWhite? color(255): color(0);
  circles.push(new Circle(center, 20, c));
  isWhite = !isWhite;
}

function Circle(_center, _radiusSpeed, _c) {
  this.center = _center;
  this.radius = 0;
  this.radiusSpeed = _radiusSpeed;
  this.c = _c;
}

Circle.prototype = {
  
  render: function() {
    fill(this.c);
    ellipse(this.center.x, this.center.y, this.radius * 2, this.radius * 2);
  },
  
  update: function() {
    this.radius += this.radiusSpeed;
  },
  
  isInScreen: function() {
    return this.radius < sqrt(sq(width) + sq(height));
  },
  
}