Recursive Tree

Developer
Size
3,381 Kb
Views
38,456

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

Recursive Tree - Script Codes HTML Codes

``````<!DOCTYPE html>
<html >
<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);
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);
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);
});``````
 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.

Steven (volv) Script Codes
 Name Size A Pen by Steven 2,755 Kb Heavy Snake 6,358 Kb Weather 4,445 Kb Nested Loops 2,231 Kb Roman Numerals 2,518 Kb Midas Points 19,443 Kb Promises 2,516 Kb Pomodoro 3,539 Kb Heavy Snake - Level Editor - Dev 5,348 Kb JQuery Ajax 1,690 Kb