Дерево Пифагора на js

#1

https://jsfiddle.net/Alexey9912/p2b3un0z/7/

здравствуйте! пишу приложение для построения дерева Пифагора на js. возникло две проблемы:

  1. не строится правая часть дерева, то есть не запускается функция, где угол уходит вправо. и это при том, что пару минут назад все работало прекрасно. смотрю уже полчаса, где же у меня ошибка. никак ее не найду
  2. при клике на кнопку канвас должен очищаться (функция clearRect()), но почему-то этого не происходит. почему?

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

#2

Когда должна строиться вторая часть дерева условие params.max > params.min не выполняется. Залоггировал значение params для каждого вызова дерева и вижу что значения перестают меняться после определенного момента.

44
Screenshot 2019-02-07 at 20.32.44.png1098×884 191 KB

Скорее всего у тебя раньше была где-то строчка которая меняла значение в params, теперь ее нет.

Очистка происходит. И дерево рисуется сразу поверх чистого канваса.

Я смог добыть эту иформацию с помощью дебаггера. Очень годная штука чтобы разобраться как работает твой код, какие значения переменных и кто кого вызывает https://developers.google.com/web/tools/chrome-devtools/javascript/

Второе. Очень сложно работать с глобальным (для потребителей) объектом params, значения в котом меняют разные функции в разный момент времени. Попробуй написать такие функции, которые бы по-максимуму зависили только от своих аргументов, и не пытались менять значения в некотором общем месте. Чем раньше научишься избегать такого подхода тем проще будет потом писать все более и более сложные программы.

#3

хорошо. спасибо за советы!

image
image.png1912×970 21.2 KB

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

#4

Я из описания в теле поста не понял как воспроизвести проблему с очисткой и просто проверил очищается ли канвас при рисовании.

Теперь я понял что имелось в виду. Дома воспроизведу и разберусь в чем дело.

#5

хорошо. спасибо, что помогаете. я пока решил первую проблему (https://jsfiddle.net/Alexey9912/p2b3un0z/8/). наверняка очень корявый код. но проблема решена

#6

насчёт очистки канваса. в общем, я перенес эту функцию на событие нажатия клавиши. да, все работает, как ты и говорил. но когда я повторно строю дерево уже на очищенном канвасе, у меня происходит наложение старого дерева на новое, как и при клике. возможно, вызова функций просто сохраняются куда-то как массив? и потом все “вываливается”

#7

Все оказалось проще. Пример использования API канваса:

ctx.beginPath();       // Start a new path
ctx.moveTo(30, 50);    // Move the pen to (30, 50)
ctx.lineTo(150, 100);  // Draw a line to (150, 100)
ctx.stroke();          // Render the path

получается нужно каждый раз “начинать линию”. В твоем случае линия как бы продолжалась между вызовами, и на каждый вызовstroke перерисовывалась вся линия.

Иными словами drawLine должна выглядеть так:

function drawLine(x, y, c) {
	ctx.beginPath()
	ctx.lineWidth = params.width;
	ctx.strokeStyle = color.value;
	ctx.moveTo(x, y);
	ctx.lineTo(Math.round(x + params.max * Math.cos(c)), Math.round(y - params.max * Math.sin(c)));
	ctx.stroke();
}
#8

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