Fractals, her yerde bulunan ama eğitilmemiş gözle görülemeyen gizemli figürler. Bugün sadece Vanilla JS ve HTML5 Canvas API'yi kullanarak en iyi bilinen Fractals'lardan birini çizeceğiz. Ne öğreneceksin Fraktal ağaç nedir? Vanilya JS'de Fraktal Ağacı Yazmak Fraktal Ağacın Ötesinde Fraktal ağaç nedir? Bir Fraktal Ağacı tanımlamak için, öncelikle, tabii ki, Fraktal'in tanımını bilmeliyiz. Fraktaller, her ölçekte, her düzeyde, yaklaşık olarak aynı görünen matematiksel eşitliklerin tekrarlanmasıyla oluşturulan sonsuz desenlerdir. Yani, bir Fraktal'i bölersek, bütünün küçük bir kopyasını göreceksiniz. Fraktal terimini 1975 yılında ortaya koyan Benoit Mandelbrot şöyle demiştir: Bir fraktal, bir şekilde bütününe benzer parçalardan oluşan bir şekildir. Bir fraktal, bir şekilde bütününe benzer parçalardan oluşan bir şekildir. Oldukça açık değil mi? İşte bazı örnekler: Şimdi, bir fraktal ağaç nedir? Bir dalı ve ondan çıkan dalları hayal edin, sonra her daldan çıkan iki dalı ve böylelikle... İşte bir Fraktal Ağacı nasıl görünüyor. Formu Sierpinski üçgeninden (ya da Sierpinski gazketinden) gelir. Gördüğünüz gibi, dallar arasında açı değiştirirken biri diğerine dönüşür: Bugün, bu GIF'in nihai formuna benzer bir rakamla sona ereceğiz. Vanilya JS'de Fraktal Ağacı Yazmak Her şeyden önce, burada nihai ürün (daha sonra ayarlayabilirsiniz): Şimdi bunu adım adım çizelim. Her şeyden önce, index.html dosyamızı makul boyutlu bir tabaka ve tüm JS kodumuzun bulunduğu bir senaryo etiketiyle başlatırız. <!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> Sonra JavaScript yazmaya başlıyoruz. JS'de canvas elemanımızı, myCanvas değişkeninden erişerek ve ctx (kontekst) değişkeniyle 2D rendering bağlamını oluşturarak başlatırız. <!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> Yani evet, getContext yöntemi, bu durumda 2D'de çizim yapmanızı sağlayan özellikleri ve yöntemleri ekler. Şimdi düşünme zamanı. bir fraktal ağacı çizmek için algoritmayı nasıl tanımlayabiliriz? Bakalım, şunu biliyoruz ki dallar giderek küçülüyor ve her dalın sonunda iki dal çıkıyor, biri sola, biri sağa. Diğer bir deyişle, bir dal yeterince uzun olduğunda, ona iki daha küçük dal bağlayın. Sanki bir yerde bazı geri dönük ifadeleri kullanmamız gerektiği gibi geliyor, değil mi? Kodu geri dönelim, şimdi işlevimizi tanımlıyoruz Bu, en az dört argümanı gerektirir: dalının başladığı yerin X ve Y koordinatları, dalının uzunluğu ve açıdır. fractalTree İşlevimizde, çizmeyi beginPath() yöntemi ile başlatır ve daha sonra canvas durumunu save() yöntemi ile kaydederiz. <!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> StartPath yöntemi genellikle sabit bir tarzı olan yeni bir satır veya şekil başlatırken kullanılır, örneğin tüm satır boyunca aynı renk veya aynı genişlik gibi. Şimdi, bir çizgi (çap) çizerek, tabakayı döndürerek, bir sonraki dalı çizerek ve benzeri gibi Fraktal Ağacımızı çizeriz. <!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> Öyleyse önce üç yöntem ekliyoruz, çevirin, dönün ve moveTo, bu da tabakayı, kökeni ve “kalemimizi” hareket ettirir, böylece dalıyı istediğimiz açıdan çizebiliriz. if ifadesi öncesindeki son iki yöntem lineTo ve stroke'dir; birincisi akım yoluna bir düz çizgi ekler ve ikincisi onu dönüştürür. Şimdi, ne zaman geri dönüşü durdurulacağını, ne zaman çizim durdurulacağını söyleyen bir if ifadesi var. , “daha yeni kaydedilen yapışkan durumunu çizim durum çubuğundaki en üst girişini açarak geri yükler.” MDN Dosyaları Eğer if if if'den sonra, tekrarlayan çağrı ve geri yükleme yöntemi için başka bir çağrı var. Şimdi tarayıcınızda kod çalıştırın. nihayet bir Fraktal Ağacı göreceksiniz! Hayırlı olsun, şimdi daha da iyileştirelim. Fraktal Ağacımızı daha gerçekçi hale getirmek için çizim fonksiyonumuzu BranchWidth'e yeni bir parametre ekleyeceğiz. <!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> Yani her iterasyonda, her dalı daha ince hale getiriyoruz. ben de daha “açık” bir ağaç yapmak için tekrarlayan çağrıda açı parametresini değiştirdim. Şimdi biraz renk ekleyelim! ve gölgeler, neden olmasın. <!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> Her iki renk yöntemi de kendi kendine açıklayıcıdır (strokeStyle ve fillStyle). Ayrıca, gölgeler, shadowBlur ve shadowColor. Dosyayı kaydet ve nihai ürünü görmek için tarayıcınızla açın. Şimdi sizi kodla oynamaya teşvik ediyorum! gölge renk değiştirin, fillStyle, daha kısa veya daha uzun bir Fraktal Ağacı yapın, açı değiştirin, ya da yaprak eklemeye çalışın, bu zor olmalıdır 😉 Fraktal Ağacın Ötesinde Bu yazının başında gösterdiğim gibi, farklı Fractals var. Canvas API ile tüm bunları yapmak kolay olmayacak, ancak bu mümkün olmalı. bazılarını C programlama dilinde yaptım ve p5.js ile de oynadım. p5.js, sanatçılar tarafından oluşturulan açık kaynaklı bir JavaScript kütüphanesidir. Hayal edebileceğiniz her şeyi çizer veya animasyon edebilirsiniz. Eğer kodla sanat yapmakla ilgileniyorsanız, bu bir zorunluluktur. kontrol edebileceğiniz sayfalar . İşleme Dili başlangıç burda Okuduğunuz için teşekkürler, herhangi bir soruya yorum yapın ve bir sonraki yazımda görüşmek üzere! Etiket arşivi: Pixabay Etiket arşivi: Pixabay
