const ts = TotalSerialism;

​

// assign sub-libraries to the ts namespace

// otherwise some function names clash with p5

Object.assign(ts, ts.Stochastic, ts.Utility, ts.Transform);

​

let hues;

let positionsX;

let positionsY;

let sizes;

let segments = 1000;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  // drunk arrays for hues, positions, sizes

  // in specified ranges with stepsizes for randomness;

  hues = ts.drunk(segments, 20, 0, 360);

  positionsX = ts.drunk(segments, 30, 0, width);

  positionsY = ts.drunk(segments, 30, 0, height);

  sizes = ts.drunk(segments, 3, 1, 30);

}

​

function draw() {

  background(0, 0.1);

  strokeWeight(2);

  colorMode(HSB);

  // rotate the lists so it looks like the line is moving

  let tmpS = ts.rotate(sizes, frameCount);

  let tmpH = ts.rotate(hues, frameCount);

  // rotate and slice of 50 values from the whole list 

  // slicing generates a 2D array (left and right slice) so only take [0]

  let tmpX = ts.slice(ts.rotate(positionsX, frameCount), 50)[0];

  let tmpY = ts.slice(ts.rotate(positionsY, frameCount), 50)[0];

  // draw the dots with assigned hue, x, y, size

  for (let i=1; i<tmpX.length; i++){

    strokeWeight(tmpS[i]);

    stroke(tmpH[i], 40, 255);

    line(tmpX[i-1], tmpY[i-1], tmpX[i], tmpY[i]);

  }

}