var r_noise;

​

let canvas_w = 300,

  canvas_h = 300,

  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);

  createCanvas(canvas_w, canvas_h);

  noStroke();

  colorMode(HSB, 1);

​

  stroke(0.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);

  }

​

  frameRate(60);

}

​

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)

}

​

​

function draw() {

  background(0);

​

  var theta = map(frameCount % nSteps, 0, nSteps, 0, TWO_PI);

​

  for (var x = 0; x < canvas_w; x += dot_size) {

​

    let line_centers = [];

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

      line_centers[idx] = noisy(theta, x + line_noise_offset[idx])

    }

    // var center_r = noisy(theta, x);

    // var center_g = noisy(theta, x + 400);

    // var center_b = noisy(theta, x + 800);

​

​

    for (var y = 0; y < canvas_h; y += dot_size) {

​

      var box_size = 0;

​

      if (dist(x, y, center_x, center_y) < circle_size) {

        box_size = 2;

        fill(255);

        // rect(x, y, box_size, box_size)

      } else {

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

          let d = abs(y - line_centers[idx]);

          if (d < line_height) {

            fill(line_color[idx]);

            box_size = map(d, 0, line_height, 6, 2);

            rect(x + (dot_size - box_size) / 2, y + (dot_size - box_size) / 2, box_size, box_size)

          }

​

        }

      }

​

​

    }

​

  }

​

  if (frameCount <= nSteps) {

    // saveCanvas("color-worms-"+nf(frameCount, 3)+".png")

  }

​

  // noLoop();

}