【p5.js】の練習!「乱数」を使った「アニメーション」のソースコード!【学習メモ】

Technology
様々な大きさの「〇」をランダムに表示させて、アニメーションっぽくしています!

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>p5.js practice</title>
</head>
<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.8/p5.min.js"></script>
	<script src="myscript.js"></script>
</body>
</html>

 

JavaScript

var x, y, r;

function setup() {
	createCanvas(480, 240);
	noStroke();
	background('skyblue');
}

function draw() {
	x = random(width);
	y = random(height);
	if (random() > 0.9) {
		r = random(50, 80);
	} else {
		r = random(10, 30);
	}
	fill(255, 255, 255, random(30, 250));
	ellipse(x, y, r, r);
}

 

【p5.js】の練習!アニメーションのソースコード!【学習メモ】
「白い四角」がスライドしていくようなアニメーションのソースコードです…! ソースコード HTML  <!DOCTYPE html><html lang="ja"><head>&...

 

おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!
「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました