p5.jsで作るピクセルソーティング

はじめに

この記事では、p5.jsを使ってお手軽ピクセルソーティング（pixel sorting）を実装してみたいと思います！

p5.jsとは

p5.jsとは、ビジュアルプログラミング言語である「Processing」をJavaScriptに移植したライブラリです。
簡単な関数を使ってクリエイティブコーディングに挑戦することができ、Web上でさくっと確認＆発表ができます。

p5.js 公式

※本記事では基本的なp5.jsの書き方についてはご紹介しませんのでご注意ください

ピクセルソーティングとは

ピクセルソーティングとは、デジタルのイメージがあたかも溶けているような編集を施す表現手法のひとつです。
いわゆる「ドット欠け」の延長線上のようなイメージでグリッチ文脈で参照されたりしています。

ピクセルの色が下に溶け出したような画面は、
ピクセルというデジタルイメージの概念と、下に垂れ落ちる塗料のような物質的概念が掛け合わされた、唯一無二の世界観を生みます。

「pixel-sorting」と検索すると主にphotoshopで編集した絵が多く出てきますのでぜひ検索してみてください。
（記事内で貼っている画像は全て今回の記事のコードを使って描画したものです）

簡単にやりたい！

photoshopでごにょごにょやるのむずい！できるだけ簡単にやりたい！
ということで今回はp5を使って、一つずつ手順を分解して極力簡単にやってみようと思います。

実装

手順の分解

まずピクセルソーティングを実装するためには何が必要か、手順を分解してみましょう。

1.画像を読み込む
2.画像を1pxずつに分割する
3.ランダムに選んだ座標のピクセルの色を取得する
4.特定座標から下方向に同じ色の線を引く
5.3~4を画面全体に繰り返していく

1の手順から実装していきます。

1. 画像を読み込む

まずはピクセルソーティングに使う画像を読み込みましょう！
本記事ではo-danでダウンロードしたこちらのフリー画像を使用します。

きれいな写真ですね。

p5.jsで画像を扱うときは`preload関数`を用いてloadImage("")で画像の読み込みをします。

let img;
function preload() {
  img = loadImage("img.jpg");
}

canvasの初期設定もしましょう。

function setup() {
  createCanvas(500, 500);
  smooth();
  image(img, 0, 0, width, height);
}

image(img, x, y, width, height)で問題なく画像が描画されたらOKです。

2. 画像を1pxずつに分割する

次にgetPixel関数を新たに作って、画像の1pxずつを参照していく処理を作ります。

function getPixel() {
  for (let x = 0; x <= width; x += 1) {
    for (let y = height; y >= 0; y -= 1) {
     // 処理
   }
  }
}

ここでポイントなのはy座標に関して下から上の順番で参照しているところです。
というのもxと同じく0から（上から）見ていくと、選んだピクセルから垂らした線が次々描画されてしまい、
下の方は本来の写真の色ではなく上で垂らした色を拾ってしまい、想定のピクセルソーティングとは異なってしまうためです。

▼雑な図

これはこれで面白い表現になるので後ほどご紹介しますが、一旦はノーマルなピクセルソーティングを実装するため、下から見ていくこととします。

3. ランダムに選んだ座標のピクセルの色を取得する

次に垂らせるピクセルを決めて、カラーを取得してみます。
垂らせるピクセルですが、全部を垂らすと縦線だらけになり元の写真の絵が失われるのでランダムに決めることにします。

function getPixel() {
  for (let x = 0; x <= width; x += 1) {
    for (let y = height; y >= 0; y -= 1) {
      const index = Math.round(random());
      const color = get(x, y);
      const r = color[0];
      const g = color[1];
      const b = color[2];
      if (index === 1) drawLine(x, y, r, g, b);
    }
  }
}

p5のrandom()関数は引数なしの場合0~1の間の擬似乱数を返すので、それを四捨五入し
1であったときのみ線を引く処理をするとしてみます。

また、p5でピクセルの色を取得する処理はget(x, y)で簡単にできます。
ここで取得した値は配列でRGBAが入っているので、それをそれぞれ変数r, g, bに格納します。

4.特定座標から下方向に同じ色の線を引く

座標のピクセルのrgbが取得できたら、その色を使って座標位置から下方向に線を引いてみましょう。

function drawLine(x, y, r, g, b) {
  let length = 300;
  stroke(r, g, b);
  strokeWeight(1);
  noFill();
  line(x, y, x, y + length);
}

これで描画されたのがこちら

想定してたピクセルソーティングと違いますね。
ランダムに指定したピクセルを長さ300で下に垂らしている（線を引いている）のですが、
今の状態だとおよそ1/2で線が引かれるため、線が多くなってしまい縦線が画面を占めてしまっています。

線を垂らす長さを300→100に変更してみると…

図像が見えてきましたがやはり線が多くぼんやりした印象です。

ここでピクセルソーティングの極意（？）の登場です。

ピクセルの選択条件を決める

上のように画面全体を満遍なく選択しては、モザイク画のようになってしまうため、
ピクセルソーティングではどのピクセルを選択して色を垂らすかが肝となります。

ここでは特定のrgb値の時にだけ色を垂らすという条件を付与してみます。
ただ「何を選択条件とするか？」はいろいろと考えられそうで
それによって面白い画面がいくらでも作れそうですのでぜひ記事を読んだ後にチャレンジしてみてくださいね。

rgb値の指定

今回使ってる写真は黄色の花が主役なので、黄色のピクセルであるときのみ色を垂らす条件を追加します。

      function getPixel() {
        for (let x = 0; x <= width; x += 1) {
          for (let y = height; y >= 0; y -= 1) {
            const index = Math.round(random());
            const color = get(x, y);
            const r = color[0];
            const g = color[1];
            const b = color[2];
            if (200 < r && 130 < g && b < 100) {
              if (index === 1) drawLine(x, y, r, g, b);
            }
          }
        }
      }

ここの指定は煩雑で申し訳ないのですが、
200 < r && 130 < g && b < 100というざっくり黄色系の色味のrgbの条件を指定します。

前衛的な画面になってきました。

より完成度を上げるために線の長さ、線の透明度、ランダムの確率を調整してみます。

こちらは

index = Math.round(random(20));
length = random(30, 150);
stroke(`rgba(${r}, ${g}, ${b}, 1)`);

としています。

ランダムでピックアップされる確率を少なくし線の密度を低くした分、線の最長の長さを長めにとることでメリハリが出てバランスが良くなっています。（あくまで好みですが…）

こちらの画像は打って変わって線の密度が高めです。
設定値はこちら。

index = Math.round(random());
length = random(30, 80);
stroke(`rgba(${r}, ${g}, ${b}, 0.3)`);

線の密度を高くしたので、その分透明度を下げたり線の最長の長さを短めにすることで
画面が縦線で埋まることを回避してほどよくスキマを持たせています。

アレンジ

見ていただいた通り、ピクセルソーティングは細かな値を変えるといろんな表情に変わります。

もう少し多様なアレンジ例を見てみましょう。

こちらは
・y軸を上から下に参照してく
・取得したrgb値を入れ替えて格納
・blendMode()を採用
などをしています。

上から線を引いていってるので、画面下に行くに連れ明度が明るくなってるのがドラマチックですね。
画面上に残ってる濃い色のフチもいい感じです。

function getPixel() {
  for (let x = 0; x <= width; x += 1) {
    for (let y = 0; y <= height; y += 1) {
      const index = Math.round(random(10));
      const color = get(x, y);
      const r = color[1];
      const g = color[2];
      const b = color[3];
      // if (200 < r && 130 < g && b < 100) {
      if (index === 1) drawLine(x, y, r, g, b);
      // }
    }
  }
}

function drawLine(x, y, r, g, b) {
  let length = random(300);
  blendMode(DODGE);
  stroke(`rgba(${r}, ${g}, ${b}, 0.1)`);
  strokeWeight(1);
  noFill();
  line(x, y, x, y + length);
}

こちらの例は、線を引く方向を下から上に変更したものです。

ここまでくると写真の原型はありませんが、これはこれでかっこいいので例として挙げておきます。

こんな感じで画面全体を縦線で覆う絵を作りたい場合は
少しrgbの制限を広範囲にしてあげると濃淡が出て、色に緩急のバリエーションが出ていいと思います。
（この例の場合はg値の制限を無くしてみました）

function getPixel() {
  for (let x = 0; x <= width; x += 1) {
    for (let y = height; y >= 0; y -= 1) {
      const index = Math.round(random());
      const color = get(x, y);
      const r = color[0];
      const g = color[1];
      const b = color[2];
      if (200 < r && b < 100) {
        if (index === 1) drawLine(x, y, r, g, b);
      }
    }
  }
}

function drawLine(x, y, r, g, b) {
  let length = 300;
  stroke(`rgba(${r}, ${g}, ${b}, 1)`);
  strokeWeight(1);
  noFill();
  line(x, y, x, y - length);
}

おわりに

最後まで読んでいただきありがとうございます。
ピクセルソーティングの魅力が伝わっていたら幸いです。

他にもクリエイティブコーディング系の記事を挙げていますので
ぜひ合わせてご覧ください。

A-Frameで始めるクリエイティブ・コーディング入門

A-Frameで実装するセル・オートマトン（ライフゲーム）