p5.jsドリル

03-03 n 多角形を描く問題に一般化する

Posted on by yuichi

3角形、4角形、5角形など個々の多角形を書く問題を一般化して「n角形」を書くという問題 に置き換える。

プログラム的には変数nを使ってn角形を書くということになる。
繰り返す回数は「3」⇒「n」、回転する角度は「360/3」⇒「360/n」となる。つまり「n」が「3」なら3角形、「n」が「4」なら 4 角形、「n」が「5」なら 5 角形が書ける。

例題 3-3-1

３角形～9角形までを描く。

コード

function setup() {
  createCanvas(400, 400);
  background(220);
  for (let n = 3; n <= 9; n++) {
    setpoint(150, 300);
    setangle(0);
    for (let i = 1; i <= n; i++) {
      move(80);
      turn(360.0 / n);
    }
  }  
}

結果

練習問題3-3-1

３角形～２０角形までを描く。
図形ごとに色が変化するように描く。

コード（ヒント）

// HSLモードに設定
colorMode(HSL); 

// 色相、彩度100%、明度50%
stroke((n * 30) % 360, 100, 50);

結果

■星型多角形

一筆書きで描ける星型多角形は5角形、７角形、９角形・・・の奇(き)数多角形である。星型ｎ角形の回転する角度は次の式で求めることができる。

180 – 180 / n

例題3-3-2

星型５角形を描く。

function setup() {
  createCanvas(400, 400);
  background(220);
  setpoint(100, 200);
  setangle(0);
  const N = 5;
  for (let i = 1; i <= N; i++) {
    move(200);
    turn(180 - 180 / N);
  }  
}

結果

練習問題3-3-2

以下のような星型多角形を描きなさい。

練習問題3-3-2

以下のような星型多角形を描きなさい。