Processingのfor文を用いた描画でfillが思うように反映されない

Question

実現したいこと

画面中央に配置した幅20ずつ減少させた正方形を10個描画したときに、青と緑の交互に塗られた正方形が重なるよう描画したい。

発生している問題・分からないこと

一番下（一番初めに描画される正方形）だけ色が塗られていない。

エラーメッセージ

エラーメッセージなし

該当のソースコード

size(400,400);                                       //画面サイズを300*300に設定
int pos=100;                                         //positionの初期値設定
int side=200;                                        //正方形の一辺の長さを設定
strokeWeight(2);                                     //四角形のアウトラインの太さを2に設定

for(int i=0; i<10; i++){                             //10回繰り返しiを1ずつ増やす

 rect(pos+i*10, pos+i*10, side-i*20, side-i*20);     //iが1増える度にpos=-10, side=-20ずつ減る
  if(i%2 == 0){                                      //iが偶数の時に以下のプログラムを実行
    fill(0,255,0);                                   //四角形の色を青に設定
  }                                                 
  else{                                              //上記がfalse(iが奇数)の場合以下を実行
    fill(0,0,255);                                   //四角形の色を緑に設定   
  }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

四行目のstrokeWeight(2)の下に fill(0, 0, 255); を描画することで塗りつぶしはできましたが、for文内のコードのみでの塗りつぶしができません。コードのどこがどう間違っているのか分かる方いらっしゃいましたら、ご教授お願いします。

補足

使用しているバージョンはProcessing 4です。

Answer 1

fillコマンドは、描いた図形の色を替えるのではなく、これから描く図形の色を指定するコマンドですから、描く前に変更しなければなりません。

なので

for文内のコードのみでの塗りつぶしができません。
とのことですが、順番を替えればいいでしょう。

pos=-10, side=-20ずつ減る
//色を指定
  if(i%2 == 0){                                      //iが偶数の時に以下のプログラムを実行
    fill(0,255,0);                                   //四角形の色を青に設定
  }                                                 
  else{                                              //上記がfalse(iが奇数)の場合以下を実行
    fill(0,0,255);                                   //四角形の色を緑に設定   
  }

//図形を描画
rect(pos+i*10, pos+i*10, side-i*20, side-i*20);     //iが1増える度に

Comments

[mikotone]

回答ありがとうございます。
試したところ問題が解決しました！とても初歩的なところだったのですね...
詳しく説明していただいてるのでベストアンサーに選ばせていただきました。

Answer 2

こんにちは。

Processing は一度も触ったことがないのでドキュメントをチラ見しただけですが、
https://processing.org/reference/fill_.html
Example を見ると、size() -> fill() -> rect() の順で、サイズを決め、色を決め、描画という書き方が必要なように見えます。
fill と rect の記述の順序が逆じゃないでしょうか？

Comments

[mikotone]

回答ありがとうございます！ベストアンサーには別の方を選ばせていただきましたが、tamoto様のコメントも大変参考になりました。