var dts = [];

var R = 100;

var sel;

const chunky = 4;

​

function refill() {

  vs = []; dts=[];

  for (var i = 0; i < sel.value(); i++) {

    vs.push(createVector(R, R));

    vs[i].rotate(random(10));

    dts.push(random(1 / 100));

  }

​

}

​

function setup() {

  createCanvas(400, 400);

  colorMode(HSB);

  sel = createInput(10, 'number');

  sel.input(refill)

  refill();

}

​

function adeg(v) {

  // yo, thanks https://stackoverflow.com/a/1129270/6934388

​

  if (v.x || v.y) {

    radians = Math.atan2(v.y, v.x);

  } else {

    radians = 0;

  }

​

  if (radians < 0) {

    radians += 2 * Math.PI;

  }

​

  var degrees = (radians * 180) / Math.PI;

  return degrees;

}

​

function draw() {

  N = sel.value();

  background(220);

  translate(width / 2, height / 2);

​

  // this is awful isnt it

  vs.sort((a, b) => adeg(b) - adeg(a));

​

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

    v = vs[i];

    v.rotate(dts[i]);

​

    //circle(v.x, v.y, 6);

    fill(0);

    // text(`${i} ${int(v.x)} ${int(v.y)} ${int(v.heading()) } ${atan2(v.y,v.x)}`, v.x, v.y);

    fill(map(i, 0, N, 0, 255), 255, 255, map(i, 0, N, 50, 150));

    arc(0,0,(R*2) + (i * chunky),(R*2) + (i * chunky),vs[(i + 1) % vs.length].heading(),v.heading(),PIE);

  }

​

  noFill();

}

​