この記事では、p5.js を使って「簡単な図形の描画」と「背景色の虹色アニメーション」を同時に体験するサンプルを紹介します。
この記事のコードを動かすと以下のようなアニメーションができあがります
このサンプルでは、基本図形の描画と色の指定について説明します。
以下のディレクトリ構成でプロジェクトを作成してください。
basic-shape/
├── index.html
└── sketch.js以下指定の各ファイルを生成してください。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chapter 1 - Basic Shapes & Colorful Art</title>
<!-- p5.js をCDNから読み込み -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>
<!-- 実装したスクリプトを読み込み -->
<script src="sketch.js"></script>
</head>
<body>
<!-- 特に要素を置かなくてもOK。p5.jsが自動的に<canvas>を生成します。 -->
</body>
</html><script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>- インターネット経由で p5.js を読み込みます。バージョン番号は適宜変更可能。
-
<script src="sketch.js"></script>- 自作スクリプト
sketch.jsを参照し、描画処理を実行します。
- 自作スクリプト
-
<body>タグ内は空でもOK。- p5.js が自動的に
<canvas>要素を追加し、その上に描画を行います。
- p5.js が自動的に
メインで動作するJavaScriptコードを作成します。
JavaScript
let hue = 0; // 背景色を変化させるための色相(Hue)
function setup() {
// キャンバスを 400×300 で作成
createCanvas(400, 300);
// HSB モードで色を扱う (色相0~359, 彩度/明度0~100)
colorMode(HSB, 360, 100, 100);
}
function draw() {
// 背景色: hue を元に虹色に変化 (彩度=100, 明度=100)
background(hue, 100, 100);
// hue を 1 ずつ増やし、0~359 でループ
hue = (hue + 1) % 360;
// --- 以下、基本図形をいくつか描画 ---
// 1) 円 (ellipse)
fill(0, 100, 100); // 塗り色: 赤 (色相0)
ellipse(100, 150, 80, 80);
// 2) 長方形 (rect)
fill(120, 100, 100); // 緑 (色相120)
rect(200, 110, 80, 80);
// 3) 線 (line)
stroke(240, 100, 100); // 線色: 青 (色相240)
strokeWeight(4);
line(50, 50, 350, 250);
// 4) ポリゴン (triangle)
noStroke(); // 線を消して塗りのみ
fill(60, 100, 100); // 黄 (色相60)
triangle(300, 50, 350, 100, 250, 100);
// 5) テキスト (text)
fill(0, 0, 0); // 黒
textSize(16);
text("Hello, p5.js!", 20, 280);
}hue変数で色相を管理し、draw()内で(hue + 1) % 360と更新し続けることで背景色が虹色に変化しますsetup()は起動時に1回だけ呼ばれます。createCanvas()で描画領域を作成、colorMode(HSB)で色の指定を HSB ベースにします。
draw()は毎フレーム呼ばれます。background()で前フレームを消去した上で図形を描画します。
- ローカルで
index.htmlを開く- ダブルクリックや Chrome へのドラッグ＆ドロップなどでOK。
- 背景が虹色にアニメーションしながら、円や四角が描画されていれば成功。
- p5.js の基本構造：
setup()：起動時1回だけ実行draw()：毎フレーム実行
- HSB モードで色相（Hue）を変化させることにより、簡単に虹色アニメーションを実現しています。
