如何用一个更大的瓷砖制作网格

Question

I'm working on this program for a grid that generates geometric shapes and I want the function drawSubdividedCircle to always appear only once at a random position on the grid and take up the with and height of two rows/columns. I think the main problem is stacking because when i run it now the objects overlap. This is basically my goal:

And this is the code:

 let colors = [ "#F7F7F7", "#141414", "#f07f45", "#bcaad6", "#60388e", "#00afc6", "#aae3ea" ]; let tilesX = 5; let tilesY = 5; let tileW; let tileH; let tileSize; function drawSubdividedCircle (x, y, size, segments, layers) { segments = random (1,13); layers = random (1,13); const r = 360 / segments; for (let i = 0; i < segments; i++) { for (let j = 0; j < layers; j++) { fill(random(colors)); const s = map(j, 0, layers, size, 0); arc( x + size / 2, y + size / 2, s, s, radians(r * i), radians(r * (i + 1))); } } } function setup() { createCanvas(500, 500, SVG); tileW = width / tilesX; tileH = height / tilesY; tileSize = (tileW, tileH); } function draw() { noStroke(); frameRate(2); for (let x = 0; x < tilesX; x++) { for (let y = 0; y < tilesY; y++) { let r = random(1); if (r < 0.5) { ellipse((x - 0.5) * tileSize, (y - 0.5) * tileSize, tileSize, tileSize); fill(random(colors)); } else { rect(x * tileSize, y * tileSize, tileSize, tileSize); fill(random(colors)); }{ drawSubdividedCircle(x * tileSize, y * tileSize, tileSize*2); fill(random(colors)); } } } //save("sketch1.6.5.svg"); //print("saved svg"); //noLoop(); }

Answer 1

Added an array to keep track of the state of each individual tile. Could be optimized for sure, but this works just fine. https://editor.p5js.org/Kroepniek/sketches/MsFlcY3kl

let colors = [
  "#F7F7F7",
  "#141414",
  "#f07f45",
  "#bcaad6",
  "#60388e",
  "#00afc6",
  "#aae3ea"
];

let tilesX = 5;
let tilesY = 5;

let tileW;
let tileH;
let tileSize;

let tileIsFree;

let subdividedCirclesCount = 0;
const subdividedCirclesLimit = 1;

function reinitTileStateArray()
{
  tileIsFree = [];
    
  for (let x = 0; x < tilesX; x++)
  {
    for (let y = 0; y < tilesY; y++)
    {
      tileIsFree[y * tilesX + x] = true;
    }
  }
  
  subdividedCirclesCount = 0;
}

function drawSubdividedCircle (x, y, size, segments, layers) {
  
  subdividedCirclesCount++;
  
  segments = random (1,13);
  layers = random (1,13);
  
  const r = 360 / segments;

  
  for (let j = 0; j < layers; j++)
  {
    for (let i = 0; i < segments; i++)
    {
      fill(random(colors));
      const s = map(j, 0, layers, size, 0);
      arc(
        x + size / 2,
        y + size / 2,
        s,
        s,
        radians(r * i),
        radians(r * (i + 1)));
    }
  }
}

function setup() {
  
  createCanvas(500, 500);
  frameRate(2);
  
  tileW    = width / tilesX;
  tileH    = height / tilesY;
  tileSize = (tileW, tileH);
}

function draw() {
  
  background(0);
  noStroke();
  
  reinitTileStateArray();
  
  let randomChance = 0.5;
  
  for (let y = 0; y < tilesY; y++)
  {  
    for (let x = 0; x < tilesX; x++)
    {
      let r = random();

      if (tileIsFree[y * tilesX + x])
      {
        fill(random(colors));
        rect(x * tileSize, y * tileSize, tileSize, tileSize);
        
        if (r < randomChance)
        {
          fill(random(colors));
          ellipse((x + 0.5) * tileSize, (y + 0.5) * tileSize, tileSize, tileSize);
        }
        else if (subdividedCirclesCount < subdividedCirclesLimit && tileIsFree[y * tilesX + x + 1])
        {
          drawSubdividedCircle(x * tileSize, y * tileSize, tileSize * 2);
          
          tileIsFree[y * tilesX + x]           = false;
          tileIsFree[y * tilesX + x + 1]       = false;
          tileIsFree[(y + 1) * tilesX + x]     = false;
          tileIsFree[(y + 1) * tilesX + x + 1] = false;
          
          randomChance = 0.75;
        }
      }
    }
  }
  //save("sketch1.6.5.svg");
  //print("saved svg");
  //noLoop();
}