Блог

Главная - Вопросы по программированию - Поворот изображения между 2 углами в Javascript с использованием p5.js

Поворот изображения между 2 углами в Javascript с использованием p5.js

#javascript #p5.js

Вопрос:

Я хочу вращать свое изображение между 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>

Вот такая картина

Комментарии:

1. Красивое у тебя дерево, это фрактальное дерево ? потому что это действительно похоже на одно https://progur.com/2016/10/procedural-generation-create-fractal-trees-javascript.html

2. Да, это фрактальное дерево, но этот сайт не использует p5.js.

Ответ №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>

Комментарии:

1. Спасибо, это работает, хотя и не так гладко, как мне хотелось бы.

Метки: