03-04 渦巻模様

学習日

2025年5月20日

名前

樋口桜大

自分で作った図形(コードと画像)

✅ 練習問題 1-4-1

 angleとstepを変えて以下の渦巻き模様を作りましょう。

まずは、左上の五角形の渦巻模様

コード

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

📷 実行結果

左下の三角形の渦巻模様

コード

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

📷 実行結果

真ん中上の四角形の渦巻模様

コード

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

📷 実行結果

真ん中下の三角形の渦巻模様

コード

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

📷 実行結果

右上の太陽みたいな渦巻模様

コード

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

📷 実行結果

右下の星の渦巻模様

コード

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

📷 実行結果

✅ 練習問題 1-4-2

辺を書くたびに色を変えるようにしましょう。(図形は四角形の渦巻模様)

コード

function setup() {
  createCanvas(400, 400);
  background(255);
  n = 0;     
  const angle = 89,  // 回転角
        step = 1;    // 辺の減少値
  let leng = 200;    // 辺の初期値
  setpoint(100, 300);
  setangle(0);
  
  while (leng > 10) {
    colorMode(HSL); 
    stroke((n * 89) % 360, 100, 50);
    n += 1;
    
    move(leng);
    turn(angle);
    leng -= step;
  }
}

📷 実行結果

まとめ・感想

・想像の模様を書きたいときに、angleの角度の求め方とstepの辺の減少値の微妙な誤差を数字で考えて表すのが難しかった。

・どのくらいの回数を繰り返すのかを模様を見て判断するのが大変だった。

・色を付けるときに「辺を書くごとに色を変える」だったので、文字の「n」を使って色彩の値を作るのがすごく難しかった。

・図形を書くときには、背景を灰色ではなく、白色のほうが見やすいから次からは白にしていきたい。

コメントする