circleをclassでたくさんつくる p5.js版

何でもかんでも、どんどん忘れてしまいます。

「人間は忘れていかないと生きるのがしんどいから忘れる能力がある」的なことをよく言われていて納得する部分もあります。

しかし、それにしても忘れるスピードと量がすごいです。

p5.js をやっていて「class」を使おうと思ったら、久しぶりすぎてやり方を忘れてしまったので再確認です。

30 個のcircleをclassで作る

円を同時に複数個を作るものを class を使って作ってみました。

↓class-p5js.js

	let NUM = 30;
	let draw_circle = new Array(NUM);
	let posX, posY;
	let diameter;
	let c;

	function setup() {
	createCanvas(windowWidth, windowHeight, P2D);
	colorMode(HSB, 360, 100, 100, 100);
	blendMode(BLEND);

	for (let i = 0; i < NUM; i++) {
	draw_circle[i] = new drawCircle();
	}
	}

	function draw() {
	background(200, 100, 100, 100);

	for (let i = 0; i < NUM; i++) {
	draw_circle[i].drawcircle();
	}
	}

	class drawCircle {
	constructor() {
	this.posX = random(width);
	this.posY = random(height);
	this.diameter = random(10, 100);
	this.c = color(random(360), 100, 100, 60);
	}

	drawcircle() {
	fill(this.c);
	stroke(this.c);
	circle(this.posX, this.posY, this.diameter);
	}
	}

view raw class-p5js.js hosted with ❤ by GitHub

クラスはコードをわかりやすくすることも、使用する1つの目的だと思うけど、なんか複雑になっている気がします。。