I am trying to make the piet mondrian in p5js, kinda following this site

`https://generativeartistry.com/tutorials/piet-mondrian/`

I keep on running into same problem over and over again and have tried different ways to solve it last few days. If I diving the step with 4 or bigger it starts to splice extra rectangles from the upper left corner. I am at a loss why that is happening Is there somebody that can help me out here?

This is the code I have so far:

`https://openprocessing.org/sketch/1953246`

let rectangles = ;

function setup() {

createCanvas(1080, 1080);

background(100);

colorMode(HSB);

let x = 115;

let y = 115;

let w = 850;

let h = 850;

let step = 850/4;

let rectStart = new Rectangle(x, y, w, h);

rectangles.push(rectStart);

```
for (var i = 0; i < 850; i += step) {
splitSquaresWith(115 + i)
}
for (let i = rectangles.length - 1; i >= 0; i--) {
rectangles[i].show();
```

}

}

function splitSquaresWith(splitAt) {

```
for (let i = rectangles.length - 1; i >= 0; i--) {
let square = rectangles[i];
if(splitAt && splitAt > square.x && splitAt < (square.x + square.w)){
// remove square
rectangles.splice(i, 1);
// 2 new squares based on the x coordinates given
splitOnX(square, splitAt);
}
if(splitAt && splitAt > square.y && splitAt < (square.y + square.h)){
// remove square
rectangles.splice(i, 1);
// 2 new squares based on the x coordinates given
splitOnY(square, splitAt);
}
}
```

}

function splitOnX(square, splitAt) {

let newX = square.x;

let newY = square.y;

let newW = square.w - (square.w - splitAt + square.x);

let newH = square.h;

let squareA = new Rectangle(newX, newY, newW, newH);

let newX2 = splitAt;

let newY2 = square.y;

let newW2 = square.w - splitAt + square.x;

let newH2 = square.h;

let squareB = new Rectangle(newX2, newY2, newW2, newH2);

rectangles.push(squareA);

rectangles.push(squareB);

}

function splitOnY(square, splitAt) {

let newX = square.x;

let newY = square.y;

let newW = square.w;

let newH = square.h - (square.h - splitAt + square.y)

let squareA = new Rectangle(newX, newY, newW, newH);

let newX2 = square.x;

let newY2 = splitAt;

let newW2 = square.w;

let newH2 = square.h - splitAt + square.y;

let squareB = new Rectangle(newX2, newY2, newW2, newH2);

rectangles.push(squareA);

rectangles.push(squareB);

}

function keyPressed() {

if (key === â€śsâ€ť) {

save(â€śmondrian.pngâ€ť);

}

}