Grid 2 - OpenProcessing

mySketch.js
style.css
index.html
xxxxxxxxxx
 
// Lomz 2022
// https://www.lomz.net
​
console.log('Lomz:2022.');
console.log('https://www.lomz.net');
//console.log('fxrand test: ' + fxrand());
​
let gridNumX;
let gridNumY;
​
let xPos;
let yPos;
​
let rS; // velicina polja
let round;
let sBW; // razmak izmedju polja
​
let colors = [];
let synthColor;
​
let wh;
​
let ch = 0.4;
​
function setup() {
  wh = windowHeight;
  createCanvas(wh, wh);
  rS = wh / 6;
  round = wh/200;
  sBW = wh/400;
​
  background(255);
  
  colors = ['#7f7340', '#c6b28d', '#bb8642', '#914532', '#511f20'];
  
  synthColor = int(get_random(0, colors.length));
  console.log(synthColor);
  console.log(colors[synthColor]);
  
  gridNumX = int(get_random(2, 6));
  gridNumY = int(get_random(2, 6));
  
  translate(
    (wh / 2) - (rS * gridNumX)/2,
    (wh / 2) - (rS * gridNumY)/2 // 4 ili 6
  );
  
  // GRID Layer 1
  push();
  for (let x = 0; x < gridNumX; x += 1) {
    for (let y = 0; y < gridNumY; y += 1) {
      xPos = x * rS;
      yPos = y * rS;
      
      
        noStroke();
        fill(colors[synthColor]);
        
        if (fxrand() < 0.3) {
          if (fxrand() < ch) {
            rect(xPos+sBW, yPos+sBW, (rS/2)-sBW, (rS/2)-sBW, round);
          }
          if (fxrand() < ch) {
          rect((xPos+(rS/2)+sBW), yPos+sBW, (rS/2)-sBW, (rS/2)-sBW, round);
          }
          if (fxrand() < ch) {
          rect((xPos+(rS/2)+sBW), (yPos+(rS/2))+sBW, (rS/2)-sBW, (rS/2)-sBW, round);
          }
          if (fxrand() < ch) {
          rect((xPos+sBW), (yPos+(rS/2))+sBW, (rS/2)-sBW, (rS/2)-sBW, round); 
          }
        }
        else if (fxrand() > 0.3 && fxrand() < 0.5) {
          push();
          if (fxrand() < ch) {
          rect(xPos+sBW, yPos+sBW, (rS/2)-sBW, rS-sBW, round);
          }
          if (fxrand() < ch) {
          rect((xPos+(rS/2))+sBW, yPos+sBW, (rS/2)-sBW, rS-sBW, round);
          }
          pop();
        }
      
        else if (fxrand() > 0.5 && fxrand() < 0.7) {
          push();
          if (fxrand() < ch) {
          rect(xPos+sBW, yPos+sBW, rS-sBW, (rS/2)-sBW, round);
          }
          if (fxrand() < ch) {
          rect(xPos+sBW,(yPos+(rS/2))+sBW, rS-sBW, (rS/2)-sBW, round);
          }
          pop();
        }
      
        else {
          if (fxrand() < 0.8) {
            if (fxrand() < ch) {
              rect(xPos+sBW, yPos+sBW, rS-sBW, rS-sBW, round);
            }
          }
        }
      
    }
  }
  pop();
  
  // Grid Layer 2
  
  synthColor = int(get_random(0, colors.length));
​
  push();
  for (let x = 0; x < gridNumX; x += 1) {
    for (let y = 0; y < gridNumY; y += 1) {
      
      xPos = x * rS;
      yPos = y * rS;
      
        noFill();
        stroke(0);
        
        if (fxrand() < 0.3) {
          if (fxrand() < ch) {
            rect(xPos+sBW, yPos+sBW, (rS/2)-sBW, (rS/2)-sBW, round);
          }
          if (fxrand() < ch) {
          rect((xPos+(rS/2)+sBW), yPos+sBW, (rS/2)-sBW, (rS/2)-sBW, round);
          }
          if (fxrand() < ch) {
          rect((xPos+(rS/2)+sBW), (yPos+(rS/2))+sBW, (rS/2)-sBW, (rS/2)-sBW, round);
          }
          if (fxrand() < ch) {
          rect((xPos+sBW), (yPos+(rS/2))+sBW, (rS/2)-sBW, (rS/2)-sBW, round); 
          }
        }
        else if (fxrand() > 0.3 && fxrand() < 0.5) {
          push();
          if (fxrand() < ch) {
          rect(xPos+sBW, yPos+sBW, (rS/2)-sBW, rS-sBW, round);
          }
          if (fxrand() < ch) {
          rect((xPos+(rS/2))+sBW, yPos+sBW, (rS/2)-sBW, rS-sBW, round);
          }
          pop();
        }
      
        else if (fxrand() > 0.5 && fxrand() < 0.7) {
          push();
          if (fxrand() < ch) {
          rect(xPos+sBW, yPos+sBW, rS-sBW, (rS/2)-sBW, round);
          }
          if (fxrand() < ch) {
          rect(xPos+sBW,(yPos+(rS/2))+sBW, rS-sBW, (rS/2)-sBW, round);
          }
          pop();
        }
      
        else {
          if (fxrand() < 0.8) {
            if (fxrand() < ch) {
              rect(xPos+sBW, yPos+sBW, rS-sBW, rS-sBW, round);
            }
          }
        }
      
    }
  }
  pop();
  
  
}
​
function draw() {}
​
// **************************
// *       Save png         *
// **************************
​
function keyTyped() {
  if (key == 's' || key == 'S') save("Grid"+int(random(0,10000))+".png");
}
​
// **************************
// *        Random          *
// **************************
​
function get_random(min, max) {
  return min + fxrand() * (max - min);
}
​