p5.js ２つの同心正方形を重ねて描画したい

Question

前提・実現したいこと

p5.jsで、同心正方形を二つ重ねて描きたいと考えています。

発生している問題

現在以下のように描画されています。
傾けた正方形を正しく描くことができませんでした。

どのようにしたらよろしいでしょうか。

該当のソースコード

function setup() {
	createCanvas(windowWidth, windowHeight);
	frameRate(60);
}

function draw() {
	background(255);
	shikaku(createVector(width/2 , height/2 ), 40, 300, 300, color(190, 80, 80));
}



//関数shikakuを定義。
//引数(中心位置,四角形の数,幅,高さ,カラー)

function shikaku(rectLocation, numRects, width, height, rectColor) {
	stroke(rectColor);
	noFill();

	for(let i = 0; i < numRects; i++){
		rectMode(CENTER); 
		
		let currentWidth = map(i, 0, numRects-1, 10, width);
		let currentHeight = map(i, 0, numRects-1, 10, height);
      
        //通常の同心正方形
		rect(rectLocation.x, rectLocation.y, currentWidth, currentHeight);
		
		//傾けた同心正方形
		push();
		rotate(PI / 6); 
		translate(width/2, height/2); //背景の中心で座標を回転
        rect(rectLocation.x, rectLocation.y, currentWidth, currentHeight);
		pop();
	}
}

Answer 1

こんな感じでしょうか？（適当にいじっていたら出来ました。。）

https://jsfiddle.net/cx20/nsmpakL5/

function shikaku(rectLocation, numRects, width, height, rectColor) {
    stroke(rectColor);
    noFill();

    for(let i = 0; i < numRects; i++){
        rectMode(CENTER); 

        let currentWidth = map(i, 0, numRects-1, 10, width);
        let currentHeight = map(i, 0, numRects-1, 10, height);

        //通常の同心正方形
        rect(rectLocation.x, rectLocation.y, currentWidth, currentHeight);

        //傾けた同心正方形
        push();
        translate(rectLocation.x, rectLocation.y); //背景の中心で座標を回転
        rotate(PI / 6); 
        rect(0, 0, currentWidth, currentHeight);
        pop();
    }
}

■ 実行結果

＜参考＞
■ p5.jsで図形を移動・回転させる | Processing Fan
https://processing-fan.firebaseapp.com/tutorial/p5/transform.html

Comments

[mia_flower]

迅速な回答、いつもありがとうございます。

```
rect(rectLocation.x, rectLocation.y, currentWidth, currentHeight);

```
の部分が誤っていたのですね。勉強になりました。

[cx20]

変更した箇所は下記の部分ですね。
------------------------------------------
translate(rectLocation.x, rectLocation.y);
rotate(PI / 6);
rect(0, 0, currentWidth, currentHeight);
------------------------------------------

順番も少し変えています。
変更前）「回転」→「移動」
変更後）「移動」→「回転」

順番については、
https://processing-fan.firebaseapp.com/tutorial/p5/transform.html
を参考にしました。

[mia_flower]

詳しく教えて頂きましてありがとうございます。
理解いたしました。