WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
flower
819
mambetov1237.b
Open In Editor
Publish Your Code
Recommended
22 October 2024
purpur flower
7 August 2024
Animated flowers
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) */
