Project Two section 2 part a

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 a</h1>
TEST ONE BRANCH<br/>

    <script src="proj2.js"></script>

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas><br/>

​Given this information, a recursive function (which we shall call drawBranch()) might look like this: Algorithm for drawBranch(int x, int y, int ang, int len, int level)
<br/>
​if the level < maxLevels then<br/>

​a. convert the angle from degrees to radians by dividing ang by 180 and multiplying by PI<br/>

​b. calculate the newx coordinate of the endpoint of the line (multiply len by the cosine of the angle and add the result to x)<br/>

​c. calculate the newy coordinate of the endpoint of the line (multiply len by the sine of the angle and add the result to y)<br/>

​d. draw the line from (x,y) to (newx, newy)<br/>

​e. Make three recursive calls to drawBranch substituting newx for x, newy for y, with len half as short and 1 added to the level but change the angle each time
<br/>
​i. The original angle<br/>

​ii. angle + 90<br/>

​iii. angle - 90<br/><hr />
​In this project, your job is to create the code for the drawBranch() function. Test it by drawing one branch of the tree, setting maxLevels to 4.<br/><br/>

JavaScript

/* ======================================================================
    SETUP COPY TEACHERS CODE IN JSFIBBLE Project 2
    STEP 1 : follow steps jsFiddle Project Two section 2 part a
    STEP 2 : TEST One Branch in jsFiddle Project Two section 2 part a
    STEP 3 : 4 Branches in jsFiddle Project Two section 2 part B
    STEP 4 : Seven Branches in jsFiddle Project Two section 2 part c
    STEP 5: variations in new fiddle(s)
==================================================================== */

//levels of recursion
const maxLevels = 4;
/* =========================
STARTUP CODE
========================= */
$(document).ready(function() {

    var c = document.getElementById("myCanvas");
    var context = c.getContext("2d");

     /*
        STEP 1: original example: 
        -square demo ( comment out later) 
        -Then Continue in drawBranch()
    */

    /*
    var x = 10;
    var y = 10;
    var length = 200;
    var level = 0;

    drawSquare(x, y, length, level, context);
    */

    /* ================================================
         STEP 2: Test by drawing one branch comment out when complete
    ================================================ */

    let startX = c.width / 2;
    let startY = c.height / 2;

    drawBranch(
        startX,
        startY,
        0,        
        100,
        0,
        context
    );
/* ================================================
        STEP 3: if step 2 works go to next jsFiddle to continue
   ================================================  */

});
/* =========================
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...