WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
flower
654
mambetov1237.b
Open In Editor
Publish Your Code
24 November 2024
flower for my girl
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./stil.css" /> </head> <body> <div id="controls"> <label for="complexity">Tree complexity:</label> <input type="range" id="complexity" min="1" max="12" value="8" /> </div> <canvas id="treeCanvas" width="600" height="500"></canvas> <script src="./script.js"></script> </body> </html><!-- Replace with your HTML Code (Leave empty if not needed) -->
CSS
Copy
body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #333; color: #fff; } #controls { margin-bottom: 20px; } input { width: 200px; }<!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
const canvas = document.getElementById("treeCanvas"); const ctx = canvas.getContext("2d"); const complexitySlider = document.getElementById("complexity"); complexitySlider.addEventListener("input", drawTree); function drawTree() { ctx.clearRect(0, 0, canvas.clientWidth, canvas.height); const complexity = complexitySlider.value; drawBranch(canvas.width / 2, canvas.height, -90, complexity, 100); } function drawBranch(x, y, angle, depth, length) { if (depth === 0) return; const x2 = x + Math.cos((angle * Math.PI) / 180) * length; const y2 = y + Math.sin((angle * Math.PI) / 180) * length; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x2, y2); ctx.strokeStyle = `hsl(${depth * 30}, 100%, 50%)`; ctx.lineWidth = depth * 0.6; ctx.stroke(); drawBranch(x2, y2, angle - 20, depth - 1, length * 0.7); drawBranch(x2, y2, angle + 2, depth - 1, length * 0.7); } drawTree(); /* Replace with your JS Code (Leave empty if not needed) */
