How to make a grid with one bigger tile

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();
}

Solution

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();
}