프랙탈 트리 생성기 - 슬라이더 포함

다음은 재귀를 사용하여 프랙탈 트리를 그리는 HTML/CSS/JS 코드입니다. 브라우저에서 슬라이더로 트리의 각도와 깊이를 조절할 수 있습니다. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fractal Tree</title> <style> body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #1e1e1e; color: #fff; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } h1 { margin: 0 0 10px; font-size: 1.5rem; } .controls { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center; } .control-group { display: flex; align-items: center; gap: 8px; } label { font-size: 0.9rem; } input[type="range"] { width: 150px; } canvas { border: 1px solid #444; background: #111; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); } </style> </head> <body> <h1>🌳 Fractal Tree</h1> <div class="controls"> <div class="control-group"> <label for="angleSlider">Angle: <span id="angleValue">30°</span></label> <input type="range" id="angleSlider" min="0" max="90" value="30" step="1"> </div> <div class="control-group"> <label for="depthSlider">Depth: <span id="depthValue">10</span></label> <input type="range" id="depthSlider" min="1" max="14" value="10" step="1"> </div> </div> <canvas id="canvas" width="800" height="600"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const angleSlider = document.getElementById('angleSlider'); const depthSlider = document.getElementById('depthSlider'); const angleValue = document.getElementById('angleValue'); const depthValue = document.getElementById('depthValue'); let angle = 30; let depth = 10; function drawTree(x, y, len, angleDeg, currentDepth) { if (currentDepth === 0) return; // Convert angle to radians const rad = (angleDeg * Math.PI) / 180; // End point of the branch const endX = x + len * Math.sin(rad); const endY = y - len * Math.cos(rad); // Draw the branch ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(endX, endY); ctx.stroke(); // Recursively draw left and right branches drawTree(endX, endY, len * 0.7, angleDeg + angle, currentDepth - 1); drawTree(endX, endY, len * 0.7, angleDeg - angle, currentDepth - 1); } function render() { // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Set line style ctx.strokeStyle = '#8BC34A'; ctx.lineWidth = 2; ctx.lineCap = 'round'; // Start from bottom center const startX = canvas.width / 2; const startY = canvas.height - 20; const initialLen = 120; // Draw the tree drawTree(startX, startY, initialLen, 0, depth); } // Event listeners angleSlider.addEventListener('input', (e) => { angle = parseInt(e.target.value); angleValue.textContent = angle + '°'; render(); }); depthSlider.addEventListener('input', (e) => { depth = parseInt(e.target.value); depthValue.textContent = depth; render(); }); // Initial render render(); </script> </body> </html> ``` 이 코드는 캔버스에 재귀적으로 분기하는 트리를 그립니다. 슬라이더를 조정하면 각도(분기 사이의 각도)와 깊이(재귀 레벨)가 실시간으로 변경됩니다. 트리의 색상, 두께, 초기 길이 등을 필요에 따라 수정할 수 있습니다.