Hello, everyone. I need some help with the Fractal tree.

I am having trouble in printing the tree that is getting drawn using the rules that I have defined in my code. Thanks for all the help.

Here is my JavaScript code:

var axiom = "F";

var axiomB = "X";

var len = 1;

var len2 = 2;

var len3 = 3;

var width = 700;

var height = 400;

var sentence = axiom;

var sentence2 = axiom;

var sentence3 = axiomB;

var angle;

var rules = [];

rules[0] = {

a: "F",

b: "F[+F]F[-F]F"

}

var rulesB = [];

rulesB[0] = {

a: "F",

b: "F[+F]F[-F][F]"

}

var rulesC = [];

rulesC[0] = {

a: "F",

b: "FF"

}

rulesC[1] = {

a: "X",

b: "F-[[X]+X]+F[+FX]-X"

}

setup();

function setup() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext('2d');

console.log("Hello World!!!");

turtle();

angle = toRadians(25);

angle2 = toRadians(22.5);

angle3 = toRadians(45);

angle4 = toRadians(15);

angle5 = toRadians(24.7);

console.log("Entering generate function");

for (i = 0; i

generate();

}

for (p = 0; p

generate2();

}

for (p = 0; p

generate3();

}

}

function turtle(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext('2d');

//context.translate(width/2, height);

for (var i = 0; i

context.beginPath();

var current = sentence.charAt(i);

if (current == "F"){

context.lineTo(100, 100);

}else if (current == "+"){

context.rotate(angle5);

}else if (current == "-"){

context.rotate(-angle);

}else if (current == "["){

context.save();

}else if (current == "]"){

context.restore();

}

}

}

function turtle2(){

//resetMatrix();

context.translate(width/3, height);

for (var n = 0; n

var current = sentence2.charAt(n);

if (current == "F"){

context.stroke("#2b8a79");

context.lineTo(0, -len2);

context.translate(0, -len2);

}else if (current == "+"){

context.rotate(angle4);

}else if (current == "-"){

context.rotate(-angle4);

}else if (current == "["){

save();

}else if (current == "]"){

restore();

}

}

}

function turtle3(){

//resetMatrix();

context.translate(width/6, height);

for (var n = 0; n

var current = sentence3.charAt(n);

if (current == "F"){

context.stroke("#28b232");

context.lineTo(0, -len3);

context.translate(0, -len3);

}else if (current == "X"){

context.stroke("#024d08");

context.lineTo(-len3, 0);

context.translate(0, -len3);

}else if (current == "+"){

context.rotate(angle2);

}else if (current == "-"){

context.rotate(-angle2);

}else if (current == "["){

save();

}else if (current == "]"){

restore();

}

}

}

function generate(){

len *= 1;

var nextSentence = "";

for (var i = 0; i

var current = sentence.charAt(i);

var found = false;

for (var j = 0; j

if (current == rules[j].a){

found = true;

nextSentence += rules[j].b;

console.log(nextSentence);

break;

}

}

if (!found){

nextSentence += current;

}

}

sentence = nextSentence;

//createP(sentence);

turtle();

}

function generate2(){

len2 *= .5;

var nextSentence2 = "";

for (var i = 0; i

var current2 = sentence2.charAt(i);

var found2 = false;

for (var j = 0; j

if (current2 == rulesB[j].a){

found2 = true;

nextSentence2 += rulesB[j].b;

break;

}

}

if (!found2){

nextSentence2 += current2;

}

}

sentence2 = nextSentence2;

turtle2();

}

function generate3(){

len2 *= .5;

var nextSentence3 = "";

for (var i = 0; i

var current3 = sentence3.charAt(i);

var found3 = false;

for (var j = 0; j

if (current3 == rulesC[j].a){

found3 = true;

nextSentence3 += rulesC[j].b;

break;

}

}

if (!found3){

nextSentence3 += current3;

}

}

sentence3 = nextSentence3;

turtle3();

}

function toRadians (angle) {

return angle * (Math.PI / 180);

}

The output of the tree should look something like this: