Фрактали, оне загонетне фигуре које су свуда, али се не могу видети необученим оком.Данас ћемо нацртати један од најпознатијих Фрактали, користећи само Ванилла ЈС и ХТМЛ5 Цанвас АПИ. Šta ćeš naučiti Шта је фрактално дрво? Писање фракталног дрвета у ванили JS Изнад фракталног дрвета Шта је фрактално дрво? Да бисмо дефинисали фрактално дрво, прво морамо знати дефиницију фракталног, наравно. Фрактали су бескрајни обрасци створени понављањем математичких једначина, које, на било којој скали, на било ком нивоу зума, изгледају приближно исто. Дакле, ако поделимо Фрактал, видећемо редуковану копију целог. Беноит Манделброт, који је измислио термин Фрактал 1975, рекао је: Фрактал је облик који се састоји од делова сличних целини на неки начин. Фрактал је облик који се састоји од делова сличних целини на неки начин. Prilično jasno, zar ne? Ево неколико примера: Шта је фрактално дрво? Замислите грану, а гране излазе из ње, а затим две гране излазе из сваке гране, и тако даље ... тако изгледа Фрактално дрво. Његов облик потиче од Sierpinskog троугла (или Sierpinskog гаскета). Као што видите, један постаје други када промените угао између грана: Данас ћемо завршити са фигуром сличном коначном облику тог ГИФ-а. Писање фракталног дрвета у ванили JS Прво, ево коначног производа (можете га подесити на путу): Hajde da to isplaniramo, korak po korak. Прво, иницијализујемо нашу индекс.хтмл датотеку са платном било које разумне димензије и ознаком скрипта где ће се налазити сви наши ЈС кодови. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script></script> </body> </html> Затим почињемо писање нашег ЈаваСцрипта. Иницијализујемо наш елемент платна на ЈС-у, приступајући га преко променљиве миЦанвас и стварајући 2Д рендеринг контекст са променљивом цтк (контекст). <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script> var myCanvas = document.getElementById("my_canvas"); var ctx = myCanvas.getContext("2d"); </script> </body> </html> Дакле, да, метод getContext додаје својства и методе које вам омогућавају да нацртате, у овом случају, у 2Д. Сада је време за размишљање.Како можемо дефинисати алгоритам за цртање фракталног дрвета? Видимо, знамо да гране постају све мање, и да свака грана завршава са две гране излазе из њега, један на лево и један на десно. Другим речима, када је грана довољно дуга, причврстите две мање гране. Чини се да би требало да користимо неку рекурзивну изјаву негде, зар не? Назад на код, сада дефинишемо нашу функцију да би требало да буде најмање четири аргумента: Кс и И координате где грана почиње, дужина његове гране, и њен угао. fractalTree Унутар наше функције, започињемо цртање методом beginPath() и затим сачувамо стање платна методом save() . <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script> var myCanvas = document.getElementById("my_canvas"); var ctx = myCanvas.getContext("2d"); function draw(startX, startY, len, angle) { ctx.beginPath(); ctx.save(); } </script> </body> </html> Метода beginPath се често користи када покренете нову линију или фигуру која има фиксни стил, као што је иста боја дуж целе линије или исте ширине. Сада ћемо нацртати наше фрактално дрво тако што ћемо нацртати линију (грану), ротирати платно, нацртати следећу грану и тако даље. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script> var myCanvas = document.getElementById("my_canvas"); var ctx = myCanvas.getContext("2d"); function draw(startX, startY, len, angle) { ctx.beginPath(); ctx.save(); ctx.translate(startX, startY); ctx.rotate(angle * Math.PI/180); ctx.moveTo(0, 0); ctx.lineTo(0, -len); ctx.stroke(); if(len < 10) { ctx.restore(); return; } draw(0, -len, len*0.8, -15); draw(0, -len, len*0.8, +15); ctx.restore(); } draw(400, 600, 120, 0) </script> </body> </html> Дакле, прво додамо три методе, преводимо, ротирамо и померамо, што "помери" платно, његово порекло и наш "оловка" тако да можемо нацртати грану под жељеним углом. Последње две методе пре if изјаве су lineTo и stroke; први додаје равну линију текућем путу, а други га рендерише. Сада имамо ако изјаву која говори када зауставити рекурзију, када зауставити цртање. , "обнавља најновије сачувано стање платна тако што ће се појавити врх уноса у стеку стања цртања". МДН Доцс Након ако изјаве, имамо рекурзивни позив и још један позив на метод враћања, а затим позив функцији коју смо управо завршили. Сада покрените код у вашем претраживачу. На крају ћете видети Фрактално дрво! Odlično, zar ne?Hajde da ga učinimo još lepšim. Додаћемо нови параметар на нашој функцији цртања, branchWidth, да би наш Фрактал Трее био реалистичнији. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script> var myCanvas = document.getElementById("my_canvas"); var ctx = myCanvas.getContext("2d"); function draw(startX, startY, len, angle, branchWidth) { ctx.lineWidth = branchWidth; ctx.beginPath(); ctx.save(); ctx.translate(startX, startY); ctx.rotate(angle * Math.PI/180); ctx.moveTo(0, 0); ctx.lineTo(0, -len); ctx.stroke(); if(len < 10) { ctx.restore(); return; } draw(0, -len, len*0.8, angle-15, branchWidth*0.8); draw(0, -len, len*0.8, angle+15, branchWidth*0.8); ctx.restore(); } draw(400, 600, 120, 0, 10) </script> </body> </html> Дакле, у свакој итерацији, чинимо сваку грану тањим. Такође сам променио параметар угла у рекурзивном позиву како бих направио више "отворено" дрво. Сада, хајде да додамо неке боје! и сенке, зашто не. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id="my_canvas" width="1000" height="800"></canvas> <script> var myCanvas = document.getElementById("my_canvas"); var ctx = myCanvas.getContext("2d"); function draw(startX, startY, len, angle, branchWidth) { ctx.lineWidth = branchWidth; ctx.beginPath(); ctx.save(); ctx.strokeStyle = "green"; ctx.fillStyle = "green"; ctx.translate(startX, startY); ctx.rotate(angle * Math.PI/180); ctx.moveTo(0, 0); ctx.lineTo(0, -len); ctx.stroke(); ctx.shadowBlur = 15; ctx.shadowColor = "rgba(0,0,0,0.8)"; if(len < 10) { ctx.restore(); return; } draw(0, -len, len*0.8, angle-15, branchWidth*0.8); draw(0, -len, len*0.8, angle+15, branchWidth*0.8); ctx.restore(); } draw(400, 600, 120, 0, 10) </script> </body> </html> Оба метода боја су само-објашњавајућа (strokeStyle и fillStyle). Такође, сенке, сенкаБлур и сенкаЦолор. Сачувајте датотеку и отворите је помоћу претраживача да бисте видели коначни производ. Сада вас охрабрујем да играте са кодом! Промените сенкуЦолор, филлСтиле, направите краћи или дуже Фрактал Дрво, промените угао, или покушајте да додате листове, то би требало да буде изазовно 😉 Изнад фракталног дрвета Као што сам вам показао на почетку овог поста, постоје различити Фрактали. Неће бити лако направити све оне са Цанвас АПИ-ом, али то би требало да буде могуће. p5.js је библиотека ЈаваСцрипта отвореног кода коју су направили уметници, за уметнике, на основу Можете нацртати или анимирати све што можете замислити. Ако сте заинтересовани за стварање уметности са кодом, то је обавезно. Страница коју можете проверити . Обрада језика Почиње ovde Па, то је за сада! хвала на читању, коментаришу било која питања, и видимо се у мом следећем посту! Објављено од стране socialtrendspr0 од Pixabay Објављено од стране socialtrendspr0 од Pixabay
