Project Two section 2 part b - 11 levels of recursion

by Susan Delgado

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <h1>Project Two section 2 part B</h1>
​With eleven levels of recursion, it should look like this:<br/><br>
    <script src="proj2.js"></script>

    
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas><br />
 If that works you can add more branches. Set your canvas dimensions to width="500" height="500" and begin with the angle set to 0 and the starting positions for x and y as<br>

x = canvas.width / 2;<br>

y = canvas.height / 2;<br>

JavaScript

/* ======================================================================
    SETUP COPY TEACHERS CODE IN JSFIBBLE Project 2
    STEP 1 : follow steps jsFiddle Project Two section 2 part a
    STEP 2 : follow steps in jsFiddle Project Two section 2 part a
    STEP 3 : 4 Branches in jsFiddle Project Two section 2 part B
    STEP 4 : Seven Branchesin jsFiddle Project Two section 2 part c
    STEP 5: variations in new fiddle(s)
==================================================================== */
//levels of recursion
const maxLevels =11;

// ==================================================================== 
$(document).ready(function() {

    var c = document.getElementById("myCanvas");
    var context = c.getContext("2d");
    let startX = c.width / 2;
    let startY = c.height / 2;

    let startAngle = 0;
    let startLength = 100;
    let startLevel = 0;

    drawBranch(
        startX,
        startY,
        startAngle,
        startLength,
        startLevel,
        context
    );

});
/* =========================
DRAW SQUARE (given by professor)
========================= */

function drawSquare(x, y, length, level, context){

    if (level < 4){

        context.fillStyle = "rgba(0,0,0,1)";

        if (level == 1)
            context.fillStyle = "rgba(150,0,0,1)";
        else if (level == 2)
            context.fillStyle = "rgba(0,150,0,1)";
        else if (level == 3)
            context.fillStyle = "rgba(0,0,150,1)";
        else
            context.fillStyle = "rgba(50,50,50,1)";

        context.fillRect(x,y,length,length);

        level += 1;
        length = length / 2;
        x += length;

        drawSquare(x,y,length,level,context);
    }
}


/* =========================
 FRACTAL FUNCTION (STARTED)
========================= */


function drawBranch(x, y, angle, len, level, context)
{
   

    if (level < maxLevels)
    {
         /*
            STEP 1 A:...