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の理解は大変なのですが、すごく楽しいなと思って日々やってます。