この記事はウェブクルーAdvent Calendar 2023 9日目の記事です。
昨日は@youngjae_wonさんの「認証基盤（SAML）について」でした。
はじめに
今回は、p5.jsというライブラリを試してみました。
p5.jsとは
p5.jsは、JavaScriptを使用してクリエイティブコーディングができるライブラリです。
https://p5js.org/
ビジュアルプログラミング言語であるProcessingをJavascriptに移植したライブラリで、ラインアニメーション、パーティクルの実装など複雑なグラフィックスや表現の実装に役立ちます。導入も簡単で、すぐに使用することができます。
すぐに触ってみたい方は下記リンクへ
https://editor.p5js.org/
準備
HTMLを作成
touch index.html
導入
本記事ではCDNを利用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- p5.js ライブラリの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
</head>
<body>
</body>
</html>
基本機能
setupとdraw関数
p5.jsには、setup() と呼ばれる関数とdraw()という関数があります。
setup()は、最初に一度だけ呼び出され、基本的には初期設定を行います。
draw() は、繰り返し呼ばれ背景の設定や図形の描画など、連続的な処理を担当します。
// 初期化処理（最初に1回だけ実行）
function setup(){
}
// 描画処理（繰り返し実行）
function draw() {
}
描画してみる
setupでcanvasを生成後、drawで四角形を描画する例を記載しました。
実行すると、canvas内に四角形が描画されているはずです。
function setup() {
createCanvas(400, 400); // canvasを生成
}
function draw() {
background(255); // 背景描画
rect(200, 200, 80, 80); // 四角形作成。座標によって位置を指定します。
}
https://p5js.org/reference/ からいろんな機能を利用して描画を試してみてください。
サンプルプログラム
p5.jsの便利な機能を使用してマウスを動かすとアニメーションする簡易サンプルプログラムを用意しました。
作成したHTMLファイルに下記に記載したコードを反映後、ブラウザで開いて試してみてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- p5.js ライブラリの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
</head>
<body>
<script>
// 変数の宣言
let displayWidth, displayHeight;
const step = 30; // グリッドのサイズ
const span = 100; // 色を変更する範囲の半径
// 初期化処理（最初に1回だけ実行）
function setup() {
// 画面の幅と高さを取得
displayWidth = windowWidth;
displayHeight = windowHeight;
// キャンバスの作成
createCanvas(displayWidth, displayHeight);
strokeWeight(4); // 描かれる線の太さ
stroke(1); // 描かれる線の色（灰色）
}
// 描画処理（繰り返し実行、毎フレーム呼ばれる）
function draw() {
background(0); // キャンバスを黒にする
const maxDiameter = 10; // 四角形の最大直径
// グリッド上に四角形を描画
for (let i = 0; i < displayWidth; i += step) {
for (let j = 0; j < displayHeight; j += step) {
drawRect(i, j, maxDiameter);
}
}
}
// 四角形を描画する関数
function drawRect(x, y, d) {
let uX, uY;
// タッチがある場合はタッチ座標を使用し、ない場合はマウス座標を使用
if (touches.length > 0) {
uX = touches[0].x;
uY = touches[0].y;
} else {
uX = mouseX;
uY = mouseY;
}
// 座標 (x, y) からマウスまたはタッチ座標までの距離を計算
const hypotenuse = dist(x, y, uX, uY);
// 距離が範囲内の場合
if (hypotenuse <= span) {
const opacity = 800 * hypotenuse / span; // 透明度
// RGBのランダムな値
const randomR = random(255);
const randomG = random(255);
const randomB = random(255);
const coef = random(1, 1.5); // 大きさのランダムな倍率
// 四角形を描画
fill(randomR, randomG, randomB, opacity);
rect(x, y, d * coef, d * coef);
} else {
// 距離が範囲外の場合は半透明の白い四角形を描画
fill(255, 100);
rect(x, y, d, d);
}
}
</script>
</body>
</html>
おわり
業務で利用できそうな機会は今の所ないのですが、p5.jsに簡単に触れてみました。
明日は@wc_sangenさんの「ZIOのスタックセーフの注意点」になります。
お楽しみにしてください。