# I'm trying to convert a fractal tree program from processing to p5js

**URL:** <https://discourse.processing.org/t/im-trying-to-convert-a-fractal-tree-program-from-processing-to-p5js/6336>\
**Category:** Coding Questions\
**Created:** [December 5, 2018, 5:58pm UTC](https://discourse.processing.org/t/im-trying-to-convert-a-fractal-tree-program-from-processing-to-p5js/6336 "2018-12-05T17:58:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sunnylimenoid](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Sunnylimenoid](https://discourse.processing.org/u/Sunnylimenoid)\
**Post date:** [December 5, 2018, 5:58pm UTC](https://discourse.processing.org/t/im-trying-to-convert-a-fractal-tree-program-from-processing-to-p5js/6336/1 "2018-12-05T17:58:38Z")

</div>

Hello, I’m quite new to both processing and p5.js. I am experimenting with this demo on the processing site `https://processing.org/examples/tree.html`. I got it working in processing and want to publish it on my blog, but to do that I need to convert to p5.js. I have tried to do it but got an error with the mouse event ( I think that it is what it is called), so can someone help steer me in the right direction? Thanks. This is the code

```auto
var theta;

function setup() {
  createCanvas(650, 600);
	noStroke();
  background(23, 100, 240);

  var x = 0;
  while(x < width){
    var y = 0;
    while(y < height){
      stroke(4);
      stroke(204, 102, 0);
      fill(345,random(78, 140), random(100,255),random(4,255));
      ellipse(x + 20, y + 20, 38, 38);
      y = y + 20;
    }
    x = x + 20;
  }
}

function draw() {
  background(204, 102, 153);
  frameRate(30);
  stroke(255);
  var a = (mouseX / (var) width) * 90f;
  theta = radians(a);
  var x = 0;
  while(x < width){
    var y = 0;
    while(y < height){
      stroke(3);
      stroke(255, 0, 255, 2);
      fill(45,random(78, 34), random(100,25),random(4,30));
      ellipse(x + 20, y + 20, 38, 38);
      y = y + 20;
    }
    x = x + 20;
  }
  translate(width/2,height);
  strokeWeight(4);
  stroke(random(200,255),random(100,255),random(40,204));
  line(0,0,0,-200);
  translate(0,-200);
  branch(200);
  
  //saveFrame("line-######.png");

}

function branch(h) {
  
     h *= 0.66;
   
  if (h > 2) {
    push();    
    rotate(theta);   
    stroke(random(200,255),random(100,255),random(40,204));
    line(0, 0, 0, -h);  
    translate(0, -h); 

    branch(h);       
    pop();     
    
    push();
    rotate(-theta);
    stroke(random(200,255),random(100,255),random(40,204));
    line(0, 0, 0, -h);
    translate(0, -h);
    branch(h);
    pop();
  }
}

```

I get an error on line 29, and I changed float to var, but it says unexpected token var.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [December 5, 2018, 7:49pm UTC](https://discourse.processing.org/t/im-trying-to-convert-a-fractal-tree-program-from-processing-to-p5js/6336/2 "2018-12-05T19:49:40Z")

</div>

What exact error do you get? Which line is line 29?

Also you might want to check out [Processing.js](https://happycoding.io/tutorials/processing/processing-js) if you want to deploy your Processing sketch to the web.

---

<div class="post-metadata">

**Author:** ![julian2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/julian2/32/1551_2.png) [@julian2](https://discourse.processing.org/u/julian2)\
**Post date:** [December 5, 2018, 8:46pm UTC](https://discourse.processing.org/t/im-trying-to-convert-a-fractal-tree-program-from-processing-to-p5js/6336/3 "2018-12-05T20:46:20Z")

</div>

changing what you have on line 29 to:

```auto
	var a = (mouseX / width) * 90.0;

```

seems to do the trick! 🙂

it seems like you did a string replacement of ‘float’ -\> ‘var’, and this one got left behind!

---

<div class="post-metadata">

**Author:** ![Sunnylimenoid](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Sunnylimenoid](https://discourse.processing.org/u/Sunnylimenoid)\
**Post date:** [December 5, 2018, 10:55pm UTC](https://discourse.processing.org/t/im-trying-to-convert-a-fractal-tree-program-from-processing-to-p5js/6336/4 "2018-12-05T22:55:41Z")

</div>

Thank you so much! I can’t believe I didn’t see that. I guess I was overthinking things. Though, it makes sense now 😄