p5.jsドリル

02-08 データ構造を考える

Posted on by yuichi

今まではf,x,yという３つの配列にデータを格納していたが、これをまとめて１つの配列にする。

ストの要素に辞書を使うことで１つにまとめることができる。個々の要素はA[i].f,A[i].x,A[i].yのように取得できる。

let f = [0, 0, 1, 0, 1];  // 終点フラグ
let x = [10, 50, 90, 30, 70]  // A
let y = [90, 10, 90, 50, 50]

↓

let A = [
    { f: 0, x: 10, y: 90 },
    { f: 0, x: 50, y: 10 },
    { f: 1, x: 90, y: 90 },
    { f: 0, x: 30, y: 50 },
    { f: 1, x: 70, y: 50 }
  ]

例題2-8-1

引数で渡されたmojiのデータをbaseX,baseY位置を起点に描く。を描く。

コード

function setup() {
  createCanvas(200, 100);  
}

function draw() {
  background(220);
  let A = [
    { f: 0, x: 10, y: 90 },
    { f: 0, x: 50, y: 10 },
    { f: 1, x: 90, y: 90 },
    { f: 0, x: 30, y: 50 },
    { f: 1, x: 70, y: 50 }
  ]
  disp(A, 0, 0);
  disp(A, 100, 0);
}

function disp(moji, baseX, baseY) {
  for (let i = 0; i < moji.length - 1; i++) {
    if (moji[i].f == 0)
      line(moji[i].x + baseX, moji[i].y + baseY, 
           moji[i + 1].x + baseX, moji[i + 1].y + baseY);
  }
}

結果

練習問題2-8-1

以下の文字を描きなさい。

結果