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

Про матеріал
Презентація стосується модуля креативного програмування для 10-11 класів. Розглянуто з практичної точки зору поняття рекурсії та застосування його для побудови фрактального дерева. Для програмування використовується вільнопоширувальне середовище Processing та Р5.JavaScript)
Зміст слайдів
Номер слайду 1

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

Номер слайду 2

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

Номер слайду 3

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

Номер слайду 4

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.

Номер слайду 5

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

Номер слайду 6

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); }}Додавання випадкового кольору заливки

Номер слайду 7

Номер слайду 8

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

Номер слайду 9

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);}

Номер слайду 10

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(); } }

Номер слайду 11

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

Номер слайду 12

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

Номер слайду 13

Кінець

pptx
До підручника
Інформатика (рівень стандарту) 11 клас (Лисенко Т.І., Ривкінд Й.Я., Чернікова Л.А., Шакотько В.В.)
Додано
12 грудня 2021
Переглядів
737
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку