Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Fractal Tree (Interactive)
ID	5247054390542336
Created	3 years ago, 1643120532165
Updated	3 years ago, 1643122254651
Code	/ Fractal Tree (Interactive) Gray Wolf, January 2022 Just playing around with some recursion :) Move the mouse to alter the tree/branch angles When you start to learn fractals the tree is likely one of the first ones you'll encounter. @Subscribe Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 / textAlign(CENTER, CENTER); textSize(26); strokeCap(PROJECT); var over = false; //define the tree object/properties var tree = { x: 300, y: 490, len: 150, depth: 10, angle: -90, rot: 70, branches: [], colors: { from: color(91, 217, 108), to: color(125, 97, 37) } }; //the recursive function (will be called from within itself) var addBranch = function(x, y, depth, angle, len) { //if the depth is zero then end the recursion if(depth === 0) { return; } //calculate the end points of the branch var x2 = x + cos(angle) * len; var y2 = y + sin(angle) * len; //add the new branch to the tree tree.branches.push({ x1: x, y1: y, x2: x2, y2: y2, depth: depth, color: lerpColor(tree.colors.from, tree.colors.to, map(depth, 1, tree.depth, 0, 1)) }); //reduce the depth (extremely important to end your recursion) depth--; //call this function recursively addBranch(x2, y2, depth, angle - tree.rot, len * 0.67); addBranch(x2, y2, depth, angle + tree.rot, len * 0.67); }; //call the recusive function addBranch(tree.x, tree.y, tree.depth, tree.angle, tree.len); draw = function() { background(230, 226, 202); //shadow under tree noStroke(); fill(50, 30); ellipse(tree.x, tree.y + 5, 200, 35); //draw the trees for(var i = 0; i < tree.branches.length; i++) { var branch = tree.branches[i]; //set the color of the branch stroke(branch.color); //set the branch thickness based on the depth strokeWeight(1 + branch.depth); //draw the branch line(branch.x1, branch.y1, branch.x2, branch.y2); } //instructions fill(50, 50); text("move the mouse to change\nthe rotation of the tree/branches", 300, 555); //reset the tree smoothly if mouse isn't over the canvas if(!over) { tree.angle = lerp(tree.angle, -90, 0.1); tree.rot = lerp(tree.rot, 70, 0.1); tree.branches.length = 0; addBranch(tree.x, tree.y, tree.depth, tree.angle, tree.len); if(round(tree.angle) === -90 && round(tree.rot) === 70) { over = true; noLoop(); } } }; mouseMoved = function() { var moved = false; if(mouseX !== pmouseX) { tree.angle = constrain(map(mouseX, 100, width - 100, -110, -70), -110, -70); moved = true; } if(mouseY !== pmouseY) { tree.rot = constrain(map(mouseY, 100, height - 100, 0, 90), 0, 90); moved = true; } if(moved) { tree.branches.length = 0; addBranch(tree.x, tree.y, tree.depth, tree.angle, tree.len); over = true; loop(); } }; mouseOut = function() { over = false; };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMPosIWpCQw
Votes	165
Spin-Offs	12
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739378153476
Updated	10 months ago, 1739378161424
Source Deleted	unknown