だらっと学習帳



やりたかったこと
・あるサイズ(例:300x400)の画像を複数枚(例:5枚)リサイズしたい(例:横を250にして縦横比固定)
・上記の複数画像を等間隔(例:10pxずつ空ける)に並べて1枚の画像に出力したい
・枚数や画像内容は後々変わる可能性あり

そうだ、Processingでやろう

image_combine

かれこれ数年間、Processingでsize指定に変数は使えない→読み込んだ画像のサイズを流用することはできない と思っていたんですが、
調べてみたら実現方法がありました。調べてみるもんですね。
Problem with 3.x - Pimage and size() - Errors - Processing 2.x and 3.x Forum

 PImage myImage = loadImage("pict.png");
int myWidth = myImage.width;
int myHeight = myImage.height;
surface.setSize(myWidth, myHeight);

適当に黒い縦長の円を描く
pict1
function setup() {
createCanvas(600, 350);
}

function draw() {
background(255, 222, 205);

push();
translate(width/2, height/2);

noStroke();
fill(0);
ellipse(0, 0, 190, 220);

pop();
}


適当に白い円を重ねる
pict2
function setup() {
createCanvas(600, 350);
}

function draw() {
background(255, 222, 205);

push();
translate(width/2, height/2);

noStroke();
fill(0);
ellipse(0, 0, 190, 220);

fill(255);
ellipse(0, 30, 190, 220);

pop();
}


適当にさらに黒い円を重ねる
pict3
function setup() {
createCanvas(600, 350);
}

function draw() {
background(255, 222, 205);

push();
translate(width/2, height/2);

noStroke();
fill(0);
ellipse(0, 0, 190, 220);

fill(255);
ellipse(0, 30, 190, 220);

fill(0);
ellipse(0, 50, 170, 180);

pop();
}


白くて小さい縦長の円を適当に傾けて描く
pict4
function setup() {
createCanvas(600, 350);
}

function draw() {
background(255, 222, 205);

push();
translate(width/2, height/2);

noStroke();
fill(0);
ellipse(0, 0, 190, 220);

fill(255);
ellipse(0, 30, 190, 220);

fill(0);
ellipse(0, 50, 170, 180);

fill(255);
push();
translate(0, 0);
rotate(radians(40));
ellipse(-20, -20, 70, 110);
pop();

pop();
}


めちゃくちゃ太めの弧を描く
pict5
function setup() {
createCanvas(600, 350);
}

function draw() {
background(255, 222, 205);

push();
translate(width/2, height/2);

noStroke();
fill(0);
ellipse(0, 0, 190, 220);

fill(255);
ellipse(0, 30, 190, 220);

fill(0);
ellipse(0, 50, 170, 180);

fill(255);
push();
translate(0, 0);
rotate(radians(40));
ellipse(-20, -20, 70, 110);
pop();

noFill();
strokeWeight(40);
strokeCap(SQUARE);
stroke(250, 246, 1);
arc(0, 65, 100, 100, PI/6, PI*5/6);

pop();
}


適当に線を引く
pict6
function setup() {
createCanvas(600, 350);
}

function draw() {
background(255, 222, 205);

push();
translate(width/2, height/2);

noStroke();
fill(0);
ellipse(0, 0, 190, 220);

fill(255);
ellipse(0, 30, 190, 220);

fill(0);
ellipse(0, 50, 170, 180);

fill(255);
push();
translate(0, 0);
rotate(radians(40));
ellipse(-20, -20, 70, 110);
pop();

noFill();
strokeWeight(40);
strokeCap(SQUARE);
stroke(250, 246, 1);
arc(0, 65, 100, 100, PI/6, PI*5/6);

strokeCap(ROUND);
strokeWeight(5);
stroke(0);
line(-90, -90, -60, -60);

pop();
}

適当に並べて描いておしまい
pict7
function setup() {
createCanvas(600, 350);
}

function draw() {
background(255, 222, 205);

drawEye(width/2 - 155, height/2);
drawEye(width/2 + 155, height/2);
}

function drawEye(ox, oy) {
push();
translate(ox, oy);
noStroke();
fill(0);
ellipse(0, 0, 190, 220);

fill(255);
ellipse(0, 30, 190, 220);

fill(0);
ellipse(0, 50, 170, 180);

fill(255);
push();
translate(0, 0);
rotate(radians(40));
ellipse(-20, -20, 70, 110);
pop();

noFill();
strokeWeight(40);
strokeCap(SQUARE);
stroke(250, 246, 1);
arc(0, 65, 100, 100, PI/6, PI*5/6);

strokeCap(ROUND);
strokeWeight(5);
stroke(0);
line(-90, -90, -60, -60);
pop();
}


関連リンク :
P.P.T.P - OpenProcessing
sketch497922-iloveimg-compressed

Processing Advent Calendar 2017 参加記事

07

p5.js のライブラリのひとつ p5.collide2D はその名のとおり当たり判定を手軽に実装できるライブラリです。
bmoren/p5.collide2D: 2d collision library for p5.js
このライブラリのサンプルにも含まれている、図形を重なることなく充填させる"ぎゅむぎゅむ"スケッチの描き方が面白かったので紹介します。

p5.collide2D は対象となる2つの図形が衝突しているかしていないかを判断してくれます。
例えば、以下のサンプルスケッチではマウス(=点)と四角が衝突しているか判定し、
衝突している場合は四角の色が変わるようになっています。
Basic Usage

対象となる図形は円、四角、線、点などが用意されており、
判定する組み合わせも「円と円」、「円と線」など、様々に扱うことができます。

以上をふまえて、p5.collide2Dの別のサンプルスケッチを見てみましょう。
Randomly placing objects without touching
円と円の衝突判定を利用して、対象オブジェクトとそれ以外のオブジェクトが衝突していないか判定し、
衝突していた場合は再度別の場所に描画しなおす…ということを繰り返しています。
これにより、重なることなく円が描画されています。

ただし、このスケッチは円の大きさが固定のため、どう頑張ってもスペースに収まらず描画できないというケースがあります。
そこで、円と円が衝突していたら小さい方がさらに小さくなるという機構を付け足します。
これにより、スペースに収まりきらない問題は解決し、記事の冒頭にあるような"ぎゅむぎゅむ"が実現できました。
fill up - OpenProcessing

p5.collide2Dは、ゲームへの活用など、様々なことに使えそうです。
OpenProcessingでも投稿画面上の右のメニューから気軽に利用できるのでオススメです!

このページのトップヘ