Chapter 35

パターン生成

miku
miku
2021.11.15に更新

小さなサイズのドット絵だと適当に描いてもそれなりの絵になることがある。その事象を利用して、今回はランダムに点を打ってドット絵を作成する。とはいっても完全にランダムだと、ただのノイズの塊になるので多少のルールは必要だ。

パターン生成

5x5のサイズの画像を用意して、すべてのピクセルに対して、50%の確率で色を塗ると上記のようになる。これだと先程述べたとおり、あまり絵とはいえないノイズの塊になるので、更に色を塗る際のルールを追加する。

1~3列目をランダムに描いて、1~2列目を右側に反転するようにコピーをする。こうするとランダムながら全体はある程度整った形になりやすい。

パターン生成のコード例

const w = 5;
const h = 5;
const cellSize = 20;

function setup() {
  createCanvas(windowWidth, windowHeight);
  noSmooth();

  const img = createImage(w, h);
  img.loadPixels();

  for (let y = 0; y < h; y++) {
    for (let x = 0; x < ceil(w / 2); x++) {
      if (random() < 0.5) {
        img.set(x, y, color(255, 255, 255));
      }
    }
  }

  img.updatePixels();

  for (let y = 0; y < h; y++) {
    for (let x = 0; x < floor(w / 2); x++) {
      const pixel = img.get(x, y);
      img.set(w - x - 1, y, pixel);
    }
  }

  img.updatePixels();
  image(img, 10, 10, w * cellSize, h * cellSize);
}

亜種

const w = 5;
const h = 10;
const cellSize = 20;

function setup() {
  createCanvas(windowWidth, windowHeight);
  noSmooth();

  const img = createImage(w, h);
  img.loadPixels();

  for (let y = 0; y < h; y++) {
    for (let x = 0; x < ceil(w / 2); x++) {
      if (random() < 0.5) {
        img.set(x, y, color(255, 255, 255));
      }
    }
  }

  img.updatePixels();

  for (let y = 0; y < h; y++) {
    for (let x = 0; x < floor(w / 2); x++) {
      const pixel = img.get(x, y);
      img.set(w - x - 1, y, pixel);
    }
  }

  img.updatePixels();
  image(img, 10, 10, w * cellSize, h * cellSize);
}

5x10の縦長版の作例。