let rows = 14;

let cols = 8;

let gridSize = 10;

let w, h;

let nusize;

​

function setup() {

  createCanvas(800, 520);

  w = (width - 200) / rows;

  h = (height - 200) / cols;

  print(w, h);

  if (w < h) {

    nusize = w;

  } else {

    nusize = h;

  }

​

  //noLoop();

}

​

function draw() {

  noFill();

  //background(240, 230, 200);

   background('#FFF9E6');

  //applyGrain(1.2, 1.0, 70);

​

  // iterate over the 3x4 grid

  for (let i = 0; i < 10; i++) {

    // calculate the starting position for the grids to be centered

    let startX = (width - (rows * nusize)) / 2;

    let startY = (height - (cols * nusize)) / 2;

​

    // iterate in the y direction

    for (let y = 0; y < cols; y++) {

      // iterate in the x direction

      for (let x = 0; x < rows; x++) {

        let xPos = startX + x * nusize;

        let yPos = startY + y * nusize;

​

        // draw the square

        drawIrregularQuad(startX + x * nusize, startY + y * nusize, w, h, gridSize);

      }

    }

​

    // reduce gridSize by 1 after each iteration

   // gridSize--;

   // print("gridSize =", gridSize);

  }

​

  //noLoop();

}

​

function drawIrregularQuad(x, y, width, height, gridSize) {

  noFill();

  stroke(0, 90);

  strokeWeight(random(1, 1.8));

  let x0 = x + random(-gridSize, gridSize);

  let y0 = y + random(-gridSize, gridSize);

​

  let x1 = x + width + random(-gridSize, gridSize);

  let y1 = y + random(-gridSize, gridSize);

​

  let x2 = x + width + random(-gridSize, gridSize);

  let y2 = y + height + random(-gridSize, gridSize);

​

  let x3 = x + random(-gridSize, gridSize);

  let y3 = y + height + random(-gridSize, gridSize);

​

  quad(x0, y0, x1, y1, x2, y2, x3, y3);

  let circleSize = random(2);

  fill(0);

  ellipse(x0, y0, circleSize, circleSize);

}

​

function applyGrain(scaleX, scaleY, intensity) {

  loadPixels();

  for (let x = 0; x < width; x++) {

    for (let y = 0; y < height; y++) {

      let index = (x + y * width) * 4;

      let noiseValue = noise(x * scaleX, y * scaleY) * intensity;

      pixels[index] += noiseValue;

      pixels[index + 1] += noiseValue;

      pixels[index + 2] += noiseValue;

    }

  }

  updatePixels();

}

​

function mouseClicked() {

  saveCanvas('artwork_' + frameCount, 'png');

  frameCount++;

}

​

function mouseWheel(event) {

  if (event.deltaY > 0) {

    // Scrolling down

    cols = constrain(cols - 1, 1, 8);

    rows = constrain(rows - 1, 1, 14);

  } else {

    // Scrolling up

    cols = constrain(cols + 1, 1, 8);

    rows = constrain(rows + 1, 1, 14);

  }

  return false; // Prevent default

}

​

​

​