Презентація "Рекурсія"(P5.JS)

Рекурсія. Креативне програмування

Рекурсивна функція повинна мати умову завершення, інакше вона перейде в нескінченний цикл виклику сама себе. Рекурсії означає, що функція викликає сама себе. Зверніть увагу!

function setup() { create. Canvas(720, 560); no. Stroke(); no. Loop();}function draw() { draw. Circle(width/2, 280, 6);}Виклик функції малювання кола

function draw. Circle(x, radius, level) { // Змінна 'level‘, яка завершує рекурсію, коли вона досягає значення 1. const tt = (126 * level)/4.0; fill(tt); ellipse(x, height/2, radius*2, radius*2); if (level > 1) { // Значення 'level' зменшується на 1 на кожному кроці level = level - 1; draw. Circle(x - radius/2, radius/2, level); draw. Circle(x + radius/2, radius/2, level); }}Зверніть увагу, як функція draw. Circle() викликає себе в кінці свого блоку. Вона продовжує це робити до тих пір, поки змінна "level" не дорівнюватиме 1.

Результат рекурсивного виклику функції draw. Circle

function draw. Circle(x, radius, level) { // Змінна 'level‘, яка завершує рекурсію, коли вона досягає значення 1. const tt = (126 * level)/4.0; fill(fill(int(tt),random(250), random(250)); ellipse(x, height/2, radius*2, radius*2); if (level > 1) { // Значення 'level' зменшується на 1 на кожному кроці level = level - 1; draw. Circle(x - radius/2, radius/2, level); draw. Circle(x + radius/2, radius/2, level); }}Додавання випадкового кольору заливки

Рекурсивне дерево відображає просту деревоподібну структуру за допомогою рекурсії. Кут розгалуження розраховується як функція горизонтального положення курсора миші. Рекурсивне дерево. Для зміни кута необхідно переміщувати мишу вліво або вправо. Зверніть увагу!

let theta; // Змінна, що міститиме значення кута function setup() { create. Canvas(710, 400);}function draw() { background(0); frame. Rate(30); stroke(255); // Вибір кута від 0 до 90 градусів на оснoві позиції миші let a = (mouse. X / width) * 90; // Кoнвертація градусів у радіани theta = radians(a); // Початок дерева з верху екрану translate(width/2,height); // Малювання лінії в 120 пікселів line(0,0,0,-120); // Переміщення в кінець лінії translate(0,-120); // Початок рекурсивної гілки! branch(120);}

function branch(h) { h *= 0.66; // Кожна гілка буде становити 2/3 розміру попередньої // Всі рекурсії мусять мати умову виходу!!! // В нашому випадку, коли довжина гілки становить 2 пікселя чи меншаif (h > 2) { push(); // Зберегти поточний стан трансформації (тобто де ми зараз) rotate(theta); // Повернути на кут theta line(0, 0, 0, -h); // Намалювати гілку translate(0, -h); // Перейти в кінець гілки branch(h); // Виклик самої себе, щоб намалювати дві нові гілки!! pop(); // Щоразу, коли ми тут, то використовуємо «pop», щоб відновити попереднє // Повторити те ж саме, тільки перемістившись «вліво»! push(); rotate(-theta); line(0, 0, 0, -h); translate(0, -h); branch(h); pop(); } }

«Дерева» одержані в результаті переміщення курсора миші (по горизонталі)

https://p5js.org/examples/structure-recursion.html - Рекурсіяhttps://p5js.org/examples/simulate-recursive-tree.html - Рекурсивне деревоhttps://www.youtube.com/watch?v=0jje. OYMjm. DU – відео створення фрактального дерева. Руденко В. Креативне програмування (модуль для учнів 10–11 класів, рівень стандарту. Вид-во «Ранок», 2020 Література. Escuela

Кінець