Object-oriented fractal tree

I made an object oriented fractal tree in javascript using the p5 library, it consists of three files:

• Fraternal Tree.js

• branch.js

• flower.js

Here is the github repo with the source code. All the main work is done in Fraternal Tree.js
I want to know if I am following good coding practices and naming conventions or not. Also, if you increase the number of branches to anything above 1000, the fps drops significantly, is there a way I can optimize this to get better fps? Maybe using more efficient data structures? Or some other practice?

You can run the sketch HERE

Code :

Fraternal Tree.js -

```
var tree = []; //stores branch objects including the root
var flowers = []; //stores flower objects

//flower objects are assigned only to ungrown branches on clicking "grow" button
//this array is cleared on clicking "shed" button

var branchNumber = 0; //stores number of branches(excluding root)

//used for buttons and checkboxes
var shrink, shake, intensity, grow = false,
shed, gravity, flsize, grav, wind_dir, windcheck;
var cnv;

function setup() {
cnv = createCanvas(500, 500);
//create a root at the bottom middle of the screen
var root = new Branch(createVector(width / 2, height), createVector(width / 2, height - 100));
tree[0] = root;
//code in between to setup dom elements
cnv.mousePressed(branchIt); //create branch on mouse press

function draw() {
//this is the animation segment, gets called fps times every second
background(51);
fill(255);
textSize(24);
text("Number of branches = " + branchNumber, 15, 30);

//determine value of wind vector based on dom elements
if (windcheck.checked()) {
if (wind_dir.value() == "Left")
wind = createVector(-0.2, 0);
else if (wind_dir.value() == "Right")
wind = createVector(0.2, 0);
}

//loop through branch objects
for (var i = 0; i = 0; i--) {
if (!tree[i].grown) {
tree.push(tree[i].spawnA(sh

It is pretty easy to read and understand. However here are some minor suggestions for improvement:

The top level fields could be named in a way that does not require the almost trivial comments. If it is important to note that the array flowers stores flower objects, just call it flowerObjects. The tree is a bit misleading because one could assume that it is a tree object. The array could be named allBranches or even just branches.

I break up functions in smaller parts wherever possible. A good indicator are comments before a block of some coherent lines of code like in this example:

//determine value of wind vector based on dom elements
if (windcheck.checked()) {
    if (wind_dir.value() == "Left")
        wind = createVector(-0.2, 0);
    else if (wind_dir.value() == "Right")
        wind = createVector(0.2, 0);
}

This could be rewritten like this:

wind = getWindVector(windcheck.checked(), wind_dir.value());

function getWindVector(windChecked, dir) {
    let x = windChecked ? 0.2 : 0;
    if (dir == "Left") x = x * -1; 
    return createVector(x, 0);
}

Note that again the comment is made redundant.

Another indication that some pieces of code ought to be extracted to separate functions is that you are directly accessing the UI elements in the code that builds the tree. Note how hiding the wind_dir.value() behind the dir parameter made the code a bit easier to read.

StackExchange Code Review Q#156699, answer score: 2