2021年5月28日

プログラミング

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

目次

  1. はじめに
  2. ピクセルソーティングとは
  3. 簡単にやりたい!
  4. 実装
  5. アレンジ
  6. おわりに

はじめに

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

こんな人におすすめ

  • p5.jsを触ったことのある人
  • Javascriptを書けて、クリエイティブコーディングにチャレンジしてみたい人
  • 他の言語でクリエイティブコーディングをしていて、新たな表現を見つけたい人

p5.jsとは

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

p5.js 公式

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

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

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

ダウンロード (9).png (587.6 kB)

ダウンロード (26).png (750.3 kB)

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

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

ダウンロード (15).png (1.3 MB)

簡単にやりたい!

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

実装

手順の分解

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

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

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

1. 画像を読み込む

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

きれいな写真ですね。

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から(上から)見ていくと、選んだピクセルから垂らした線が次々描画されてしまい、
下の方は本来の写真の色ではなく上で垂らした色を拾ってしまい、想定のピクセルソーティングとは異なってしまうためです。

▼雑な図
名称未設定のアートワーク.png (162.4 kB)

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

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);
}

これで描画されたのがこちら
ダウンロード (10).png (374.2 kB)

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

線を垂らす長さを300→100に変更してみると…
ダウンロード (11).png (902.0 kB)

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

ここでピクセルソーティングの極意(?)の登場です。

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

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

ここでは特定の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の条件を指定します。

ダウンロード (13).png (630.0 kB)

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

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

ダウンロード (14).png (1.2 MB)

こちらは

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

としています。

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

ダウンロード (14).png (1.2 MB)

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

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

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

アレンジ

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

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

ダウンロード (20).png (1.7 MB)

こちらは
・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);
}

ダウンロード (21).png (492.1 kB)

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

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

こんな感じで画面全体を縦線で覆う絵を作りたい場合は
少し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で実装するセル・オートマトン(ライフゲーム)

プログラミングのお仕事に関するご相談

Bageleeの運営会社、palanではプログラミングに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

1

0

AUTHOR

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

CONTACT PAGE TOP