Блог

Главная - Вопросы по программированию - p5.js : слайдер не обновляется должным образом

p5.js : слайдер не обновляется должным образом

#javascript #p5.js

#javascript #p5.js

Вопрос:

недавно я начал работать с Javascript, и я следил за видео The Coding Train о фрактальных деревьях в p5js (это видео здесь https://www.youtube.com/watch?v=0jjeOYMjmDU ).

Тем не менее, у меня возникли проблемы с тем, чтобы заставить угловой ползунок действительно работать, поскольку он, похоже, вообще не обновляется всякий раз, когда я его перемещаю (на видео примерно 10 м 15 с, он, кажется, работает почти без каких-либо проблем!)

есть ли кто-нибудь, кто мог бы пролить свет на эту проблему? мой приведенный ниже код выглядит следующим образом:

 let angle;
var slider; //let didnt work, got a "referenceerror cannot access before initialization"

function setup() {
  createCanvas(400, 400);
  slider = createSlider(0, TWO_PI, PI/4, 0.01);
}

function draw() {
  background(51);

  console.log(isLooping()); //debug - prints 'true'
  angle = slider.value();
  console.log(angle); //debug - wrote to test the slider, isn't continually printing, why?
  // let len = 100;
  stroke(255);
  translate(200, height);
  branch(100);


}

function branch(len) {
  line(0, 0, 0, -len);
  translate(0, -len);
  rotate(angle);  // should change when i move the slider, but doesn't
  branch(len * 0.67);
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>

Ответ №1:

Когда я запускаю ваш эскиз p5, я получаю ошибку рекурсии: Uncaught RangeError: Maximum call stack size exceeded (sketch: line 24)

Ваша функция ветвления никогда не возвращается, поскольку она вызывает себя бесконечное количество раз. Я внес некоторые изменения, также см. Мои встроенные комментарии.

 let angle;
let slider; //let works fine

function setup() {
  createCanvas(400, 400);
  slider = createSlider(0, TWO_PI, PI/4, 0.01);
}

function draw() {
  background(51);

  console.log(isLooping()); //debug - prints 'true'
  angle = slider.value();
  console.log(angle); //debug - wrote to test the slider, isn't continually printing, why?
  // let len = 100;
  stroke(255);
  translate(200, height);
  branch(100, 4); // adjust the second argument to reflect your desired depth of the tree


}

function branch(len, depth) {
  if(depth == 0){
    return
  }
  line(0, 0, 0, -len);
  translate(0, -len);
  rotate(angle);  // should change when i move the slider, but doesn't
  branch(len * 0.67, depth - 1); //calling the recursive function with the 'remaining' branches
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>

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

1. Большое спасибо! запустил фрагмент кода в браузере, и он сработал! Я знал, что вижу некоторые ошибки в своей консоли по этому поводу, но поскольку он работал в демонстрации видео без включения проверки глубины рекурсии, я просто автоматически предположил, что это из-за чего-то другого 😅