p5.js 画像の入出力と加工
画像の保存 (sキーを押すと保存)
save_image.jsfunction setup() {
createCanvas(400, 400);
noStroke();
}
function draw() {
background(220);
fill(100, 200, 0);
rect(100,100,200,200);
}
function keyPressed() {
if (key == 's'){
saveCanvas('homework_7', 'png'); // ファイル名, ファイル形式(png or jpg)
//gd.timestamp()
}
}セキュリティの都合から、ブラウザによって画像のダウンロードがブロックされる場合がある
解決方法の一例
ブラウザのブロックを解除する
画像の読み込み
load_image.jslet img;
function preload() {
img = loadImage('https://live.staticflickr.com/1515/26653285795_311001ee9b.jpg');
}
function setup() {
createCanvas(400,400);
background(200);
image(img, 0, 0);
}セキュリティの都合から、ホスト先によって画像の読み込みがブロックされることがある
Flickrの画像 "Creative Commons" OK
自分のWEBの画像 NG
解決方法の一例
Flickrに画像をupする
p5.jsにログインして、ファイルをアップロードする
openProcessing を利用する
ローカルでp5.jsを動かす
画像の色合いを変える
tint.jslet img;
function preload() {
img = loadImage('https://live.staticflickr.com/1515/26653285795_311001ee9b.jpg');
}
function setup() {
createCanvas(500,332);
tint(100, 255, 255);
image(img, 0, 0);
}画像にフィルターをかける
filter.jslet img;
function preload() {
img = loadImage('https://live.staticflickr.com/1515/26653285795_311001ee9b.jpg');
}
function setup() {
createCanvas(500,332);
background(200);
image(img, 0, 0);
}
function keyPressed() {
if (key === '1') {
filter(THRESHOLD);
}
else if (key === '2') {
filter(GRAY);
}
else if (key === '3') {
filter(OPAQUE);
}
else if (key === '4') {
filter(INVERT);
}
else if (key === '5') {
filter(POSTERIZE, 10);
}
else if (key === '6') {
filter(DILATE);
}
else if (key === '7') {
filter(BLUR, 10);
}
else {
image(img, 0, 0);
}
}読み込んだ画像を点描する
point.js let img;
function preload() {
img = loadImage('https://live.staticflickr.com/1515/26653285795_311001ee9b.jpg');
}
function setup() {
createCanvas(500, 332);
noStroke();
background(255);
image(img, 0, 0);
img.loadPixels(); //https://p5js.org/reference/#/p5/loadPixels
}
function draw() {
let x = random(0, width);
let y = random(0, height);
let r = random(1, 15);
let pix = img.get(x, y); //https://p5js.org/reference/#/p5/get を参照
fill(pix, 128);
ellipse(x, y, r, r);
}参考文献
p5.js Reference & Examples
