Zenn
🐣

JavaScript初心者のためのp5.js入門

2024/02/03に公開
JavaScript
p5.js
tech

p5.jsとは

p5.jsはJavaScripのライブラリです。
Three.jsなどのライブラリとの違いとしては、ブラウザ上で簡単に動かせる点が大きいかなと思います。
また、Three.jsなどのライブラリよりも少ない記述でアニメーションや幾何学的な模様を描けたりします。
わたしは主にジェネラティブアートでその存在を知りました。

以下1分くらいで読めますので是非読んでみてください📕

公式ドキュメント

こちらが公式ドキュメントです。

エディターがあるのでブラウザで簡単にコードが書けます📝

Referenceを見ながらコードをコピペしてみると色々な実装ができることがわかります😊

基本的な記法

📝最低限必要な記述は以下の2つの関数です。
1️⃣ set up関数・・・1度だけ描画させる関数
2️⃣ draw関数・・・繰り返し描画する関数

function setup() {
  createCanvas(400, 400);
  
}

function draw() {
  background(0);
  fill(255);
  circle(200,200,20);
}

1 set up関数でcanvasを設定する

・まずはset up関数で初期化します。
set up関数内で記述されたコードは1度のみ描画されます。
🔹createCanvasは描画する範囲を指定しています。

function setup() {
  createCanvas(400, 400); //canvasサイズを指定
}

2 draw 関数で描画する

🔸円を描画してみよう
①background関数で背景色を指定します
⇒ 色はデフォルトでRGB指定
②fill関数で円を塗りつぶしたい色を指定します
③circle関数で円を描画します
⇒ circle(X座標,Y座標,円の大きさ)

function draw() {
  background(0);　//背景色を指定
  fill(255);　//塗りつぶしの色を指定
  circle(200,200,20);　//円を指定
}

3 millis()を使って連続した描画で円を動かしてみよう

draw関数の中ではフレームごとに描画してくれます。
その性質を利用して描画する位置をずらしてアニメーションさせてみましょう。
⭐️millis()
⇒ スケッチを開始して(set up（）が呼び出されて) からのミリ秒数 (1000分の1秒) を返します。

function draw() {
  let s = millis() / 1000;// millis() はミリ秒単位で現在の時間を返します
  // 1000で割って秒単位に変換し、変数sに代入します
}

🔸引数に変数を代入して座標軸を変化させよう

function draw() {
  background(0);
  fill(255);
  
  let s = millis() / 1000;

  let x = s * width; // 円のX座標を左から右へ
  let y = height / 2; // 画面の中央のy座標を取得

  circle(x, y, 20); // circleを描画
}

なんか急に画質が昭和になりましたけど、出来ましたね✨

最後に

p5.jsは環境構築の必要がなく、ブラウザで描画出来るのでJavaScriptライブラリで遊んでみたい方にはとてもお勧めのライブラリです💡

是非是非遊んでみてくださいね〜😇

Discussion