スペースキーを押すとボールの位置、サイズ、色がランダムに再生成されます。
コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Metallic Balls with p5.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script>
// ボールの情報を格納する配列
let balls = [];
// p5.jsの初期設定
function setup() {
// ウィンドウ全体をカバーするWEBGLキャンバスを作成
createCanvas(windowWidth, windowHeight, WEBGL);
noStroke(); // ボールの縁を描画しないように設定
// 初期のボールを生成
generateBalls();
}
// ボールの情報をランダムに生成する関数
function generateBalls() {
balls = []; // 既存のボール情報をクリア
for (let i = 0; i < 10; i++) {
balls.push({
// ランダムな位置を設定
x: random(-200, 200),
y: random(-200, 200),
z: random(-200, 200),
// ランダムなサイズを設定
size: random(50, 150),
// ランダムな色を設定
color: [random(255), random(255), random(255)]
});
}
}
// p5.jsの描画ループ
function draw() {
// 背景を黒でクリア
background(0);
// シーン全体を回転させることで3D効果を出す
rotateX(frameCount * 0.01); // X軸周りに回転
rotateY(frameCount * 0.01); // Y軸周りに回転
// 環境光を設定
ambientLight(100); // 全体を均等に照らす光
// 点光源を設定
pointLight(255, 255, 255, 200, -200, 200); // 白い光をシーンの指定位置に配置
// 各ボールを描画
for (let ball of balls) {
push(); // 現在の描画状態を保存
// ボールの位置に移動
translate(ball.x, ball.y, ball.z);
// ボールの素材と光沢を設定
specularMaterial(ball.color); // ボールにメタリックな色を適用
shininess(50); // 光沢の強さを設定
// ボールを描画
sphere(ball.size); // 指定サイズの球体を描画
pop(); // 描画状態を元に戻す
}
}
// スペースキーが押されたときに呼び出される関数
function keyPressed() {
if (key === ' ') { // スペースキーが押されたか確認
generateBalls(); // ボールの情報を再生成
}
}
</script>
</body>
</html>