【p5.js】オセロ盤を描画する

background関数とline関数でオセロ盤を描画する。

let board = [
  [-1, -1, -1, -1, -1, -1, -1, -1],
  [-1, -1, -1, -1, -1, -1, -1, -1],
  [-1, -1, -1, -1, -1, -1, -1, -1],
  [-1, -1, -1,  1,  0, -1, -1, -1],
  [-1, -1, -1,  0,  1, -1, -1, -1],
  [-1, -1, -1, -1, -1, -1, -1, -1],
  [-1, -1, -1, -1, -1, -1, -1, -1],
  [-1, -1, -1, -1, -1, -1, -1, -1]
];

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

function draw() {
  background('green'); 
  for (let i = 1; i < 8; ++i) {
    line(0, 50*i, width, 50*i);
    line(50*i, 0, 50*i, height);
  }

  for (let y = 0; y < 8; ++y) {
    for (let x = 0; x < 8; ++x) {
      if (board[y][x] == 0) {
        fill(0);
        circle(50*x+25,50*y+25,40);
      } else if (board[y][x] == 1) {
        fill(255);
        circle(50*x+25,50*y+25,40);
      }
    }
  }
}

今回は、以下のように出力される。

p5.js Web Editor

A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators,...