Fractal Tree
How do I make an fractal tree?
Generating h-tree. What is a fractal tree? How do you make a fractal tree? This script and codes were developed by Endre Simo on 28 November 2022, Monday.
Fractal Tree - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fractal Tree</title>
</head>
<body> <!-- Because spring is here i' have created a simple Fractal Tree - click on the canvas to generate a new tree
--> <script src="js/index.js"></script>
</body>
</html>
Fractal Tree - Script Codes JS Codes
var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
document.body.appendChild(canvas);
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var ctx = canvas.getContext('2d');
var branches = [];
var branchLength = 150,
branchWidth = 20,
branchAngle = 45,
branchSplitFactor = 0.75;
var order = 0,
maxOrder = 100;
var branchColors = Gradient("#800000","#008000",maxOrder);
init();
function init() { canvas.width = canvasWidth; canvas.height = canvasHeight; ctx.fillStyle = "white"; ctx.strokeStyle = "#800000" ctx.lineWidth = branchWidth; ctx.fillRect(0, 0, canvasWidth, canvasHeight); var trunk = {x : canvasWidth / 2, y : branchLength + 60, angle : 90 }; branches.push(trunk); ctx.beginPath(); ctx.moveTo(trunk.x, canvasHeight - 60); ctx.lineTo(trunk.x, canvasHeight - trunk.y); ctx.stroke(); drawBranches(branchAngle);
}
function drawBranches(angle) { if (angle == undefined) { angle = branchAngle; } branchWidth = branchWidth * branchSplitFactor; branchLength = branchLength * branchSplitFactor; var newBranches = []; ctx.beginPath(); ctx.lineWidth = branchWidth; for (var i=0; i < branches.length; i++) { var startPoint = branches[i]; var endPoint1 = getEndPoint(startPoint.x, startPoint.y, startPoint.angle + angle, branchLength); var endPoint2 = getEndPoint(startPoint.x, startPoint.y, startPoint.angle - angle, branchLength); ctx.moveTo(startPoint.x, canvasHeight - startPoint.y); ctx.lineTo(endPoint1.x, canvasHeight - endPoint1.y); ctx.moveTo(startPoint.x, canvasHeight - startPoint.y); ctx.lineTo(endPoint2.x, canvasHeight - endPoint2.y); endPoint1.angle = startPoint.angle + angle; endPoint2.angle = startPoint.angle - angle; newBranches.push(endPoint1); newBranches.push(endPoint2); } branches = newBranches; ctx.stroke(); if (branchLength > 10) { if (order > maxOrder) { order = maxOrder; } ctx.strokeStyle = branchColors[Math.floor(order)]; order++; } else { ctx.strokeStyle = '#008000'; } if (branchLength > 2) { window.setTimeout(drawBranches, 60); }
}
window.addEventListener('mousemove', function(e) { if (branchLength < 1) return false; //drawBranches(getAngle(e.pageX));
});
canvas.addEventListener('click', function(e) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); branches = []; branchLength = randomRange(160, 180); branchWidth = randomRange(8, 14); branchAngle = randomRange(20, 60); branchSplitFactor = randomDecimalRange(0.70, 0.77); order = 0; maxOrder = 100; branchColors = Gradient("#800000","#008000",maxOrder); init();
});
function getEndPoint(x, y, angle, length) { return { x : x + length * Math.cos(angle * Math.PI / 180), y : y + length * Math.sin(angle * Math.PI / 180) }
}
function getAngle(x){ return parseInt(1 + 89 * x /canvasWidth);
}
function randomRange(min, max) { return ~~(Math.random() * (max - min + 1)) + min
}
function randomDecimalRange(min, max) { return Math.random() * (max - min) + min
}
function Gradient(stop1_hex, stop2_hex, num){ // stop1 and stop2 must be strings that rep hex color vals. stop1_hex = stop1_hex.replace("#","").toUpperCase(); stop2_hex = stop2_hex.replace("#","").toUpperCase(); var stops = new Array(num), stop1_rgb = {r:0,g:0,b:0}, stop2_rgb = {r:0,g:0,b:0}, steps = {r:0,g:0,b:0}, i,r,g,b; //parse the two input strings into rgb values stop1_rgb.r = parseInt(stop1_hex.substr(0,2),16); stop1_rgb.g = parseInt(stop1_hex.substr(2,2),16); stop1_rgb.b = parseInt(stop1_hex.substr(4,2),16); stop2_rgb.r = parseInt(stop2_hex.substr(0,2),16); stop2_rgb.g = parseInt(stop2_hex.substr(2,2),16); stop2_rgb.b = parseInt(stop2_hex.substr(4,2),16); steps.r = (stop2_rgb.r - stop1_rgb.r)/num; steps.g = (stop2_rgb.g - stop1_rgb.g)/num; steps.b = (stop2_rgb.b - stop1_rgb.b)/num; stops[0] = "#"+stop1_hex; for(i=1; i<num-1; i++){ r = Math.round(stop1_rgb.r+(i*steps.r)).toString(16); g = Math.round(stop1_rgb.g+(i*steps.g)).toString(16); b = Math.round(stop1_rgb.b+(i*steps.b)).toString(16); r = (r.length != 2)?"0"+r:r; g = (g.length != 2)?"0"+g:g; b = (b.length != 2)?"0"+b:b; stops[i] = "#"+(r+g+b).toUpperCase(); } stops[num-1] = "#"+stop2_hex; return stops;
}
Developer | Endre Simo |
Username | esimov |
Uploaded | November 28, 2022 |
Rating | 3 |
Size | 2,790 Kb |
Views | 52,624 |
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!
Name | Size |
DeJong attractor | 6,155 Kb |
Navier Stoke Fluid Simulation | 8,584 Kb |
Minecraft map generator | 7,723 Kb |
Perlin Noise based Minecraft Tunnel | 9,853 Kb |
Growing tree | 5,833 Kb |
Landscape | 3,792 Kb |
Perlin metaball | 7,396 Kb |
Flipping Clock | 3,804 Kb |
Worley noise cellular pattern | 8,070 Kb |
404 canvas page | 7,078 Kb |
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!
Name | Username | Size |
Draggable directive | YahyaKacem | 2,277 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
Search field | Jamesbarnett | 2,100 Kb |
Spin | Elalemanyo | 8,262 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
Bubble animation | Ftabor | 6,565 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
A Pen by Bryan | Brydave | 2,286 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!