楽しいお絵描きゲーム。
「立体的にする」ボタンを押すと、2Dで描いた線が3D空間で、描いた線の色で立体的に表示されます。立体がぐるぐると回転アニメーションします。
コードをメモ帳などのテキストエディタに貼り付け、ファイルを「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>3D Drawing 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; }
.controls { position: absolute; top: 10px; left: 10px; z-index: 10; }
.controls button { margin: 5px; }
</style>
</head>
<body>
<div class="controls">
<button onclick="setColor('red')">Red</button>
<button onclick="setColor('green')">Green</button>
<button onclick="setColor('blue')">Blue</button>
<button onclick="setColor('yellow')">Yellow</button>
<button onclick="setColor('black')">Black</button>
<button onclick="make3D()">3D</button>
</div>
<script>
let color = 'black';
let drawing = [];
let is3D = false;
function setup() {
createCanvas(windowWidth, windowHeight);
background(255);
}
function draw() {
if (is3D) {
// 3Dモードのキャンバス設定
createCanvas(windowWidth, windowHeight, WEBGL);
background(200);
// 角度を変えながら少し早く回転させる
rotateX(frameCount * 0.03);
rotateY(frameCount * 0.04);
rotateZ(frameCount * 0.02);
for (let i = 0; i < drawing.length; i++) {
let x = drawing[i][0] - windowWidth / 2;
let y = drawing[i][1] - windowHeight / 2;
let z = drawing[i][2] || 0;
let c = drawing[i][3];
fill(c);
stroke(c);
push();
translate(x, y, z);
box(10, 10, 50); // 直立する箱を描画
pop();
}
} else {
// 2Dモードでの描画
background(255);
stroke(color);
strokeWeight(5);
noFill();
beginShape();
for (let i = 0; i < drawing.length; i++) {
vertex(drawing[i][0], drawing[i][1]);
}
endShape();
}
}
function mouseDragged() {
if (!is3D) {
drawing.push([mouseX, mouseY, 0, color]);
}
}
function startDrawing() {
if (!is3D) {
drawing = [];
}
}
function stopDrawing() {
if (!is3D) {
drawing.push([mouseX, mouseY, 0, color]);
}
}
function setColor(c) {
color = c;
}
function make3D() {
is3D = !is3D;
if (is3D) {
// 3Dモード用にz座標を設定
for (let i = 0; i < drawing.length; i++) {
drawing[i][2] = random(-50, 50);
}
} else {
createCanvas(windowWidth, windowHeight); // 2Dモードに戻す
background(255);
}
}
</script>
</body>
</html>