4.4 7 Make A Tree Codehs

4.4 7 make a tree codehs is a popular exercise in the CodeHS curriculum that challenges students to draw a simple tree using JavaScript graphics on the HTML5 canvas. The task combines basic programming concepts—loops, conditionals, and functions—with an introduction to recursion, a powerful technique for creating natural‑looking branching structures. In this article we will walk through the problem statement, break down the required components, provide a complete, commented solution, and discuss ways to extend the project for deeper learning. Whether you are a beginner trying to grasp recursion or an instructor looking for a clear teaching example, this guide will give you the knowledge and confidence to tackle the exercise successfully.

Introduction: What the Exercise Asks For

In unit 4.4 of the CodeHS JavaScript graphics track, lesson 7 presents the prompt: “Make a tree.” Students receive a starter program that sets up a 400 × 400 pixel canvas and defines a draw() function that is called repeatedly. The goal is to replace the placeholder code with instructions that render a trunk and a set of branches that split recursively, producing a stylized tree that resembles a fractal. The evaluation criteria typically check for:

1. A visible brown trunk centered near the bottom of the canvas.
2. At least two levels of branching (the trunk splits into two branches, each of which splits again).
3. Use of a recursive function to draw branches, demonstrating an understanding of base cases and recursive calls.
4. Proper use of the CodeHS graphics library (setColor, drawLine, getWidth, getHeight, etc.). Understanding these requirements up front helps you plan the solution before writing any code.

Understanding the Core Concepts

The Canvas Coordinate SystemCodeHS places the origin (0, 0) at the top‑left corner of the canvas. Positive x moves right, and positive y moves down. Therefore, to draw a trunk that grows upward, you will start near the bottom‑middle of the canvas and draw a line with a negative change in y.

Recursion Basics

A recursive function solves a problem by calling itself with a smaller version of the original problem. For a tree, each call draws a single branch segment and then makes two recursive calls to draw the left and right sub‑branches. The recursion stops when a base case is met—commonly when the branch length falls below a certain threshold or when a maximum depth is reached.

Trigonometry for Branch Angles

To make the branches spread outward, we need to calculate the end point of a line given its starting point, length, and angle. The formulas are:

• endX = startX + length * cos(angle)
• endY = startY + length * sin(angle)

CodeHS’s JavaScript environment provides Math.cos and Math.sin, which expect the angle in radians. Converting degrees to radians is done with radians = degrees * (Math.PI / 180).

Step‑by‑Step Implementation

Below is a fully commented solution that satisfies the exercise requirements. You can copy it directly into the CodeHS editor for 4.4.7.

/**
 * 4.4.7 Make a Tree – CodeHS
 * Draws a simple recursive tree using the graphics library.
 */

function start() {
    // Set the canvas size (optional, but makes intent clear)
    setSize(400, 400);
}

/**
 * Main drawing function called by the platform.
 */
function draw() {
    clear(); // Remove previous frame (good practice for animation)

    // ---- 1. Draw the trunk ----
    setColor(Color.BROWN);
    var trunkStartX = getWidth() / 2;          // Center horizontally
    var trunkStartY = getHeight() - 20;        // Just above the bottom edge    var trunkLength = 100;                     // Length of the trunk in pixels
    var trunkEndX = trunkStartX;
    var trunkEndY = trunkStartY - trunkLength; // Move upward (negative y)

    drawLine(trunkStartX, trunkStartY, trunkEndX, trunkEndY);

    // ---- 2. Draw the recursive branches ----
    setColor(Color.GREEN);
    drawBranches(trunkEndX, trunkEndY, trunkLength, -90); // Start angle = -90° (straight up)
}

/**
 * Recursively draws a branch and its two sub‑branches.
 *
 * @param {number} x      Starting x‑coordinate of the branch
 * @param {number} y      Starting y‑coordinate of the branch
 * @param {number} length Length of the current branch
 * @param {number} angle  Angle of the branch in degrees (0° = right, -90° = up)
 */
function drawBranches(x, y, length, angle) {
    // Base case: stop recursion when the branch becomes too short    if (length < 10) {
        return;
    }

    // Convert angle from degrees to radians for trig functions
    var radians = angle * (Math.PI / 180);

    // Calculate the endpoint of this branch
    var endX = x + length * Math.cos(radians);
    var endY = y + length * Math.sin(radians);

    // Draw the branch line
    drawLine(x, y, endX, endY);

    // Prepare parameters for the two sub‑branches
    var newLength = length * 0.7; // Each successive branch is 70% the length of its parent
    var leftAngle  = angle - 20;  // Branch left: rotate counter‑clockwise
    var rightAngle = angle + 20;  // Branch right: rotate clockwise    // Recursive calls for left and right sub‑branches
    drawBranches(endX, endY, newLength, leftAngle);
    drawBranches(endX, endY, newLength, rightAngle);
}

Explanation of Key Parts

Continuation of the Article

The recursive logic in drawBranches is the heart of the tree’s fractal-like structure. By reducing the branch length by 70% (newLength = length * 0.7) at each recursion level, the tree achieves a natural tapering effect, mimicking how real branches thin as they extend outward. This scaling, combined with the 20-degree angular divergence between left and right sub-branches, creates a balanced, organic spread. Each call to drawBranches effectively splits the current branch into two smaller branches, repeating this process until the base case (length < 10) halts further growth. This iterative refinement ensures the tree maintains visual coherence while appearing complex.

The angle parameter plays a critical role in shaping the tree’s geometry. The initial call uses -90° to direct the first branch upward, establishing the tree’s vertical orientation. Subsequent branches inherit angles adjusted by ±20°, which not only spreads the tree horizontally but also introduces subtle curvature.

The recursive splitting into sub-branches is what transforms a simple line into a lifelike tree. Each call to drawBranches doesn’t just draw a single line—it spawns two new branches, each inheriting the endpoint of the previous line as their origin. This creates a cascading effect, where every branch becomes a node for further growth. The 70% length reduction ensures that each iteration shrinks proportionally, preventing the tree from becoming an unwieldy mass of lines. Meanwhile, the ±20-degree angle shifts introduce asymmetry, breaking the rigidity of a perfectly symmetrical fractal and giving the tree a dynamic, wind-swept quality. Together, these parameters balance mathematical precision with organic randomness, a hallmark of natural growth patterns.

Mathematically, the use of Math.cos and Math.sin to calculate endX and endY is critical. These trigonometric functions convert polar coordinates (angle and radius) into Cartesian coordinates (x and y), allowing the code to position each branch endpoint accurately. For instance, a 45-degree angle would position a branch diagonally, while a -90-degree angle (as in the trunk) directs it vertically. This approach ensures that branches align with their intended direction, even as angles compound through recursion. The cumulative effect of these calculations is a tree that grows in a visually consistent yet subtly varied manner, with each branch’s orientation influenced by its parent’s angle.

The interplay between angle divergence and length scaling defines the tree’s "density" and "spread." A smaller angle adjustment (e.g., 10 degrees instead of 20) would produce a tighter, more compact tree, while a larger angle would create a sprawling, bushy silhouette. Similarly, tweaking the 70% scaling factor alters the rate at which branches thin—too steep a reduction might make the tree appear spindly, whereas a gentler reduction could result in thicker, more robust limbs. These parameters act as artistic controls, enabling experimentation to achieve desired aesthetics while maintaining structural logic.

The base case (if (length < 10) return;) serves as the tree’s growth limit, capping recursion at a practical level. Without it, the code would generate an infinite number of branches, consuming memory and processing power. By terminating recursion when branches become imperceptibly small, the code prioritizes efficiency without sacrificing visual complexity. This balance is key to creating a tree that feels intricate yet computationally feasible, even on modest hardware.

Visually, the result is a tree that feels both algorithmic and alive. The recursive structure mirrors the way plants branch in nature, where each division follows similar proportional rules but varies slightly due to environmental factors. The code’s simplicity—just a few lines of logic—hides the sophistication of its output, which can resemble everything from a sapling to a full-grown oak depending on parameter tweaks. This duality of simplicity and complexity is what makes Processing.js such a powerful tool for algorithmic art.

In conclusion, the drawBranches function exemplifies how recursion and mathematical principles

...can transform abstract rules into evocative natural forms. It demonstrates that complexity need not arise from complicated code, but from the disciplined application of simple, recursive principles guided by mathematical relationships. This function becomes a microcosm of generative art: a system where slight parametric shifts yield dramatically different organic structures, inviting endless experimentation. Ultimately, the true power of such a model lies not in its literal replication of a tree, but in its capacity to capture the essence of growth—the interplay of order and variation, structure and randomness—that defines the natural world. By distilling this process into a few lines of code, we gain not only a tool for creation but also a deeper appreciation for the hidden mathematics woven into the fabric of life itself.