【p5.js】の練習！アニメーションのソースコード！【学習メモ】

テクノロジー

2021.03.04 2020.01.23

「白い四角」がスライドしていくようなアニメーションのソースコードです…！

ソースコード
1. 関数

ソースコード

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>

var x =0;

function setup() {
	createCanvas(480, 240);
}

function draw() {
	background(0);
	rect(x, 40, 50, 50);
	x++;
}

関数

setup()　…　最初に1回だけ実行される処理

draw() …　そのあと繰り返し実行される処理

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