![見出し画像](https://assets.st-note.com/production/uploads/images/40817121/rectangle_large_type_2_29eb318750c10b723f89d3d04a7e97c8.png?width=1200)
saveFrames (p5js)
ここ最近、Processing(& p5js)をがんばっています。
難しすぎて全然進みません。
自分がイメージしたものを自由に作れる日はいつになるのでしょうか。
「Generative Design with p5.js」という本で勉強してます。
1ページを理解するのに1週間以上かかります。
今、「エージェントが作る成長構造」をやっています。
これは円がどんどん発生するのですが、発生する場所は前の円にひっついて発生します。細胞が増える動きのようで気持ち悪さもあるのですが、美しいです。私はこんな動きが大好きです。
ここまで書いてきましたが、この投稿の目的は、p5jsで作った画像(動画)の保存方法の記録です。
コード
saveFramesを使って保存しました。
以下のコードのものをダウンロードしたものが、青い背景の画像です。
let maxCount = 5000;
let x = [maxCount];
let y = [maxCount];
let r = [maxCount];
let newX, newY, newR;
let currentCount = 1;
function setup() {
let cnv = createCanvas(1280, 670, P2D);
cnv.parent('myContainer');
frameRate(5);
colorMode(HSB, 360, 100, 100, 100);
noStroke();
x[0] = width / 2;
y[0] = height / 2;
r[0] = 10;
}
function draw() {
background(200, 100, 100, 100);
ellipse(x[0], y[0], r[0] * 2, r[0] * 2);
// new
newX = random(0, width);
newY = random(0, height);
newR = random(3, 20);
// ellipse(newX, newY, newR * 2, newR * 2);
// judge
let closestDist = Number.MAX_VALUE;
let closestIndex = 0;
for (let i = 0; i < currentCount; i++) {
let newDist = dist(newX, newY, x[i], y[i]);
if (newDist < closestDist) {
closestDist = newDist;
closestIndex = i;
}
}
// atan2
let angle = atan2(newY - y[closestIndex], newX - x[closestIndex]);
x[currentCount] = x[closestIndex] + cos(angle) * (r[closestIndex] + newR);
y[currentCount] = y[closestIndex] + sin(angle) * (r[closestIndex] + newR);
r[currentCount] = newR;
currentCount++;
for (let i = 0; i < currentCount; i++) {
ellipse(x[i], y[i], r[i] * 2, r[i] * 2);
}
if (currentCount > 100) {
noLoop();
}
console.log(currentCount);
}
function keyPressed() {
if (keyCode === DOWN_ARROW) {
saveFrames('sketch20201212-', 'png');
}
}
p5.js、Processingの理解は大変なのですが、すごく楽しいなと思って日々やってます。
この記事が気に入ったらサポートをしてみませんか?