var r_noise;

​

let canvas_w = 600,

  canvas_h = 600,

  noise_r = 1,

  nSteps = 360,

  line_count = 1,

  line_height = 30,

  circle_size = 100,

  dot_size = 8,

  center_x = canvas_w / 2,

  center_y = canvas_h / 2,

  line_color = [],

  line_noise_offset = [];

​

function setup() {

  pixelDensity(1);

  // frameRate(5);

  createCanvas(canvas_w, canvas_h);

  colorMode(HSB, 1);

​

  fill(color(0, 0, 0));

  for (var idx = 0; idx < line_count; idx++) {

    line_color[idx] = color(random(100) / 100, 1, 1);

​

    line_noise_offset[idx] = random(10000);

  }

  strokeWeight(2);

​

​

  // frameRate(5);

  background(0);

  noStroke();

}

​

function noisy(theta, x, y) {

  var n = noise(noise_r + noise_r * sin(theta),

    noise_r + noise_r * cos(theta),

    x * 0.001);

  return map(n, 0.25, 0.75, 0, height)

}

​

var res = 200,

  radius = 100;

  times = [180,

           120,

           90,

           72,

           60,

           45,

           40,

           36,

           30],

  radiuses = [200,

            160,

            120,

            80,

            40];

​

function draw() {

​

  background(0, 0, 0, 0.1);

​

  for (var n=0; n<radiuses.length; n++) {

    let radius = radiuses[n];

    for (var idx = 0; idx < res; idx++) {

      let pre_theta = map(idx, 0, res, 0, TWO_PI / 5);

​

      let theta = map(frameCount % times[n], 0, times[n], 0, TWO_PI) + pre_theta + 100 * noise(radius);

​

      var hue = map((theta + noisy(radius)) % TWO_PI, 0, TWO_PI, 0, 1.0);

      stroke(color(hue, 1, 1));

      // stroke(1)

      let ax = width / 2 + sin(theta) * radius,

        ay = height / 2 + cos(theta) * radius,

        bx = width / 2 + sin(theta) * (radius + 10)

      by = height / 2 + cos(theta) * (radius + 10);

​

      line(ax, ay, bx, by);

    }

  }

​

  if ((frameCount >= nSteps) && frameCount < 2*nSteps) {

    // frameRate(5)

    // saveCanvas("rainbow-circles-"+nf(frameCount%nSteps, 3)+".png")

  }

​

  // noLoop();

}