木の複製のやり方がわかりません。

Question

Processingでp5.jsで森を作りたいと考えていますが、木1本のコードは動画などを参考にしながら作ることはできたのですが、どのようにして木を増やせばいいのかわかりません。どこの値などを追加したら増やせますか？
木の動画
https://www.youtube.com/watch?v=tdbaIHjCKtA

  function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  angleMode(DEGREES);
  
    noLoop();
}
function draw() {
  background(0, 125, 255)
  
  // randomSeed(1)

  translate(-200, 200, 0);//position 
  
  rotateY(frameCount);
  
  branch(100); // Size
}
function branch(len) {
  strokeWeight(map(len, 10, 100, 0.5, 5));
  stroke(70, 40, 20);
  
  line(0, 0, 0, 0, -len - 2, 0)
 
  
  translate(0, -len, 0)
  //translate(100, -len, 0)
  
  if (len > 10) {
    for (var i = 0; i < 3; i++) {
      rotateY(random(100, 140));
      
      push()
      
      rotateZ(random(20, 50));
      branch(len * 0.7);
      
      pop()
    }
  } else {
    
    var r = 80 + random(-20, 20)
    var g = 120 + random(-20, 20)
    var b = 40 + random(-20, 20)
    
    fill(r, g, b, 200)
    noStroke()
    
    translate(5, 0, 0);
    
    rotateZ(90);
    
    
    beginShape();
    for (var i = 45; i < 135; i++) {
      var rad = 7; 
      var x = rad * cos(i);
      var y = rad * sin (i);
      vertex(x, y);
    }
    for (var i = 135; i > 45; i--){
      var rad = 7;
      var x = rad * cos(i);
      var y = rad * sin(-1) + 10;
      vertex(x, y);
    
    }
    endShape(CLOSE);
  }
}

Answer 1

木1本のコードは動画などを参考にしながら作ることはできたのですが、どのようにして木を増やせばいいのかわかりません。どこの値などを追加したら増やせますか？

branchで木が１本生えるのですから、位置をずらしてbranchを呼ぶだけではないですか？
reference | translate()

森を作りたい

数本描いただけですっごい重いです...

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  angleMode(DEGREES);
  //noLoop();
}

function draw() {
  background(0, 125, 255);
  randomSeed(1);

  orbitControl(); // マウスで回転・移動・拡縮

  rotateX(-15); // ちょっと斜め上から見たように
  rotateY(frameCount); // 自動で回転

  for (let x = -200; x <= 200; x += 200) {
    push();
    translate(x, 0, 0); // 木の位置を指定
    branch(100);
    pop();
  }

  // 地面
  noStroke();
  fill(0, 255, 0);
  box(windowWidth, 0, windowHeight);
}

function branch(len) {
  strokeWeight(map(len, 10, 100, 0.5, 5));
  stroke(70, 40, 20);

  line(0, 0, 0, 0, -len - 2, 0);

  translate(0, -len, 0);

  if (len > 10) {
    for (let i = 0; i < 3; i++) {
      rotateY(random(100, 140));

      push();

      rotateZ(random(20, 50));
      branch(len * 0.7);

      pop();
    }
  } else {
    let r = 80 + random(-20, 20);
    let g = 120 + random(-20, 20);
    let b = 40 + random(-20, 20);

    fill(r, g, b, 200);
    noStroke();

    translate(5, 0, 0);
    rotateZ(90);

    beginShape();
    for (let i = 45; i < 135; i++) {
      let rad = 7;
      let x = rad * cos(i);
      let y = rad * sin (i);
      vertex(x, y);
    }
    for (let i = 135; i > 45; i--) {
      let rad = 7;
      let x = rad * cos(i);
      let y = rad * sin(-1) + 10;
      vertex(x, y);
    }
    endShape(CLOSE);
  }
}

Comments

[takutan2004]

ありがとうございます。どうして重くなるんですかね？単純に処理が多くて重くなってるんでしょうか？

[TN8001]

> どうして重くなるんですかね？単純に処理が多くて重くなってるんでしょうか？

randomSeed(1)しているように、本来は１回計算すればいい処理を毎フレームしているので^^;

PShapeのようなものがあれば、setupで１回だけ作ってdrawではそれを表示するだけにできる（それで早くなるかは未確認）のですが、p5.jsにPShapeに当たるものがないんですよね。。。

どうするのがいいんですかね？？（p5 Geometryとかを使う？だいぶ話が変わってきそう）
わたしはp5.jsからjavaへの移植はかなりやっているのですが、逆はほとんどないのでよくわかりません^^;