03-04 渦巻模様

1 例題 3-4-1
- 1.1 コード
- 1.2 結果
2 練習問題3-4-1
3 練習問題3-4-2
- 3.1 結果

正多角形を描くプログラムを応用して、渦巻模様を描く。

例題 3-4-1

正多角形を描くところで説明したように、４角形を書くには90°回転した。この回転角度を少しずらした89°にし、さらに直線を引くたびに長さを「-1」していくと次のような渦巻き模様が得られる。

コード

function setup() {
  createCanvas(400, 400);
  background(220);
         
  const angle = 89,  // 回転角
        step = 1;    // 辺の減少値
  let leng = 200;    // 辺の初期値
  stroke(41,157,143);
  setpoint(100, 300);
  setangle(0);
  while (leng > 10) {
    move(leng);
    turn(angle);
    leng -= step;
  }  
}

結果

練習問題3-4-1

angleとstepを変えて以下の渦巻き模様を作りなさい。

練習問題3-4-2

辺を書くたびに色を変えてみよう。

コード（ヒント）

// p5.js の HSL カラーモードでは、Hue（色相）は 0〜360 で色が一周します。

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

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