const ts = TotalSerialism;

​

// assign sub-libraries to the ts namespace

// using globalThis as namespace can result in name clashes

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

​

let hues;

let sizes;

let rows = 12;

let cols = 12;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // spread values evenly in a specified range for hues, sizes, x, y

  hues = ts.spread(rows*cols, 200, 300);

  sizes = ts.mirror(ts.spread(cols/2, 10, 30));

  posX = ts.spreadInclusive(cols, 0, width);

  posY = ts.spreadInclusive(rows, 0, height);

}

​

function draw() {

  background(0);

​

  rectMode(CENTER);

  stroke(255); 

  strokeWeight(2);

  colorMode(HSB);

  // draw all the squares

  for (let i=0; i<rows*cols; i++){

    // get the square x/y position

    let x = posX[i%cols];

    let y = posY[int(i/cols)];

    // get the color

    fill(hues[i], 50, 255);

    // fold the size between 0 and width/cols

    square(x, y, ts.fold(sizes[i%cols], 0, width/cols));

  }

  // add a value to all numbers in the array to grow/shrink the size

  sizes = ts.add(sizes, 1);

}