불티 움직임 시뮬레이션 (html5)

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background: #1a1a1a;
            color: #fff;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        canvas {
            background: #1a1a1a;
            border: 1px solid #333;
            margin: 20px 0;
        }
        .controls {
            background: rgba(0, 0, 0, 0.7);
            padding: 20px;
            border-radius: 10px;
            width: 380px;
        }
        .control-group {
            margin: 15px 0;
        }
        .control-group label {
            display: block;
            margin-bottom: 5px;
            color: #ffa500;
        }
        .slider-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        input[type="range"] {
            flex: 1;
            height: 10px;
            -webkit-appearance: none;
            background: #333;
            border-radius: 5px;
            outline: none;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: #ffa500;
            border-radius: 50%;
            cursor: pointer;
        }
        .value-display {
            min-width: 50px;
            text-align: center;
            background: #333;
            padding: 5px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <canvas id="sparkCanvas"></canvas>
    <div class="controls">
        <div class="control-group">
            <label>크기 배율 (Size Scale)</label>
            <div class="slider-container">
                <input type="range" id="sizeScale" min="0.5" max="3" step="0.1" value="1">
                <span class="value-display" id="sizeValue">1</span>
            </div>
        </div>
        <div class="control-group">
            <label>온도 배율 (Temperature Scale)</label>
            <div class="slider-container">
                <input type="range" id="tempScale" min="0.5" max="2" step="0.1" value="1">
                <span class="value-display" id="tempValue">1</span>
            </div>
        </div>
        <div class="control-group">
            <label>무게 배율 (Weight Scale)</label>
            <div class="slider-container">
                <input type="range" id="weightScale" min="0.5" max="2" step="0.1" value="1">
                <span class="value-display" id="weightValue">1</span>
            </div>
        </div>
        <div class="control-group">
            <label>수명 배율 (Life Scale)</label>
            <div class="slider-container">
                <input type="range" id="lifeScale" min="0.5" max="2" step="0.1" value="1">
                <span class="value-display" id="lifeValue">1</span>
            </div>
        </div>
    </div>
    <script>
        const canvas = document.getElementById('sparkCanvas');
        const ctx = canvas.getContext('2d');

        // 캔버스 크기 설정
        canvas.width = 400;
        canvas.height = 600;

        // 컨트롤 요소
        const controls = {
            sizeScale: document.getElementById('sizeScale'),
            tempScale: document.getElementById('tempScale'),
            weightScale: document.getElementById('weightScale'),
            lifeScale: document.getElementById('lifeScale')
        };

        // 값 표시 요소
        const displays = {
            sizeValue: document.getElementById('sizeValue'),
            tempValue: document.getElementById('tempValue'),
            weightValue: document.getElementById('weightValue'),
            lifeValue: document.getElementById('lifeValue')
        };

        // 컨트롤 값 업데이트 함수
        Object.keys(controls).forEach(key => {
            controls[key].addEventListener('input', (e) => {
                displays[key.replace('Scale', 'Value')].textContent = e.target.value;
            });
        });

        class Spark {
            constructor() {
                this.reset();
            }

            reset() {
                this.x = canvas.width/2 + (Math.random() * 40 - 20);
                this.y = canvas.height - 20;
                
                // 슬라이더 값을 반영한 특성 설정
                this.baseSize = Math.random() * 3 + 1;
                this.size = this.baseSize * parseFloat(controls.sizeScale.value);
                
                this.baseTemp = Math.random() * 0.5 + 0.5;
                this.temperature = this.baseTemp * parseFloat(controls.tempScale.value);
                
                this.baseWeight = Math.random() * 0.3 + 0.1;
                this.weight = this.baseWeight * parseFloat(controls.weightScale.value);
                
                this.vx = 0;
                this.vy = -2 - (this.temperature * 2);
                
                this.baseLife = 1.0;
                this.life = this.baseLife * parseFloat(controls.lifeScale.value);
                
                this.color = `rgba(255, ${150 + Math.random() * 105}, 0, ${this.life})`;
            }

            update() {
                // 현재 슬라이더 값으로 특성 업데이트
                this.size = this.baseSize * parseFloat(controls.sizeScale.value);
                this.temperature = this.baseTemp * parseFloat(controls.tempScale.value);
                this.weight = this.baseWeight * parseFloat(controls.weightScale.value);
                
                this.vx += Math.sin(Date.now() * 0.001) * 0.1 * this.weight;
                this.x += this.vx;
                this.y += this.vy * this.temperature;
                
                this.life -= 0.005 / parseFloat(controls.lifeScale.value);
                this.size *= 0.999;
                
                if (this.life <= 0 || this.y < 0 || this.x < 0 || this.x > canvas.width) {
                    this.reset();
                }
                
                this.color = `rgba(255, ${150 + Math.random() * 105}, 0, ${this.life})`;
            }

            draw() {
                ctx.beginPath();
                ctx.fillStyle = this.color;
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        const sparks = Array(50).fill().map(() => new Spark());

        function animate() {
            ctx.fillStyle = 'rgba(26, 26, 26, 0.2)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            sparks.forEach(spark => {
                spark.update();
                spark.draw();
            });

            requestAnimationFrame(animate);
        }

        animate();
    </script>
</body>
</html>