Genuary - Perfect loop - OpenProcessing

mySketch.js
style.css
index.html
p5.min.js
xxxxxxxxxx
 
let pallete = [];
let boxes = []; // array to store the boxes
let palette = []; // array to store the pastel colors
let gridSize;
​
function setup() {
  size = min(windowWidth, windowHeight);
  createCanvas(size, size, WEBGL);
  
  // Calculate the grid size as 50% of the canvas size
  gridSize = size * 0.5;
  
  // Define array of color palettes
  pallete = [
    ["#323232", "#323232", "#969696", "#B4B4B4", "#C8C8C8", "#C14D32"],
    ["#000000", "#000000", "#DFF5FF", "#DFE2FF", "#0029D3", "#0029D3"],
    ["#323232", "#323232", "#8C7DB6", "#12B77B", "#4674B7", "#8C7DB6"],
    ["#323232", "#323232", "#F8F8F8", "#B69D73", "#F8F8F8", "#B69D73"],
    ["#171717", "#171717", "#FFFFFF", "#EDEDED", "#444444", "#C82A3D"],
    ["#19150C", "#19150C", "#5E94C3", "#EEEBE4", "#EEEBE4", "#F46559"],
    ["#0C0821", "#0C0821", "#095B4F", "#F4A0B0", "#E7E8E0", "#F63B32"],
    ["#FFF1DD", "#336D61", "#013B2F", "#013B2F", "#00271B", "#F89792"],
    ["#19150C", "#0035C2", "#ffffff", "#0071FE", "#0071FE", "#FF4A13"],
    ["#000000", "#77552F", "#182280", "#E0D6CC", "#E0D6CC", "#77552F"],
    ["#2E2E2E", "#2E2E2E", "#767DBE", "#C6A841", "#9EBBAD", "#EB7A52"],
    ["#1D1C1C", "#1D1C1C", "#B98CF1", "#828163", "#E2E0E1", "#B98CF1"],
    ["#0F1E19", "#0F1E19", "#E0D6AA", "#E4AC44", "#356F53", "#D26241"],
    ["#070002", "#070002", "#E8E3CC", "#B0BEB9", "#5F6D5D", "#CA4E33"],
    ["#141F22", "#141F22", "#D6D2C1", "#E6E6E6", "#A2B8BB", "#DEF44F"],
    ["#090909", "#313C3C", "#F2ECE6", "#C1B197", "#8EA182", "#A5B1C5"],
  ];
​
  // random pallet selection
  chosenPall = int(random(0, 16));
​
  background(pallete[chosenPall][0]);
  console.log("selected pallete: " + chosenPall);
​
  // create a palette of pastel colors
  for (let i = 0; i < 10; i++) {
    chosenCol = int(random(1, 6));
    palette.push(color(pallete[chosenPall][chosenCol]));
  }
​
  createBoxes();
}
​
function createBoxes() {
  boxes = []; // Clear existing boxes
  let boxSize = gridSize / 11; // Divide by 11 to account for the range of -5 to 5 (11 total)
  for (let x = -5; x <= 5; x++) {
    for (let y = -5; y <= 5; y++) {
      for (let z = -5; z <= 5; z++) {
        let b = new Box(x, y, z, random(boxSize * 0.4, boxSize), random(palette));
        boxes.push(b);
      }
    }
  }
}
​
function draw() {
  background(pallete[chosenPall][0]);
  
  // Center the grid
  translate(0, 0, 0);
  
  // rotate the view
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  
  // draw all the boxes
  for (let i = 0; i < boxes.length; i++) {
    boxes[i].show();
  }
}
​
// Box class
class Box {
  constructor(x, y, z, size, color) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.size = size;
    this.color = color;
  }
  
  show() {
    push();
    let spacing = gridSize / 10; // 10 spaces between 11 positions (-5 to 5)
    translate(this.x * spacing, this.y * spacing, this.z * spacing);
    noStroke();
    fill(this.color);
    box(this.size);
    pop();
  }
}
​
function windowResized() {
  size = min(windowWidth, windowHeight);
  resizeCanvas(size, size);
  gridSize = size * 0.5; // Update to 50% of canvas size
  createBoxes(); // Recreate boxes with new size
}