疲れが癒される、素数の質量をもつ素粒子のゲーム。

コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Particle Simulation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <style>
        body { margin: 0; overflow: hidden; }
    </style>
</head>
<body>
    <script>
        let particles = [];
        const maxParticles = 100; // 最大パーティクル数
        const trailDuration = 100; // 軌跡の持続時間
        let gravity; // 重力ベクトルを宣言

        function setup() {
            createCanvas(windowWidth, windowHeight);
            gravity = createVector(0, 0.1); // 重力ベクトルを定義
            for (let i = 0; i < maxParticles; i++) {
                let mass = getRandomPrime(); // 素数を取得
                particles.push(new Particle(random(width), random(height), mass));
            }
        }

        function draw() {
            background(255, 50); // 背景を透明にして軌跡を表示
            particles.forEach(p => {
                p.update();
                p.show();
            });
        }

        function windowResized() {
            resizeCanvas(windowWidth, windowHeight); // ウィンドウのサイズが変更されたときにキャンバスを再サイズ
        }

        class Particle {
            constructor(x, y, mass) {
                this.position = createVector(x, y);
                this.velocity = p5.Vector.random2D().mult(mass * 0.1); // 速度は質量に比例
                this.mass = mass;
                this.trail = [];
                this.color = color(random(255), random(255), random(255)); // ランダムな色
            }

            update() {
                this.velocity.add(gravity); // 重力を加える
                this.position.add(this.velocity);
                this.trail.push(this.position.copy()); // 軌跡を保存

                // 軌跡の長さを制限
                if (this.trail.length > trailDuration) {
                    this.trail.shift(); // 最古の軌跡を削除
                }

                // ウィンドウの端で反射
                if (this.position.x < 0 || this.position.x > width) {
                    this.velocity.x *= -1; // X軸反射
                    this.position.x = constrain(this.position.x, 0, width); // 位置を制限
                }
                if (this.position.y < 0 || this.position.y > height) {
                    this.velocity.y *= -1; // Y軸反射
                    this.position.y = constrain(this.position.y, 0, height); // 位置を制限
                }
            }

            show() {
                // 軌跡を描画
                for (let i = 0; i < this.trail.length; i++) {
                    let alpha = map(i, 0, this.trail.length, 0, 255);
                    stroke(0, alpha);
                    strokeWeight(2);
                    point(this.trail[i].x, this.trail[i].y);
                }

                // パーティクルを描画
                fill(this.color); // ランダムな色を使用
                noStroke();
                ellipse(this.position.x, this.position.y, this.mass * 2, this.mass * 2); // 質量に基づくサイズ
            }
        }

        // 素数を生成する関数
        function getRandomPrime() {
            let num;
            do {
                num = floor(random(2, 30)); // 2から30の範囲でランダムに素数を選択
            } while (!isPrime(num));
            return num;
        }

        // 素数判定関数
        function isPrime(n) {
            if (n <= 1) return false;
            for (let i = 2; i <= sqrt(n); i++) {
                if (n % i === 0) return false;
            }
            return true;
        }
    </script>
</body>
</html>