まずは、p5.jsでプログラムを実行する方法を学びましょう。
p5.jsのエディターを開く
p5.jsの公式エディターは、ブラウザ上で簡単にプログラムを書いて動かせるツールです。
まずは、p5.js Web Editor を開いてみましょう。
📌 会員登録
会員登録は必須ではありませんが、保存するには登録が必要です。[p5.js Web Editor | Sign up（会員登録）](https://editor.p5js.org/signup)ページに移動し、「Login with Google」をクリックします。これで会員登録完了です！
📌 ログイン方法
次回以降はエディタページに移動して画面右上の「Log in」をクリックし、「Login with Google」をクリックしましょう。
サンプルを動かしてみよう
エディターを開くと、最初にひな形のコードが表示されます。
そのコードを削除し、以下のコードをコピーして貼り付けましょう。
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
}
function draw() {
background(255);
for (var y = 0; y <= 1000; y = y + 500) {
for (var x = 0; x <= 1000; x = x + 500) {
noFill();
stroke(255, 147, 206);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(200, 200, 200);
}
}
}プログラムの実行
画面左上のピンク色の再生ボタン（▶）をクリックすると、プログラムが動きます。
アニメーションする立方体が画面に表示されれば成功です！
たったこれだけのコードで、3Dの動きを作れるなんてすごいですよね！
次は、自分でコードを書いてみよう！