以下に、それぞれのコードを動作確認用のHTMLファイルとしてまとめました。それぞれのコードをコピーして、.htmlファイルとして保存することで、ブラウザで確認できます。
Ai0w.com
p5.jsとは？クリエイティブなコーディングに特化したJavaScriptライブラリで、インタラクティブなビジュア…
p5.jsは、クリエイティブなコーディングに特化したJavaScriptライブラリで、インタラクティブなビジュアルやアート、アニメーションを簡単に作成するための強力なツールで…
1. ランダム生成を利用したアート
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Art</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(400, 400);
noLoop(); // draw()を1回だけ実行
}
function draw() {
background(30);
for (let i = 0; i < 100; i++) {
fill(random(255), random(255), random(255));
ellipse(random(width), random(height), random(10, 50));
}
}
</script>
</body>
</html>
2. ノイズを使った自然なパターン
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noise Pattern</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(400, 400);
noLoop();
}
function draw() {
background(20);
noStroke();
for (let y = 0; y < height; y += 10) {
for (let x = 0; x < width; x += 10) {
let n = noise(x * 0.02, y * 0.02); // ノイズ関数
fill(n * 255);
rect(x, y, 10, 10);
}
}
}
</script>
</body>
</html>
3. インタラクティブなマウス追従アート
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Art</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0, 20); // 透明度を上げて残像効果
fill(255, 100, 150, 100);
ellipse(mouseX, mouseY, 50, 50);
}
</script>
</body>
</html>
マウスを動かすと、赤いボールが追従します。
4. 幾何学的な模様
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geometric Patterns</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(400, 400);
noLoop();
}
function draw() {
background(255);
strokeWeight(2);
for (let i = 0; i < 360; i += 10) {
let x = width / 2 + cos(radians(i)) * 100;
let y = height / 2 + sin(radians(i)) * 100;
line(width / 2, height / 2, x, y);
}
}
</script>
</body>
</html>
5. 3D表現 (WEBGL)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Art</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(200);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(100); // 立方体を描画
}
</script>
</body>
</html>
立方体が回転します。
p5.jsを活用したファイルをブラウザで開けば、あなただけのアート作品がすぐに動き出します。ぜひあなただけのオリジナル作品を試してみてください。
Ai0w.com
p5.jsとは？クリエイティブなコーディングに特化したJavaScriptライブラリで、インタラクティブなビジュア…
p5.jsは、クリエイティブなコーディングに特化したJavaScriptライブラリで、インタラクティブなビジュアルやアート、アニメーションを簡単に作成するための強力なツールで…
コメント
コメント一覧 （1件）
[…] AI0W.com p5.jsを活用したシンプルなアートの例 | AI0W.com 以下に、それぞれのコードを動作確認用のHTMLファイルとしてまとめました。それぞれのコードをコピーして、.htmlファイルとして […]