|
<!DOCTYPE html> |
|
<html lang="ja"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>3D Cosmic Particle Simulation</title> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/p5.easycam@1.0.11/p5.easycam.min.js"></script> |
|
</head> |
|
<body style="margin:0; overflow:hidden;"> |
|
<script> |
|
|
|
let fish = []; |
|
const numFish = 300; |
|
|
|
function setup() { |
|
createCanvas(800, 600); |
|
for (let i = 0; i < numFish; i++) { |
|
fish.push(new Fish()); |
|
} |
|
} |
|
|
|
function draw() { |
|
background(10, 50, 100); |
|
|
|
for (let f of fish) { |
|
f.update(); |
|
f.show(); |
|
} |
|
} |
|
|
|
class Fish { |
|
constructor() { |
|
this.position = createVector(random(width), random(height)); |
|
this.angle = random(TWO_PI); |
|
this.speed = random(1, 2); |
|
} |
|
|
|
update() { |
|
this.angle += random(-0.03, 0.03); |
|
|
|
let vx = cos(this.angle) * this.speed; |
|
let vy = sin(this.angle) * this.speed; |
|
|
|
this.position.x += vx; |
|
this.position.y += vy; |
|
|
|
let margin = 50; |
|
if (this.position.x < margin || this.position.x > width - margin) { |
|
this.angle = PI - this.angle; |
|
} |
|
if (this.position.y < margin || this.position.y > height - margin) { |
|
this.angle = -this.angle; |
|
} |
|
} |
|
|
|
show() { |
|
push(); |
|
translate(this.position.x, this.position.y); |
|
rotate(this.angle); |
|
fill(200, 150, 50); |
|
noStroke(); |
|
ellipse(0, 0, 8, 4); |
|
pop(); |
|
} |
|
} |
|
|
|
|
|
</script> |
|
</body> |
|
</html> |
|
|
