Recursive Tree

Developer
Steven
Size
3,381 Kb
Views
38,456
  1. Recursive Tree Previews
  2. Recursive Tree HTML Codes
  3. Recursive Tree CSS Codes
  4. Recursive Tree JS Codes

How do I make an recursive tree?

What is a recursive tree? How do you make a recursive tree? This script and codes were developed by Steven on 31 July 2022, Sunday.

Recursive Tree Previews
IQ Test

Recursive Tree - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Recursive Tree</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div id="gameContainer"> <canvas id="myCanvas">Error - No Support</canvas> </div> <div id="controls"> <button id="btnClear">Clear</button> <button id="btnDraw">Draw</button> <button id="btnDraw2">Draw 2</button> <ol style="list-style: none; margin-left: -54px"> <li>R - Clear canvas</li> <li>Space/Click - Draw Branches</li> <li>3 Branches, 7 Iterations</li> <li>Delay for illustration</li> </orl> </div>
</div>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Recursive Tree - Script Codes CSS Codes

#container { text-align: center; margin: 0px 10%;
}
#myCanvas { margin-top: 10px;
}
#controls { background: #c0c0c0; border-radius: 50px; padding: 10px; margin: 20px; transition: .4s;
}
#controls:hover { box-shadow: 0px 0px 1px 1px #0000ff;
}
#btnClear, #btnDraw, #btnDraw2 { width: 30%; height: 5vh; font-size: large;
}

Recursive Tree - Script Codes JS Codes

// (startObj, length, ctx, genMax, genCur, angle, branches)
function drawTree() { doTree({ x: canvas.width / 2, y: canvas.height }, canvas.height * 0.2, ctx, 7, 0, 0, 3)
}
setTimeout(drawTree, 500);
setTimeout(drawTree, 1000);
setTimeout(doLeaf, 1500);
var startWidth = 10;
var leafScale = 0.25;
var rightAngleSeed = 20;
var leftAngleSeed = 15;
var lengthReductFactor = 0.77;
var widthReductFactor = 0.65;
var leafs = [];
var leafColours = [{ fill: "rgba(143,76,54, 1)", line: "rgba(0,0,0, .3)"
}, { fill: "rgba(168,96,48, 1)", line: "rgba(0,0,0, .3)"
}, { fill: "rgba(120,144,72, 1)", line: "rgba(0,0,0, .3)"
}, { fill: "rgba(96,120,48, 1)", line: "rgba(0,0,0, .3)"
}, { fill: "rgba(72,96,24, 1)", line: "rgba(0,0,0, .3)"
}, { fill: "limegreen", line: "green"
}];
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth * 0.7;
canvas.height = window.innerHeight * 0.7;
var grd = ctx.createLinearGradient(canvas.width / 2, canvas.height, canvas.width / 2, 0);
grd.addColorStop(0, "#669933");
grd.addColorStop(0.25, "#669933");
grd.addColorStop(0.3, "deepskyblue");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "saddlebrown";
function drawLine(start, length, deg, ctx) { var endPoint = { x: start.x - length * Math.cos(degToRad(deg + 90)), y: start.y - length * Math.sin(degToRad(deg + 90)) } ctx.beginPath(); ctx.moveTo(start.x, start.y); ctx.lineTo(endPoint.x, endPoint.y); ctx.stroke(); return endPoint;
}
function degToRad(deg) { return deg * Math.PI / 180;
}
function getRndRange(num) { return Math.random() * (num * 1.5 - num * 0.5) + num * 0.5;
}
function doTree(start, length, ctx, genMax, genCur, angle, branches) { var endPoint = []; if (genCur === 0) { //Initial Case ctx.lineWidth = startWidth; endPoint = drawLine(start, length, angle, ctx); doTree(endPoint, length, ctx, genMax, genCur + 1, angle, branches); } else if (genCur === genMax) { // Stop at somepoint leafs.push(start); // Record endpoints for leafs } else { for (var i = 0; i < branches; i++) { var goRight = getRndRange(angle + rightAngleSeed) var goLeft = getRndRange(angle - leftAngleSeed) var nextAngle = (Math.round(Math.random())) ? goRight : goLeft; // 50 50 chance var nextLength = getRndRange(length * lengthReductFactor); ctx.lineWidth = startWidth * Math.pow(widthReductFactor, genCur); endPoint = drawLine(start, nextLength, nextAngle, ctx); doTree(endPoint, nextLength, ctx, genMax, genCur + 1, nextAngle, branches); } }
}
function doLeaf() { leafs.forEach(function(curLeaf) { // For each endpoint for (var i = 0; i < ((Math.random() * 10) + 1); i++) { // 1-10 leaves per endpoint var rndCol = Math.floor(Math.random() * leafColours.length); var rndAngle = Math.random() * 360; drawLeaf(curLeaf.x, curLeaf.y, rndAngle, leafColours[rndCol].fill, leafColours[rndCol].line) } }); leafs = [];
}
function drawLeaf(x, y, angle, fillCol, lineCol) { ctx.save(); ctx.translate(x, y) // Move origin to leaf ctx.rotate(degToRad(angle)) // Rotate around origin ctx.beginPath(); ctx.moveTo(0, 0); // Remember origin is wherever the leaf is ctx.bezierCurveTo(50 * leafScale, -60 * leafScale, -20 * leafScale, -70 * leafScale, 0, 0); //Leaf Shape ish ctx.closePath(); ctx.lineWidth = 1; ctx.fillStyle = fillCol; ctx.fill(); ctx.strokeStyle = lineCol; ctx.stroke(); ctx.restore();
}
document.addEventListener("keydown", function(e) { switch (e.keyCode) { case 32: // Space - Draw Tree drawTree(); setTimeout(doLeaf, 200); break; case 82: // r - Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height); break; }
});
document.getElementById("myCanvas").addEventListener("click", function() { drawTree(); setTimeout(doLeaf, 200);
});
document.getElementById("btnClear").addEventListener("click", function() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
});
document.getElementById("btnDraw").addEventListener("click", function() { drawTree(); setTimeout(doLeaf, 200);
});
document.getElementById("btnDraw2").addEventListener("click", function() { doTree({ x: canvas.width / 4, y: canvas.height - 100 }, canvas.height * 0.05, ctx, 7, 0, 0, 3) setTimeout(doLeaf, 200);
});
Recursive Tree - Script Codes
Recursive Tree - Script Codes
Home Page Home
Developer Steven
Username volv
Uploaded July 31, 2022
Rating 3
Size 3,381 Kb
Views 38,456
Do you need developer help for Recursive Tree?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Steven (volv) Script Codes
Name
Weather
Midas Gift Rolls - Updating
Roman Numerals
Heavy Snake
Midas - Total Multi
JSRange
Beer Event - Remaining Rewards
Closure Example
Nested Loops
Midas Odds
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!