p5.jsドリル

02-05 繰り返し１（模様）

Posted on by yuichi

２つの図形を交互に繰り返し模様を描く。どちらの図形を描くかは剰余を使って決める。

例題2-5-1

■と●の繰り返し模様を描く。

コード

function setup() {
  createCanvas(260, 60);
}

function draw() {
  background(220);
  stroke(0, 0, 255);  // 輪郭の色
  fill(0, 0, 255);    // 塗りつぶす色
  for (let i = 0; i < 6; i++) {
    if (i % 2 == 0)
      rect(10 + i * 40, 10, 40, 40);
    else
      circle(30 + i * 40, 30, 40);
  }
}

結果

例題2-5-2

□と■のデザインを描く。

コード

function setup() {
  createCanvas(260, 180);
}

function draw() {
  background(220);
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 4; j++) {
      if ((i + j) % 2 == 0)
        fill(0);
      else
        noFill();
      rect(10 + i * 40, 10 + j * 40, 40, 40);
    }
  }
}

結果

練習問題2-5-1

結果

練習問題2-5-2

結果

練習問題2-5-3

好きな色、形でデザインしなさい。