[image].get([x],[y])
https://p5js.org/reference/#/p5/get
イメージファイルを読み込んで、画面に表示してみます。
イメージファイルは、サーバーにアップロードする必要があります。
もとの画像は海の写真です。
p5jsのcanvasを500x500ドットにしたので、写真も500x500ドットにリサイズしています。
以下のプログラムでは、座標を指定して色をしらべるときに、canvasの座標ではなく、画像の座標で調べています。サイズが異なるとズレを補正する計算が必要になりますが、リサイズしていれば計算が不要で楽です。
//一定時間おきに
//音を鳴らす
//画像をもとに色をつくり
//ランダムに四角を描く
let img;
let i_x = 0;
let i_y = 0;
let i_w = 0;
let i_h = 0;
let r = 0;
let c;
function preload() {
//画像の大きさは、canvasのサイズと同じにすると考えやすい
img = loadImage("sea.jpg");
}
function setup() {
//画面サイズ
createCanvas(500, 500);
//背景を塗る
background(210, 240, 220);
}
function draw() {
//画像の座標とサイズと回転
i_x = random(0, 50)*10;
i_y = random(0, 50)*10;
i_w = random(50, 10);
i_h = random(50, 10);
r = random(0, 360);
//座標を画面の外に
push();
//移動と回転
translate(i_x, i_y);
angleMode(DEGREES);
rotate(r);
//線の色と太さ
// noStroke();
strokeWeight(0.5);
stroke(255, 50);
//画像をもとに色をしらべる
//(画像は表示してない)
c = img.get(i_x, i_y);
//塗り色をしらべた色に
fill(red(c), green(c), blue(c), 100);
//四角を描く
rectMode(CENTER);
rect(0, 0, i_w, i_h);
//座標を画面にもどす
pop();
}
getをつかうと、座標で指定した場所の色を調べることができます。
ここの例では、画面をそのまま表示せず、その画像を見えないところで展開し、指定した場所の色を調べています。
こうすることで、もとのイメージを感じさせつつ、モザイク状の絵となり、ほどよく抽象的になります。
具体的な写真が繰り返し出てきたり、完全なランダムで色が決まると飽きてしまうので、工夫した例です。