使用p5.js在Javascript中在两个角度之间旋转图像

Question

我想通过平滑的动画将我的图像在cos(20)和-cos(20)之间旋转。

使用branch()函数进行树的递归构建。我无法想出如何使用循环来实现它。是否有内置函数或特定算法可以实现这一点？

let angles = 0;
  var strokeValue = 1;
  function setup() {
    const canvas = createCanvas(540, 400);
    frameRate(8);
  }
 
  function draw() {
    background(220);
    angle = PI/8;
    translate(250, height);
    // I think the rotate function should be here
    branch(90); 
  }

  function branch(length) {
    strokeWeight(strokeValue);
    line(1, 1, 1, -length);
    translate(0, -length);
    if (length > 4) {
      //Right branches
      push();
      rotate(angle);
      branch(length * 0.72);
      pop();
      // left branches
      push();
      rotate(-angle);
      branch(length * 0.72);
      pop();
      push();
      // middle
      rotate(-angle * 0.2);
      branch(length * 0.3);
      pop();
    } 
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

- Yassine Mrabet

---

你的树很漂亮，那是分形树吗？因为它看起来像一个。https://progur.com/2016/10/procedural-generation-create-fractal-trees-javascript.html - darklightcode

是的，这是一棵分形树，但是这个网站没有使用p5.js。 - Yassine Mrabet

Answer 1

我尝试了这个，虽然不确定是否符合您的要求，请随意评论。

let angles = 0;
  var strokeValue = 1;
  function setup() {
    const canvas = createCanvas(540, 400);
    frameRate(30);
  }
 
  function draw() {
    background(220);
    angle = PI/8;
    translate(250, height);
    // I think the rotate function should be here
    rotate(cos(map(frameCount / 10,0,100,-20,20)));
    branch(90); 
  }

  function branch(length) {
    strokeWeight(strokeValue);
    line(1, 1, 1, -length);
    translate(0, -length);
    if (length > 4) {
      //Right branches
      push();
      rotate(angle);
      branch(length * 0.72);
      pop();
      // left branches
      push();
      rotate(-angle);
      branch(length * 0.72);
      pop();
      push();
      // middle
      rotate(-angle * 0.2);
      branch(length * 0.3);
      pop();
    } 
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

- olaf

---

谢谢，它能工作，虽然不如我想象的那么顺畅。 - Yassine Mrabet