P5.js Study 040 – NNWGTMLOG

Generative Design with p5.js / Sketch P_2_3_6_01 を試しながらアレンジ。
元ネタ：https://editor.p5js.org/generative-design/sketches/P_2_3_6_01

ロジックのポイント

グリッドに沿って、路線図のようなものをドローイングできる。
路線図の部分は画像を表示している。

マス目は二次元配列になっていて、クリックされるとそのマス目の値が1になる。

function setTile(gridX, gridY) {
  // convert mouse position to grid coordinates
  tiles[gridX][gridY] = 1;
}

マス目の値が1ならば、上下左右の4マスの状態を調べて、上を第四位、左を第三位、下を第二位、右を第一位として二進数の形にし、それを十進数に変換した数字を使って、16種類の画像を出し分けている。
二進数を作るときに、一旦文字列に変換してからくっつけて、それをparseInt()で十進数の整数に変換しているところがポイント。

var NORTH = str(tiles[gridX][gridY - 1]);
var WEST = str(tiles[gridX - 1][gridY]);
var SOUTH = str(tiles[gridX][gridY + 1]);
var EAST = str(tiles[gridX + 1][gridY]);

// create binary result out of it
var binaryResult = NORTH + WEST + SOUTH + EAST;

// convert binary string to a decimal value from 0 - 15
var decimalResult = parseInt(binaryResult, 2);

var posX = tileSize * gridX - tileSize / 2;
var posY = tileSize * gridY - tileSize / 2;

// decimalResult is also the index for the shape array
image(modules[decimalResult], posX, posY, tileSize, tileSize);

なかなか重く、表示がちらつくときがあるので、フレームレートがどのくらいになっているのか気になったので、フレームレートを表示させてみた。
ひどいときには一桁になっているのが分かる。

作例を見る