【p5js/プログラミング】回る。

Art

2020.05.01

こんにちは、たやち（tayati369）です。

p5.jsでコーディングしています。
PCD@Tokyoさんの「デイリーコーディングチャレンジ」！！に素人極まりない私も参加しております。
毎日できるかわからないけれど、リモートワークのこのご時世、通勤分の時間があるでチャレンジしていきます。（デイリーとはｗ）

３１日目のテーマは「回る」。

回転を表現するために、sin、cosを利用してそれぞれ繰り返しごとに位置を移動させて回転を表現しています。それぞれの円のスピードも違うようにするとなんだか立体的にも見えてくるようになりました。
滑り込みでの当日ギリギリセーフです！ｗ

では、ごらんあれ〜。

const num = 200;
var mawaru = [];

function setup(){
	createCanvas(500,500);
	colorMode(HSB,360,100,100,100);
	frameRate(120);
	for (var i = 0; i < num; i++) {
		mawaru[i] = new Mawaru;
	}
}

function draw(){
	background(0,40);
	for (var i = 0; i < mawaru.length; i++) {
		mawaru[i].show();
		mawaru[i].update();
	}
}
class Mawaru {
	constructor() {
		this.x = random(0,width);
		this.y = random(0,height);
		this.w = random(1,20);
		this.cnt = 0;
		this.speed = random(0.01,0.3);
		this.col = color(random(18,37),random(50,100),random(50,100),random(80,100));
		noStroke();
	}
	show(){
		fill(this.col);
		circle(this.x,this.y,this.w);
	}
	update(){
		this.x += sin(this.cnt)*this.cnt;
		this.y += cos(this.cnt)*this.cnt;
		this.cnt+= this.speed*noise(this.x,this.y);
	}
}

ではでは、さようなら〜〜〜。

なにかあればTwitterまで。