P5.js Study 005

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

新たに覚えたコマンドなど

loadImage(path, successCallback);
// パスから画像を読み込み、画像からp5.Imageクラスを作成 
// 読み込み完了したらコールバック関数を呼び出す
// p5.Imageクラスは幅の値（width）、高さの値（with）、各ピクセル値を格納した配列（pixels[]）を持つ

// pixels[]は以下のような構成
// 4つで一つのピクセルの色情報を示す
// pixels = [r0, g0, b0, a0, r1, g1, b1, a1, ... rn, gn, bn, an]

p5.Image.loardPixels();
// p5.Imageクラスのpixels[]にアクセスできるようになる

読み込んだ画像をピクセルを並び替えて再表示する。
1〜4キーで画像変更。
5〜9キーでソートキーを変更。

ピクセルの並び替えはsortColors()というオリジナルの関数を用いている。