Generating Albers' Squares in P5js

I made this P5js sketch building on the techniques used in yesterday’s Generating Simple Mid-Century Line Design in P5js post. This one generates designs in the style of Josef Albers’ Homage to the Square series. Code below.

let canvas_size = 600;
let canvas_rotation = 0;
function preload()
{
  // load image
  img = loadImage("canvas.jpg");
}

function setup() {
  createCanvas(canvas_size, canvas_size);
  background(50);
  colorMode(RGB); 
  frameRate(25);
}

function draw() {
  clear();
  frameRate(0.25);
  noStroke();
  squares = random(1,5);
  set_colors();
  create_squares();
  translate(width / 2, height / 2);
  canvas_rotation += 90;
  rotate(PI / 180 * canvas_rotation);
  imageMode(CENTER);
  blendMode(SOFT_LIGHT); 
  image(img, 0, 0); 
}

function set_colors() {
  let color_a = color(random(50,200), random(50,200), random(50,200));
  let color_b = color(random(75,250), random(75,250), random(75,250));
  lerps = [];
  let steps = 1/(squares);
  for(let n = squares - 2; n > 0; n -= 1){
    let lerp = lerpColor(color_a, color_b, steps * n);
    lerps.push(lerp);
  };
  colors = lerps.reverse();
  colors.unshift(color_a);
  colors.push(color_b);
}

function create_squares() {
  size = canvas_size;
  x_pos = 0;
  y_pos = 0;
  for(let n = squares; n > 0; n -= 1){
    fill(colors[Math.floor(n)]);
    square(x_pos, y_pos, size);
    size = size / 1.5;
    x_pos += size / 4;
    y_pos += size / 2.35;
  }
}