p5.Image

画像を表現するクラスです。

画像はピクセルの長方形のグリッドで、表示や修正が可能です。

既存の画像はloadImage()を呼び出すことで 読み込むことができます。空の画像はcreateImage()を 呼び出すことで作成できます。p5.Imageオブジェクトには、 フィルターの適用やピクセル値の変更など、一般的なタスクのための メソッドがあります。

実例

シンタックス

p5.Image(width, height)

パラメーター

width
Number:
height
Number:

フィールド

width

画像の幅(ピクセル単位)。

height

画像の高さ(ピクセル単位)。

pixels

画像内の各ピクセルの色を含む配列。

色は赤、緑、青、アルファ(RGBA)値を表す数値として 保存されます。img.pixelsはパフォーマンス上の理由から 1次元配列です。

各ピクセルはピクセル配列内で4つの要素を占め、それぞれが RGBA値に対応します。例えば、座標(0, 0)のピクセルは img.pixels[0]img.pixels[1]img.pixels[2]img.pixels[3]にそれぞれRGBA値を格納します。次の座標(1, 0)の ピクセルはimg.pixels[4]img.pixels[5]img.pixels[6]img.pixels[7]にRGBA値を格納します。以下同様です。 100×100のp5.Imageオブジェクトのimg.pixels配列は 100 × 100 × 4 = 40,000個の要素を持ちます。

画像内のピクセルのRGBA値にアクセスするには、以下の例に示すように 少し計算が必要です。img.pixels配列にアクセスする前に img.loadPixels() メソッドを呼び出す必要があります。変更を加えた後は img.updatePixels()メソッドを 呼び出す必要があります。

メソッド

pixelDensity

高ピクセル密度ディスプレイ用のピクセル密度を取得または設定します。

デフォルトでは、密度は1に設定されます。

引数なしでこのメソッドを呼び出すとデフォルトの密度を取得し、数値を渡すと 密度を設定します。0以下の数値が提供された場合、デフォルトで1になります。

loadPixels

画像内の各ピクセルの現在の値をimg.pixels配列に 読み込みます。

img.loadPixels()は、ピクセル値の読み取りや 変更の前に呼び出す必要があります。

updatePixels

img.pixels配列のRGBA値で キャンバスを更新します。

img.updatePixels()は、img.pixels 配列の値を変更した後にのみ呼び出す必要があります。このような変更は、 img.loadPixels()を呼び出した直後か、 img.set()を呼び出すことで 行うことができます。

オプションのパラメータxywidthheightは、 更新する画像のサブセクションを定義します。これを行うことで、 場合によってはパフォーマンスが向上する可能性があります。

画像がGIFから読み込まれた場合、img.updatePixels()を呼び出すと 現在のフレームのピクセルが更新されます。

get

画像からピクセルまたはピクセル領域を取得します。

img.get()は使いやすいですが、 img.pixelsほど高速ではありません。 多くのピクセル値を読み取るにはimg.pixelsを使用してください。

パラメータなしのimg.get()バージョンは、画像全体を返します。

2つのパラメータを持つimg.get()バージョン(例:img.get(10, 20))は、 それらを座標として解釈します。指定されたポイントのピクセルの [R, G, B, A]値を含む配列を返します。

4つのパラメータを持つimg.get()バージョン(例: img,get(10, 20, 50, 90))は、それらを座標と寸法として解釈します。 最初の2つのパラメータはサブセクションの左上隅の座標です。 最後の2つのパラメータはサブセクションの幅と高さです。 新しいp5.Imageオブジェクトでキャンバスの サブセクションを返します。

画像を直接操作するには、get()の代わりに img.get()を使用してください。

set

画像内の1つ以上のピクセルの色を設定します。

img.set()は使いやすいですが、 img.pixelsほど高速ではありません。 多くのピクセル値を設定するにはimg.pixelsを使用してください。

img.set()は最初の2つのパラメータをx座標とy座標として解釈します。 最後のパラメータはグレースケール値、[R, G, B, A]ピクセル配列、 p5.Colorオブジェクト、または別の p5.Imageオブジェクトとして解釈されます。

変更を反映させるには、img.set()の使用後に img.updatePixels()を 呼び出す必要があります。

resize

画像を指定された幅と高さにリサイズします。

画像の元のアスペクト比は、widthまたはheightのいずれかに0を 渡すことで保持できます。例えば、500 × 300ピクセルの画像に対して img.resize(50, 0)を呼び出すと、50 × 30ピクセルにリサイズされます。

copy

ソース画像からこの画像にピクセルをコピーします。

最初のパラメータsrcImageは、コピーするオプションの p5.Imageオブジェクトです。ソース画像が 渡されない場合、img.copy()はこの画像の一部を別の 領域にコピーすることができます。

次の4つのパラメータsxsyswshは、 ソース画像からコピーする領域を決定します。(sx, sy)は 領域の左上隅です。swshは領域の幅と高さです。

次の4つのパラメータdxdydwdhは、 この画像にコピーする領域を決定します。(dx, dy)は 領域の左上隅です。dwdhは領域の幅と高さです。

img.copy()を呼び出すと、ソース領域が目的の領域と 同じサイズでない場合、ピクセルがスケーリングされます。

mask

画像の一部を別の画像でマスクします。

img.mask()は、別のp5.Imageオブジェクトの アルファチャンネルをこの画像のアルファチャンネルとして使用します。マスクは 累積的であり、一度適用されると削除できません。マスクがこの画像と 異なるピクセル密度を持つ場合、マスクはスケーリングされます。

filter

画像にイメージフィルターを適用します。

プリセットのオプションは以下の通りです:

INVERT 画像の色を反転させます。パラメータは使用されません。

GRAY 画像をグレースケールに変換します。パラメータは使用されません。

THRESHOLD 画像を白黒に変換します。指定されたしきい値より上のグレースケール値を持つ ピクセルは白に変換されます。残りは黒に変換されます。しきい値は 0.0(黒)から1.0(白)の間でなければなりません。値が指定されない場合、 0.5が使用されます。

OPAQUE アルファチャンネルを完全に不透明に設定します。パラメータは使用されません。

POSTERIZE 画像の色数を制限します。各色チャンネルは指定された色数に 制限されます。2から255の間の値が有効ですが、 低い値ほど結果が顕著になります。デフォルト値は4です。

BLUR 画像をぼかします。ぼかしのレベルはぼかし半径によって指定されます。 値が大きいほどぼかしが強くなります。デフォルト値は4です。P2Dモードでは ガウシアンぼかしが使用されます。WEBGLモードではボックスぼかしが 使用されます。

ERODE 明るい領域を縮小します。パラメータは使用されません。

DILATE 明るい領域を拡大します。パラメータは使用されません。

blend

別の画像からこの画像にピクセル領域をコピーしてブレンドします。

最初のパラメータsrcImageは、ブレンドする p5.Imageオブジェクトです。

次の4つのパラメータsxsyswshは、 ソース画像からブレンドする領域を決定します。(sx, sy)は 領域の左上隅です。swshは領域の幅と高さです。

次の4つのパラメータdxdydwdhは、 キャンバスにブレンドする領域を決定します。(dx, dy)は 領域の左上隅です。dwdhは領域の幅と高さです。

10番目のパラメータblendModeは、画像の色をブレンドするために 使用するエフェクトを設定します。オプションはBLENDDARKESTLIGHTESTDIFFERENCEMULTIPLYEXCLUSIONSCREENREPLACEOVERLAYHARD_LIGHTSOFT_LIGHTDODGEBURNADD、またはNORMALです。

save

画像をファイルに保存します。

デフォルトでは、img.save()は画像をuntitled.pngという 名前のPNG画像として保存します。

最初のパラメータfilenameはオプションです。ファイルの名前を 設定する文字列です。ファイル拡張子が含まれている場合(例: img.save('drawing.png'))、画像はその形式で保存されます。

2番目のパラメータextensionもオプションです。ファイルの形式を 設定します。'png'または'jpg'のいずれかを使用できます。例えば、 img.save('drawing', 'jpg') はキャンバスをdrawing.jpgというファイルに保存します。

注意:ブラウザはファイルを即座に保存するか、ユーザーにダイアログ ウィンドウでプロンプトを表示します。

画像は、GIFファイルから読み込まれた場合にのみ、アニメーションGIFとして ダウンロードされます。新しいGIFを作成するにはsaveGif()を 参照してください。

reset

アニメーションGIFを最初のフレームに戻します。

getCurrentFrame

アニメーションGIFの現在のフレームのインデックスを取得します。

setFrame

アニメーションGIFの現在のフレームを設定します。

numFrames

アニメーションGIFのフレーム数を返します。

play

img.pause()で一時停止された アニメーションGIFを再生します。

pause

アニメーションGIFを一時停止します。

GIFはimg.play()を呼び出すことで 再開できます。

delay

アニメーションGIFのフレーム間の遅延を変更します。

最初のパラメータdelayは、遅延の長さをミリ秒単位で指定します。

2番目のパラメータindexはオプションです。提供された場合、 indexのフレームの遅延のみが変更されます。他のすべてのフレームは デフォルトの遅延を保持します。

Notice any errors or typos? Please let us know. Please feel free to edit src/image/p5.Image.js and open a pull request!

関連するリファレンス