p5.js 正方形を交互に配置したい

Question

前提・実現したいこと

p5.jsで、赤い正方形と水色の正方形を交互に５個ずつ斜めに配置したいです。

発生している問題・エラーメッセージ

現在、以下の画像のように左隅が水色の正方形になってしまっているのですが、
赤い正方形にするにはどのようにしたら良いでしょうか。

どうぞよろしくお願い致します。

該当のソースコード

function setup() {
	createCanvas(600, 600);
    colorMode(HSB, 360, 100, 100);
}

function draw() {
    background(0);
    noStroke();
	
  
  // 赤色の正方形
    let x1 = 0;
    let y1 = 0;

  // 水色の正方形
    let x2 = -50;
    let y2 = -50;


    for(let i = 0; i < 5; i++){
      rect(x1, y1, 50, 50);
      fill(355, 95, 85);
  
      x1 = x1 + 100; //四角形２個分(50×2=100)ずつ位置をずらす
      y1 = y1 + 100;
  }
  
  // 水色の正方形
    for(let k=0; k < 5; k++){
      rect(x2, y2, 50, 50);
      fill(193, 30, 87);
       
      x2 = x2 + 100;
      y2 = y2 + 100;
  }
}

Answer 1

fillとrectの順番を逆にしてみては？

Comments

[mia_flower]

ありがとうございます！順番を逆にしたところ、問題が解消されました。
rectの前にfillを書くのが通常なのでしょうか？