いろいろな図形を書こう 2025/10/30

🀄練習問題1-6-1a より、日本国旗を描いてみます。
せっかくなので、比は等しく

どうやら日本国旗の比は(x , y),(3 , 2)であるようで、これを参考にすると、

function setup() {
  Sweden = 50;
  createCanvas(16 * Sweden, 10 * Sweden);
  background(0, 106, 167);
  stroke(254, 204, 0);  // 輪郭の色
  fill(254, 204, 0);
  rect(Sweden * 5,0,Sweden * 2 ,Sweden * 10);
  rect(0, Sweden *4,16 * Sweden , Sweden* 2)
}

です。結果は…

🀄練習問題1-6-1b

次はスウェーデンです。

比は日本より複雑ですが、円がないだけやりやすいでしょうか。

function setup() {
  Sweden = 50;
  createCanvas(16 * Sweden, 10 * Sweden);
  background(0, 106, 167);
  stroke(254, 204, 0);  // 輪郭の色
  fill(254, 204, 0);
  rect(Sweden * 5,0,Sweden * 2 ,Sweden * 10);
  rect(0, Sweden *4,16 * Sweden , Sweden* 2)
}

rectに関してです。
2座標を指定して四角形にするのではなく、一つ座標を指定し、
そこからその四角形の x , yの長さを設定する書き方だったのでつまりました。
これに気づいたことで皆さんは正確に比通り書くことができました。

🀄練習問題1-6-1c
次はアイスランドです。

アイスランドの正確な比は

この比を参考にすると、

function setup() {
  Iceland = 30;
  createCanvas(25* Iceland,18 * Iceland);
  background(2, 82, 156);
  stroke(255);
  fill(255);
  rect(7 *Iceland,0,4 *Iceland,18 *Iceland)
  rect(0,7 *Iceland,25 *Iceland,4 *Iceland)
  //↑白線
  stroke(220, 30, 53);
  fill(220, 30, 53);
  rect(8 *Iceland,0,2 *Iceland,18*Iceland)
  rect(0,8 *Iceland,25 *Iceland, 2 *Iceland)
  //↑赤線
}

pointは一度strokeとfillの値を変えること。
一番上にくる色と下にくる色を把握しておくと順番で迷わなくてやりやすいなと皆さんは考えます。
実行すると…

こうなります。

🀄練習問題1-6-1d
次はジョージアです。ジョージア国旗は非常に工程が多いので大変そうだと皆さんは思います。

今までに見たことのない国旗の比率。

これは無謀だと考えました。rectの上に楕円を重ねるやり方も考案しましたが、一本目はできても二本目は円が重なってしまい、かけないのでここは妥協して皆さんは四角形にします。
また、画像には書いていませんが、十字架の長さはW( 約41)の比なので、計算し、十字架の左上の座標の比率は X座標が44.5、Y座標が19.5の長さです。参考にしたいと皆さんは考えました。

また、引っかかった点ですが、rectの座標が左上を指定しているので…例えば全体のX座標から引いたとき、線の太さの分だけそこに足さないと正しい座標が出ないということです。

function setup() {
  georgia = 2.5;
  canvasX = 300;
  canvasY = 200;
  createCanvas(canvasX* georgia,canvasY * georgia);
  background(255);
  stroke(255,0,0);
  fill(255,0,0);
  rect(130 *georgia,0,40 *georgia,200*georgia);
  rect(0,80 *georgia,300 *georgia, 40 *georgia);
  //左上
  rect(58.2 * georgia,19.5 * georgia,13.7 * georgia, 41 *georgia);
  rect(44.5 * georgia,33.2 * georgia,41*georgia,13.7 * georgia);
  //右上
  rect(canvasX*georgia -71.9 * georgia, 19.5*georgia, 13.7 * georgia ,41 * georgia);
  rect(canvasX*georgia -85.5 * georgia, 33.2 * georgia,41 * georgia,13.7 * georgia);
  //左下
  rect(58.2*georgia,canvasY * georgia -60.5 *georgia, 13.7*georgia,41 * georgia);
  rect(44.5*georgia ,canvasY *georgia -46.9 *georgia,41 * georgia ,13.7 * georgia);
  //右下
  rect(canvasX * georgia -71.9 * georgia,canvasY * georgia -60.5 * georgia,13.7 *georgia, 41* georgia);
  rect(canvasX * georgia-85.5 * georgia,canvasY * georgia -46.9 * georgia,41* georgia ,13.7 * georgia);
}

🀄練習問題1-6-1e
最後はニジェール共和国です。知らない国です。国旗は簡単そうだと皆さんは考えます考えました。

縦横比が6:7の珍しい国旗だそうです。

比は検索しても出てこなかったので、横の線の太さはcanvasY座標の三分の一と考えます。
円は、真ん中から線の太さの4/5ということにしてみます。

function setup() {
  niger = 100;
  createCanvas(7* niger,6 * niger);
  background(255);
  stroke(224, 82, 6);
  fill(224, 82, 6);
  rect(0,0,7*niger,6 * niger/3);
  circle(7*niger/2,6 * niger/2,6*niger/3*4/5);
  stroke(13, 176, 43);
  fill(13, 176, 43);
  rect(0,6*niger/3*2,7*niger,6*niger/3);
}

できました。今までのものに比べたら簡単だと皆さんは考えます。

まとめ

座標の考え方と指定の復習になりました。
四角形だと、一つ座標を指定して、そこから右下に向かうようにx,yの長さを指定しますが、右下ではなく方向を自由に指定できたらジョージアの国旗がもっと書きやすいのではないかと皆さんは考えました。

コメントする