p5.jsドリル

03-05 幾何学模様

Posted on by yuichi

1/√2の長方形を敷き詰める。

例題 3-5-1

長辺と短辺の比率が2：1の長方形を1つ描き，その長方形の長辺の半分を短辺，元の短辺を長辺とする長方形を90c横にして描き，これを繰り返す．すると，長方形の対角線は角度を90cずつ回転し，長さを1/ 2 にしながらある方向に収束していく．結局大きな長方形の中に1/ 2 長方形が無限に敷き詰められていくことになる．

コード

function setup() {
  createCanvas(640, 480);
  background(220);
  const RADIAN = Math.PI / 180;  
  let leng = 400.0;  // 対角線の初期値
  setpoint(50, 100); setangle(-54.7);
  for (let i = 1; i <= 10; i++) {
    move(leng);  // 対角線を引く
    let x = leng * Math.cos(54.7 * RADIAN); 
    let y = leng * Math.sin(54.7 * RADIAN); 
    turn(180 - 35.3); move(y);
    turn(90); move(x);
    turn(90); move(y);
    turn(90); move(x);
    turn(35.3);
    leng = leng / Math.sqrt(2.0);
  }
}

結果

練習問題3-5-1

長方形を別の角度で敷き詰める

問題: 1/√2の長方形を敷き詰める際、回転する角度を異なるものに変更して、異なる模様を描いてみましょう。例えば、最初の角度を-45度、長方形の内部角度を45度と設定します。プログラムを修正して、どのような模様が描けるか確認してください。

ヒント:

  • setangleの初期角度や、turn関数で回転する角度を調整してみましょう。

練習問題3-5-2

練習問題2: 斜線と長方形の比率を変えて模様を作る

問題: 長方形の対角線の長さや比率を変えて、1/2や1/3など異なる比率で敷き詰めてみましょう。異なる比率にすることで、どのように模様が変わるか観察してみてください。

ヒント:

  • leng変数を変更してみると、異なる比率での敷き詰めが可能です。

練習問題3-5-3

カラーリングを追加

問題: 各長方形に異なる色をつけて、色彩豊かな模様を作成してみましょう。奇数番目の長方形と偶数番目の長方形で異なる色を設定してください。

ヒント:

  • stroke()やfill()関数を使って、描画の色を変更できます。