ワタタク今回の記事の目的はProcessingの「loadPixels()」を理解し、自分なりに使ってみること。
この記事を書いた人
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
目次
【Processing】loadPixels()について
loadPixels()について
- loadPixelsという英語の意味は「ピクセルを読み込む」です
loadPixels()は、画面に表示されているすべての色の情報を取り込む関数- 画像を加工したり、色を変えたり、特定の色を探したりするのに役に立つ
【Processing】loadPixels()の使い方【画像とコード】
11行目が分かりにくいので、次の項目でget()を使って、座標のピクセルを取得している例を紹介しています。そちらの方が分かりやすいかと思います。
void setup() {
size(800, 400); // ウィンドウのサイズを800x400ピクセルに設定（左右に配置するため）
PImage img; // 画像の情報を格納する変数を宣言
img = loadImage("bledlake.jpg"); // 画像を読み込み
img.loadPixels(); // 画像のピクセルデータを読み込み
image(img, 0, 0, width/2, height); // 左側に画像を表示（ウィンドウの左半分を使用）
color c = img.pixels[50 + 50 * img.width]; // 画像の座標 (50, 50) の色を取得
fill(c); // 取得した色を塗りつぶし色として使用
rect(400, 0, 400, 400); // 右側の四角形を描画（ウィンドウの右半分を使用）
}【別の構文による補足】get()を使った書き方の方が座標のピクセルの色を取得するのが分かりやすい（2024年11月22日追記）
コードを実行→雲をマウスクリックして雲の座標を取得→get()関数でその取得した位置のピクセルを取得→右側の四角形に取得したピクセルの色を表示。
PImage img; // 画像の情報を格納する変数を宣言
void setup() {
size(800, 400); // ウィンドウのサイズを800x400ピクセルに設定（左右に配置するため）
img = loadImage("bledlake.jpg"); // 画像を読み込み
image(img, 0, 0, width / 2, height); // 左側に画像を表示（ウィンドウの左半分を使用）
// 画像の座標 (160, 29) の色を取得
int x = 160;
int y = 29;
color c = img.get(x, y); // 取得した色を塗りつぶし色として使用
fill(c); // 塗りつぶし色として使用
rect(400, 0, 400, 400); // 右側の四角形を描画（ウィンドウの右半分を使用）
}
void draw() {
}
void mousePressed() {
int mx = mouseX;
int my = mouseY;
println("Mouse clicked at: (" + mx + ", " + my + ")"); // クリック位置をコンソールに出力
}
【Processing】loadPixels()を使ってみた感想
loadPixels()を使ってピクセルの色を取得するのは難しいですね。
ワタタクそれでは今日もレッツワクワクコーディング。