P5.js 日本語リファレンス(get) #JavaScript

get()

説明文

キャンバスからピクセルの領域または単一のピクセルを取得します。

任意のピクセルの [R, G, B, A] 値の配列を返すか、画像の領域を取得します。パラメータが指定されていない場合は画像全体が返されます。 1つのピクセルの値を取得するには、xパラメータとyパラメータを使用します。追加のwおよびhパラメータを指定して画像の領域を取得します。画像を取得するとき、xおよびyパラメータは現在の imageMode() に関係なく、画像の左上隅の座標を定義します。

get(x, y)を使用して単一のピクセルの色を取得することは簡単ですが、pixels配列から直接データを取得するほど高速ではありません。画素密度dのpixels配列を使用する get(x, y) と同等のステートメントは次のとおりです。

let x, y, d; // これらを座標に設定します
let off = (y * width + x) * d * 4;
let components = [
  pixels[off],
  pixels[off + 1],
  pixels[off + 2],
  pixels[off + 3]
];
print(components);

詳細については, pixels のリファレンスをご覧ください。

色の配列またはサブイメージを p5.Image オブジェクトから抽出する場合は p5.Image.get() をご覧ください。

構文

get(x, y, w, h)

get()

get(x, y)

パラメタ

x
Number：ピクセルのx座標
y
Number：ピクセルのy座標
w
Number：幅
h
Number：高さ

戻り値

p5.Image：矩形領域のp5.Image

例1

let img;
function preload() {
  img = loadImage('assets/mountain.jpg');
}

function setup() {
  createCanvas(500, 500);
  image(img, 0, 0);

  // ロードした画像を取得する
  let c = get() ;

  image(c, 0, 200);
}

実行結果

例2

let img;
function preload() {
  img = loadImage('assets/mountain.jpg');
}
function setup() {

}

function draw() {
  createCanvas(300, 200);
  image(img, 0, 0);

  // マウス位置の画素値を取得する
  let c = get(mouseX, mouseY);
  fill(c);
  noStroke() ;
  rect(250, 10, 40, 40);
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。