【p5.js】65,536個のピクセルイメージを生成する

Generate pixel images of 65,536

Updated by 51n1 on 29 Nov, 2021
  1. Home
  2. p5.js

もくじ

2021/11/29追記
当初ランダムに生成するピクセルイメージをピクセルアートと表現していたのですが、どこか違うなと思いましたので、このp5.jsのコードによりランダムに生成しているのはピクセルアートではなく、ピクセルイメージと訂正しました。ピクセルイメージを意味づけすることで、特定のあるパターンにおいてはピクセルアートと呼べるものがあるという言い方が適切かと思いました。

p5.jsでピクセルイメージを生成する

p5.jsでタテ4px x ヨコ4px相当サイズのピクセルイメージをランダムに生成するコードを書いてみました。1px当たり2色(1bit)のカラーで合計16pxという小さいサイズですが、65,536個のピクセルイメージを生成することができるp5.jsスケッチです。下記のスケッチはランダムに1パターンのみ表示させるだけなので、とても簡単なプログラムとなっています。

下のp5.jsスケッチをマウスクリックしてもらうとクリックする度に、ランダムにピクセルイメージが表示されます。

p5.js Sketch : 4x4 pixels

下記は、この4x4ピクセルイメージを生成するp5.jsのコードです。p5.jsには直接ピクセル(画素)を弄ることのできるメソッドもあるのですが、ここでは簡単に四角形を描画する関数を使っています。

X方向に4回、Y方向に4回ループを回して、1px分ずつ白か黒かをランダムに取得して画面サイズの1/4の大きさで線のない四角形を16回描いています。ただそれだけです。

OpenProcessingにも同様のコードを持ったスケッチを登録しておきました。 4 x 4 pixels

let px = 4;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  noStroke();
}

function draw() {
  translate(-width/2, -height/2);
  CreatePixelArt();
  noLoop();
}

function CreatePixelArt(){
  background(0);

  for (let x = 0; x < px; x++){
    for (let y = 0; y < px; y++){
      fill(GetRandomColor());
      let xPos = x * width/px;
      let yPos = y * height/px;
      rect(xPos, yPos, width/px, height/px);
    }
  }
}

function GetRandomColor(){
  return (random(2) > 1 ? 0 : 255);
}

function mouseClicked(){
  CreatePixelArt();
}

function keyPressed() {
  if (keyCode === ENTER) saveCanvas();
}

次のステップ

上記の基本となるコードから生み出される65,536個のピクセルイメージを1つずつ意味づけし、可能な限りそれぞれのピクセルイメージを言語的に差別化します。

65,536のピクセルイメージの名前付けを行ったら、ウェブ上に公開して共有します。これらのピクセルイメージは基本的には自由にゲーム開発やデザインの制作の素材として使用できるように全ピクセルイメージのリストを作成します。それが次のステップと考えています。

ちなみに1ピクセルあたり4色つまり2bitにした場合、合計32bitで4,294,967,296個のイメージ数になります。4兆超えます。途方もない・・・。これ以上の数に名前付けするのは不可能なんですが、65,536個のピクセルイメージを言語化すれば、おそらくそれ以上の数にもAIや機械学習を利用して応用が可能だと楽観的に考えています。