Square and Circle Packing - OpenProcessing

Square Packing
xxxxxxxxxx
 
// TO DO:
// Make initial square packing algorithm
// Add probabilities?
// Add circles to middle of squares, and have them be different colours
​
// Dimensions
let dimx = 1000;
let dimy = 1000;
let w = 50;
let rows = dimy/w;
let columns = dimx/w;
let board;
let shadowCol;
let noShadowCol;
​
// Parameters
​
// Global Variables
let grid = [];
// let coolorsurl = "https://coolors.co/f9dbbd-fca17d-eb827d-da627d-9a348e-0d0628"
// let coolorsurl = "https://coolors.co/cacaaa-eec584-c8ab83-55868c-7f636e"
let coolorsurl = "https://coolors.co/c1cfda-20a4f3-59f8e8-941c2f-03191e"
// let colors = [];
let colors = ["#2E294E", "#541388", "#F1E9DA", "#FFD400", "#D90368"]; // genuary
​
function setup() {
  createCanvas(1000, 1000);
  // background(100);
  noStroke();
  noLoop();
​
  shadowCol = color("#000")
  shadowCol.setAlpha(128);
  noShadowCol = color("#000")
  noShadowCol.setAlpha(0);
  drawingContext.shadowOffsetX = 10;
  drawingContext.shadowOffsetY = 10;
  drawingContext.shadowBlur = 20;
  // drawingContext.shadowColor = shadowCol;
​
  let gui = new dat.GUI();
  //gui.add(this, "maxDivs", 5, 17, 1);
  gui.add(this, "generate");
​
  // coolors();
  makeBoard();
  emptyBoard();
​
  generate();
}
​
function coolors() {
  let colorStr = coolorsurl.slice(19).split('-');
  for (let i = 0; i < colorStr.length; i++) {
    colors[i] = "#".concat(colorStr[i].toUpperCase());
  }
  console.log(colors);
}
​
function saveSVG() {
  let output_string = "square_packing.svg";
  save(output_string);
}
​
function makeBoard() {
  board = new Array(columns);
  for (let i = 0; i < columns; i++) {
    board[i] = new Array(rows);
  }
}
​
function emptyBoard() {
  for (let i = 0; i < columns; i++) {
    for (let j = 0; j < rows; j++) {
      board[i][j] = new Spot(i,j)
    }
  }
}
​
// converts 2D array to 1D if needed
function get1DArray(arr2d) {
  return [].concat(...arr2d);
}
​
class Spot {
  constructor(i, j) {
    this.i = i;
    this.j = j;
    this.occupied = false;
  }
}
​
function checkNxN(i,j,n) {
  if (i+n > columns || j+n > rows) {
    return false;
  } else {
    for (let a = i; a < i+n; a++) {
      for (let b = j; b < j+n; b++) {
        if (board[a][b].occupied == true) {
          return false;
        }
      }
    }
    return true;
  }
}
​
function makeRect(i,j,n) {
  let colIndex1 = floor(random(colors.length));
  let colIndex2 = (colIndex1 + 1) % colors.length;
  drawingContext.shadowColor = noShadowCol;
  // rect starts at top left corner
  fill(colors[colIndex1]);
  stroke(colors[colIndex1]);
  // stroke(0);
  rect(i*w,j*w,w*n,w*n);
  noStroke();
  fill(colors[colIndex2]);
  // strokeWeight(n);
  drawingContext.shadowColor = shadowCol;
  circle(i*w+w*n/2,j*w+w*n/2, w*n*0.8);
  fill(colors[(colIndex1 + 2) % colors.length]);
  circle(i*w+w*n/2,j*w+w*n/2, w*n*0.6);
  fill(colors[(colIndex1 + 3) % colors.length]);
  circle(i*w+w*n/2,j*w+w*n/2, w*n*0.4);
  fill(colors[(colIndex1 + 4) % colors.length]);
  circle(i*w+w*n/2,j*w+w*n/2, w*n*0.2);
  for (let a = i; a < i+n; a++) {
    for (let b = j; b < j+n; b++) {
      board[a][b].occupied = true;
    }
  }
}
​
function generate() {
  clear();
  emptyBoard();
  // colors = colors.sort(() => Math.random() - 0.5);
  let free = get1DArray(board).filter(spot => spot.occupied == false);
  while (free.length > 1) {
    // get random free spot
    free = get1DArray(board).filter(spot => spot.occupied == false);
    let randomSpot = free[floor(random(free.length))];
​
    // check area
    if (checkNxN(randomSpot.i, randomSpot.j, 4)) {
      makeRect(randomSpot.i, randomSpot.j, 4);
    } else if (checkNxN(randomSpot.i, randomSpot.j, 3)) {
      makeRect(randomSpot.i, randomSpot.j, 3);
    } else if (checkNxN(randomSpot.i, randomSpot.j, 2)) {
      makeRect(randomSpot.i, randomSpot.j, 2);
    } else {
      makeRect(randomSpot.i, randomSpot.j, 1);
    }
  }
}
​
​