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

p5.js Coding Questions
1

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

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.

1 Like
2

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

Also you might want to check out Processing.js if you want to deploy your Processing sketch to the web.

2 Likes
3

changing what you have on line 29 to:

	var a = (mouseX / width) * 90.0;

seems to do the trick! :slight_smile:

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

2 Likes
4

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