Iterative Function Tree

Developer
Tristan
Size
2,429 Kb
Views
26,312
  1. Iterative Function Tree Previews
  2. Iterative Function Tree HTML Codes
  3. Iterative Function Tree CSS Codes
  4. Iterative Function Tree JS Codes

How do I make an iterative function tree?

Added New Tree button.. What is a iterative function tree? How do you make a iterative function tree? This script and codes were developed by Tristan on 25 August 2022, Thursday.

Iterative Function Tree Previews
IQ Test

Iterative Function Tree - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Iterative Function Tree</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button id="refresh">New Tree</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Iterative Function Tree - Script Codes CSS Codes

* { margin: 0; padding: 0; outline: 0; }
body { background: #222; }
#refresh{position:absolute;margin:10px}

Iterative Function Tree - Script Codes JS Codes

var canvas, ctx;
var pi = Math.PI;
var wWidth = window.innerWidth - 10, wHeight = window.innerHeight - 10, wHalfWidth = wWidth / 2;
var branchLength = wHeight/2.5, branchNodes = 6, maxDistance = 4;
var colours = [ '#604a11', '#8f8919', '#4b7808', '#96ad14', '#cfef1b' ];
var tree = {};
function startup(){ doInit(); doTree();
}
function doInit(){ canvas = document.createElement( 'canvas' ); canvas.width = wWidth; canvas.height = wHeight; ctx = canvas.getContext( '2d' ); document.body.appendChild( canvas );
}
function doTree(){	x1 = wHalfWidth; y1 = wHeight;	x2 = wHalfWidth; y2 = wHeight - branchLength;	tree.trunk = new branchType( x1, y1, x2, y2, new Array(), 0, colours[0] );	line( tree.trunk );	tree.trunk.branch = doBranches( tree.trunk );
}
function doBranches( rootNode ){	var distance = rootNode.distance + 1;	if( distance > maxDistance ){ return false };	var newBranches = new Array();	var x1 = rootNode.x2;	var y1 = rootNode.y2;	for( var i = 0; i < branchNodes; i++ ){	var angle = Math.random() * pi + pi;	var x2 = x1 + Math.cos( angle ) * branchLength / (distance + 1);	var y2 = y1 + Math.sin( angle ) * branchLength / (distance + 1);	newBranches[i] = new branchType( x1, y1, x2, y2, new Array(), distance, colours[distance] );	line( newBranches[i] );	newBranches[i].branch = doBranches( newBranches[i] );	}	return newBranches;
}
function line( node, colour ){	//paths	ctx.beginPath();	ctx.moveTo( node.x1, node.y1 );	ctx.lineTo( node.x2, node.y2 );	ctx.closePath();	//style	ctx.lineCap = 'round';	ctx.lineJoin = 'round';	ctx.strokeStyle = node.colour;	ctx.lineWidth = maxDistance*3 - node.distance*5;	//draw	ctx.stroke();
}
function branchType( x1, y1, x2, y2, branch, distance, colour ){	this.x1 = x1; this.y1 = y1;	this.x2 = x2; this.y2 = y2;	this.branch = branch;	this.distance = distance;	this.colour = colour;
}
$(document).ready( function(){ startup(); $('#refresh').click( function(){ ctx.clearRect(0,0,wWidth,wHeight); tree = {}; doTree(); });
});
Iterative Function Tree - Script Codes
Iterative Function Tree - Script Codes
Home Page Home
Developer Tristan
Username sinthetyc
Uploaded August 25, 2022
Rating 3
Size 2,429 Kb
Views 26,312
Do you need developer help for Iterative Function 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!

Tristan (sinthetyc) Script Codes
Name
Line Segment Intersection
Perspective
Hovering a Hexagon
Higgs-Boson
Light rays
Particle Interaction
Geese
Lightrays v2
Pink Ribbon
A Better Colour Picker
Create amazing sales emails 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!