フラクタルは、あらゆるところに存在する謎の数字ですが、訓練されていない目では見ることができません。今日、我々は、Vanilla JSとHTML5 Canvas APIのみを使用して、最も有名なフラクタルの一つを描きます。 あなたが学ぶもの フラクトル・ツリーとは? What is a Fractal Tree? 「Writing the Fractal Tree in Vanilla JS」 フラクトルツリーの向こう側 フラクトル・ツリーとは? What is a Fractal Tree? フラクトルツリーを定義するには、まずフラクトルの定義を知る必要があります。 フラクタルは数学方程式の繰り返しによって生み出された無限のパターンであり、それはあらゆるスケールで、あらゆるゾームレベルで、ほぼ同じように見えます。 したがって、フラクトルを分割すると、全体の縮小されたコピーが表示されます。 1975年にフラクトルという言葉を発明したベノイ・マンデルブロットは次のように述べた。 フラクタルは、ある意味で全体に似た部分から成る形です。 フラクタルは、ある意味で全体に似た部分から成る形です。 かなり明確ですよね。 以下は、いくつかの例: では、何がフラクトルツリーなのでしょうか。 枝を想像し、枝がそれから出てきて、それからそれぞれの枝から出てくる2つの枝を想像して...それがフラクトルツリーの見た目です。 その形は、シエルピンスキー三角形(またはシエルピンスキーガスケット)から来ています。 あなたが見ることができるように、枝の間の角度を変更するときに、一つはもう一つになります。 今日、我々はそのGIFの最終形式に似た数字で終わります。 「Writing the Fractal Tree in Vanilla JS」 まず、ここに最終製品があります(途中で調整することができます): これを踏まえて、一歩一歩。 まず、我々は我々の index.html ファイルを合理的なサイズの画布とすべての JS コードが含まれるスクリプトタグで初期化します。 <!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> その後、JavaScriptを書き始めます。 We initialize our canvas element on JS, by accessing it through the myCanvas variable and creating the 2D rendering context with the ctx (context) variable. 私たちは、myanvas変数を介してそれをアクセスし、ctx(context)変数を使用して2Dレンダリングコンテキストを作成します。 <!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 メソッドは、この場合、2D で描くことを可能にするプロパティやメソッドを追加します。 さて、考える時が来ました! フラクトルツリーを描くアルゴリズムをどのように定義できますか? Hm... 🤔 見よ、わたしたちは、枝がどんどん小さくなっていくことを知っており、それぞれの枝の終わりには、左に一つ、右に一つ、二つの枝が出てくる。 言い換えれば、枝が十分に長いときには、それに2つの小さな枝を付ける。 どこかでリクルシブな発言を使うべきかのように聞こえるでしょう? コードに戻り、私たちの機能を定義します。 それは少なくとも4つの論点を取るべきです: 枝が始まる場所のXとYの座標、その枝の長さ、その角度。 fractalTree 私たちの関数内では、 beginPath() メソッドで描き始めて、save() メソッドで canvas の状態を保存します。 <!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> したがって、我々はまず3つの方法を追加し、翻訳し、回転し、moveTo を「移動」し、布、その起源、そして我々の「鉛筆」を「動かす」ので、我々が望む角度で枝を描くことができます。 if 文の前の最後の 2 つの方法は lineTo と stroke で、第 1 つは現在のパスに直線を追加し、第 2 つはそれを転送します。 今、私たちは、いつ再発を止めるべきか、いつ描くのを止めるべきかを告げる if 文を持っています。 , "restores the most recently saved canvas state by popping the top entry in the drawing state stack." を表示します。 MDNドキュメント if 文の後には、再起動呼び出しと、再起動方法への別の呼び出しがあり、それから、我々がちょうど完了した機能への呼び出しがあります。 あなたのブラウザでコードを実行してください. あなたは、ようやく、フラクタルツリーを見る! 素晴らしいですよね?今度はもっとうまくいくようにしましょう。 We will add a new parameter to our draw function, branchWidth, to make our Fractal Tree more realistic. 私たちは、私たちの描く機能に新しいパラメータ、 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)です。また、影の方法、shadowBlur と shadowColorです。 ファイルを保存し、最終製品を見るためにブラウザで開きます。 今私はあなたがコードで遊ぶことを奨励します! shadowColorを変更し、fillStyleを変更し、より短いまたはより長いフラクタルツリーを作成し、角度を変更したり、葉を追加しようとします、それは挑戦すべきです 😉 フラクトルツリーの向こう側 この投稿の初めに示したように、異なるフラクトルがあります。Canvas APIでそれらをすべて作るのは簡単ではありませんが、それは可能でなければなりません。私はCプログラミング言語でそれらのいくつかを作りました、そして私はまたp5.jsで遊んでいました。 p5.js はアーティストによって作成されたオープンソースの JavaScript ライブラリです。 あなたはコードで芸術を作ることに興味があるなら、それは必須です。 チェックできるページ . 処理言語 スタート ここ さて、これが今です! 読んでくれてありがとう、質問にコメントし、次の投稿で会いましょう! カバー by socialtrendspr0 from Pixabay カバー by から ソーシャルトレンド ピクセイ
