Cloud chamber simulation using Claude Sonnet 3.5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloud Chamber Simulation (p5.js)</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        #controls {
            margin-top: 20px;
        }
        .slider-container {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>Cloud Chamber Simulation</h1>
    <div id="particleCount">Particles detected: 0</div>
    <div id="particlesPerSecond">Particles per second: 0</div>
    <div id="controls">
        <div class="slider-container">
            <label for="particleSlider">Particle Rate:</label>
            <input type="range" id="particleSlider" min="1" max="10" value="5" step="1">
        </div>
        <div class="slider-container">
            <label for="speedSlider">Animation Speed:</label>
            <input type="range" id="speedSlider" min="1" max="100" value="50" step="1">
        </div>
    </div>
    <script>
        let particles = [];
        let particleCount = 0;
        let particlesPerSecond = 0;
        let lastSecondCount = 0;
        let particleSlider, speedSlider;
        let animationSpeed = 1;

        function setup() {
            createCanvas(800, 600);
            particleSlider = select('#particleSlider');
            speedSlider = select('#speedSlider');
            setInterval(updateParticlesPerSecond, 1000);
        }

        function draw() {
            background(0, 25);
            animationSpeed = map(speedSlider.value(), 1, 100, 0.1, 2);

            for (let i = particles.length - 1; i >= 0; i--) {
                if (particles[i].update()) {
                    particles[i].display();
                } else {
                    particles.splice(i, 1);
                }
            }

            for (let i = 0; i < particleSlider.value(); i++) {
                if (random(1) < 0.2) {
                    createParticle();
                }
            }

            updateParticleCount();
        }

        function createParticle() {
            particles.push(new Particle());
            particleCount++;
            lastSecondCount++;
        }

        function updateParticleCount() {
            select('#particleCount').html(`Particles detected: ${particleCount}`);
        }

        function updateParticlesPerSecond() {
            particlesPerSecond = lastSecondCount;
            lastSecondCount = 0;
            select('#particlesPerSecond').html(`Particles per second: ${particlesPerSecond}`);
        }

        class Particle {
            constructor() {
                this.x = random(width);
                this.y = random(height);
                this.length = random(50, 150);
                this.angle = random(TWO_PI);
                this.opacity = 255;
                this.lifespan = random(1, 2); // 1-2 seconds lifespan
                this.width = random(1, 3);
                this.curvePoints = [];
                for (let i = 0; i < 5; i++) {
                    this.curvePoints.push({
                        x: random(-20, 20),
                        y: random(-20, 20)
                    });
                }
                this.shiftSpeed = random(0.2, 0.5);
                this.shiftAngle = random(TWO_PI);
                this.age = 0;
            }

            update() {
                this.age += deltaTime / 1000 * animationSpeed; // Convert to seconds and apply animation speed
                this.opacity = map(this.age, 0, this.lifespan, 255, 0);

                // Shift the entire line
                let shiftAmount = this.shiftSpeed * animationSpeed;
                this.x += cos(this.shiftAngle) * shiftAmount;
                this.y += sin(this.shiftAngle) * shiftAmount;

                return this.age < this.lifespan;
            }

            display() {
                push();
                stroke(255, this.opacity);
                strokeWeight(this.width);
                noFill();
                beginShape();
                curveVertex(this.x, this.y);
                curveVertex(this.x, this.y);
                for (let i = 0; i < this.curvePoints.length; i++) {
                    let px = this.x + cos(this.angle) * this.length * (i + 1) / this.curvePoints.length + this.curvePoints[i].x;
                    let py = this.y + sin(this.angle) * this.length * (i + 1) / this.curvePoints.length + this.curvePoints[i].y;
                    curveVertex(px, py);
                }
                let endX = this.x + cos(this.angle) * this.length;
                let endY = this.y + sin(this.angle) * this.length;
                curveVertex(endX, endY);
                curveVertex(endX, endY);
                endShape();
                pop();
            }
        }
    </script>
</body>
</html>