02-10 ドットアート

1 例題2-10-1
- 1.1 コード
- 1.2 結果
2 練習問題2-10-1

マスのクリックでドットアートを作る。

例題2-10-1

描16×16のマスをクリックするたびに□と■の表示を交互に行う。画色を指定できるようにする。

コード

const N = 16;
const m = Array.from({ length: N }, () => new Array(N).fill(1));

function setup() {
  createCanvas(160, 160);
}

function draw() {
  background(220);
  for (let i = 0; i < N; i++) {
    for (let j = 0; j < N; j++) {
      if (m[i][j] == 1)
        fill(204);
      else
        fill(0);
      rect(j*10,i*10,10,10);
    }
  }
}

function mousePressed() {
  i = Math.floor(mouseY / 10);
  j = Math.floor(mouseX / 10);
  m[i][j] = -m[i][j];
}

結果

練習問題2-10-1

各自ドットアートを描きなさい。