# Why does my code splice to many rectangles from the array?

**URL:** <https://discourse.processing.org/t/why-does-my-code-splice-to-many-rectangles-from-the-array/42202>\
**Category:** Coding Questions\
**Created:** [June 12, 2023, 8:00pm UTC](https://discourse.processing.org/t/why-does-my-code-splice-to-many-rectangles-from-the-array/42202 "2023-06-12T20:00:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Delain](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Delain](https://discourse.processing.org/u/Delain)\
**Post date:** [June 12, 2023, 8:00pm UTC](https://discourse.processing.org/t/why-does-my-code-splice-to-many-rectangles-from-the-array/42202/1 "2023-06-12T20:00:01Z")

</div>

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?

 ![mondriangrid](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/3/83253c9bb6e0d833ac3b8a77d6e90351112c4f5c.png)

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 12, 2023, 9:04pm UTC](https://discourse.processing.org/t/why-does-my-code-splice-to-many-rectangles-from-the-array/42202/2 "2023-06-12T21:04:25Z")

</div>

> [@Delain](#):
>
> I am trying to make the Piet Mondrian in p5js, kinda following this site  
> `https://GenerativeArtistry.com/tutorials/piet-mondrian/`

I’ve compared your **splitSquaresWith()** function w/ the 1 from the tutorial site; and they don’t seem to match very well.

This is my own attempt which tries to combine both yours & tutorial’s implementations:

```auto
function splitSquaresWith({ x: cx, y: cy }, { length: i } = rectangles) {
  while (i--) {
    const { x, y, w, h } = rectangles[i];

    if (cx && cx > x && cx < x + w) {
      rectangles.splice(i, 1);
      splitOnX(rectangles, cx);
    }

    if (cy && cy > y && cy < y + h) {
      rectangles.splice(i, 1);
      splitOnY(square, cy); 
    } 	 
  }
}

```

In order to invoke **splitSquaresWith()** you need to pass an object containing numeric properties { x } or { y } or both { x, y }.

---

<div class="post-metadata">

**Author:** ![Delain](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Delain](https://discourse.processing.org/u/Delain)\
**Post date:** [June 13, 2023, 6:27am UTC](https://discourse.processing.org/t/why-does-my-code-splice-to-many-rectangles-from-the-array/42202/3 "2023-06-13T06:27:48Z")

</div>

Thank you for putting me on the right track @GoToLoop.

I also had to change  
for (var i = 0; i \< 850; i += step) {  
splitSquaresWith(115 + i)  
}

to

| | for (var i = 0; i \< 850; i += step) { |
| --- | --- |
| | splitSquaresWith({x : 115 + i}) |
| | splitSquaresWith({y : 115 + i}) |
| | } |

The bug was caused by my trying to do x and y step in on go and not splitting the up.