let n_lines_slider;

​

function setup() {

  createCanvas(800, 800);

  bg_input = document.getElementById("bg_color");

  c1_input = document.getElementById("color_1");

  c2_input = document.getElementById("color_2");

  n_lines_slider = document.getElementById("n_lines");

}

​

function draw() {

  const bg_c = bg_input.value;

  const c1 = c1_input.value;

  const c2 = c2_input.value;

  const n_lines = n_lines_slider.value;

​

  /*

  background(bg_c);

  const T = frameCount/200;

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

    push();

    translate(width/2, height/2);

    angle = map(i, 0, n_lines, 0, TWO_PI)

    rotate(angle);

    const [x, y] = loop_coords(angle);

    const H1 = noise(x, y, T) * 100;

    const H2 = noise(x, y, T+0.7) * 100;

    const BMH = 10; // bar min height;

    const GAP = 10;

    strokeWeight(5);

    strokeCap(PROJECT);

    stroke(c1);

    line(100,0, 100+BMH+H1,0);

    stroke(c2);

    line(100+BMH+H1+GAP,0, 100+BMH+H1+GAP+BMH+H2,0);

    pop();

  }*/

​

  const T = frameCount/10;

  background(bg_c);

​

  const scale = 240.0 / height * 4;

​

  strokeWeight(6);

  strokeCap(SQUARE);

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

    push();

    translate(width / 2, height / 2);

    rotate(map(i, 0, n_lines, 0, TWO_PI));

​

    const [x1, y1] = loop_coords((i / n_lines) * TWO_PI);

    const n1 = noise(x1, y1, T / 10);

    const [x2, y2] = loop_coords((i / n_lines + 0.5) * TWO_PI);

    const n2 = noise(x2, y2, T / 10);

​

    const H1 = 20 + n1 * 100;

    const H2 = 20 + n2 * 100;

​

    stroke(c1);

    line(0, 100 * scale, 0, (100 + H1) * scale);

​

    stroke(c2);

    line(0, (110 + H1) * scale, 0, (110 + H1 + H2) * scale);

​

    pop();

  }

}

​

function loop_coords(a) {

  const s = 0.3;

  let x = cos(a) * s;

  let y = sin(a) * s;

​

  x += 20;

  y += 15;

​

  return [x, y];

}

​