Javascript 如何在使用滑块更改树的高度时模拟树的生长？

我试图理解angular.js中绑定值是如何工作的。我真的是个初学者。我想知道，当你把一棵树摇上滑块时，它是如何生长的，当你把它摇下滑块时，它又是如何收缩的。之后我会努力使它变得漂亮，我只想了解一些基础知识，帮助我继续前进

我首先要做的是，当一个分支达到50px的高度时，它会分裂成两个小分支。 高度应等于从0到100的滑块值 在x处分支的厚度为0.1*（100-x），因此原点比端点更薄，并且随着其增长而变厚。 如果x=0，则什么都看不见 如果x

<p><canvas class="tree" width="800" height="600" /></p>
<input id="sizeTree" type="range" min="0" max="150" />

#sizeTree {
    width:600px;
}

(function() {

    var sizeTree = 0;
    var thickness;
    var canvas;
    var ctx;
    canvas = $('canvas.tree')[0];
    ctx = canvas.getContext('2d');
    var ox = canvas.width / 2,
    var oy = canvas.height - 40

    if (sizeTree=0) {
        // nothing visible in the canvas
    } else {
    //draw branch of min(sizeTree,50) length with the right thickness (at y should be equal to 0.1*(100-y)) from (ox,oy) to (ox,oy+sizeTree)
        if (sizeTree>50) {
            //draw 2 branches at -30° and 30° from 50 to sizeTree

            // For the first one from (ox,oy+50) to (ox+(tan(30°)*sizeTree-50), oy+sizeTree)
            // For the second one from (ox,oy+50) to (ox-(tan(30°)*sizeTree-50), oy+sizeTree)
        }
    }   

}());