JavaScript圖形實例:SierPinski三角形

来源:https://www.cnblogs.com/cs-whut/archive/2020/07/04/13233655.html
-Advertisement-
Play Games

1.SierPinski三角形 Sierpinski三角形是一種分形,由波蘭數學家謝爾賓斯基在1915年提出,它是一種典型的自相似集。其生成過程為: (1)取一個三角形(多數使用等邊三角形); (2)沿三邊中點連線,將它分成四個小三角形; (3)對上、左、右這三個小三角形重覆這一過程。 SierPi ...


1.SierPinski三角形

      Sierpinski三角形是一種分形,由波蘭數學家謝爾賓斯基在1915年提出,它是一種典型的自相似集。其生成過程為:

(1)取一個三角形(多數使用等邊三角形);

(2)沿三邊中點連線,將它分成四個小三角形;

(3)對上、左、右這三個小三角形重覆這一過程。

SierPinski三角形的生成示意如圖1所示。

 

圖1  SierPinski三角形的生成

      SierPinski三角形採用遞歸過程易於實現,編寫如下的HTML代碼。

<!DOCTYPE html>

<head>

<title>SierPinski三角形</title>

</head>

<body>

<canvas id="myCanvas" width="600" height="600" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

   var canvas = document.getElementById('myCanvas');

   var ctx = canvas.getContext('2d');

   var depth =5;

   ctx.strokeStyle = "red";

   ctx.lineWidth = 3;

   function sierpinski(x1,y1,x2,y2,x3,y3,n)

   {

        if (n<0)  return;

        ctx.beginPath();

        ctx.moveTo(x1,y1);

        ctx.lineTo(x2,y2);

        ctx.lineTo(x3,y3);

        ctx.lineTo(x1,y1);

        ctx.closePath();

        ctx.stroke();

        var x4 = (x1 + x2) / 2;

        var y4 = (y1 + y2) / 2;

        var x5 = (x2 + x3) / 2;

        var y5 = (y2 + y3) / 2;

        var x6 = (x1 + x3) / 2;

        var y6 = (y1 + y3) / 2;

        sierpinski(x1,y1,x4,y4,x6,y6,n-1);

        sierpinski(x6,y6,x5,y5,x3,y3,n-1);

        sierpinski(x4,y4,x2,y2,x5,y5,n-1);

   }

   sierpinski(300, 500-500*Math.sqrt(3)/2, 50, 500, 550, 500,depth);

</script>

</body>

</html>

      在瀏覽器中打開包含這段HTML代碼的html文件,可以看到在瀏覽器視窗中繪製出的SierPinski三角形,如圖2所示。

 

圖2  遞歸深度depth =5的SierPinski三角形

2.SierPinski墊片

SierPinski墊片的生成過程為:

(1)取一個實心的三角形(多數使用等邊三角形);

(2)沿三邊中點連線,將它分成四個小三角形,

(3)去掉中間的那一個小三角形;

(4)對其餘三個小三角形重覆這一過程。

SierPinski墊片的生成示意如圖3所示。

 

圖3  SierPinski墊片的生成

      SierPinski墊片採用遞歸過程易於實現,編寫如下的HTML代碼。

<!DOCTYPE html>

<head>

<title>SierPinski墊片</title>

</head>

<body>

<canvas id="myCanvas" width="600" height="600" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

   var canvas = document.getElementById('myCanvas');

   var ctx = canvas.getContext('2d');

   ctx.beginPath();

   ctx.moveTo(300, 500-500*Math.sqrt(3)/2);

   ctx.lineTo(50,500);

   ctx.lineTo(550,500);

   ctx.closePath();

   ctx.fillStyle="black";

   ctx.fill();

   var depth =5;

   ctx.fillStyle = "white";

   function sierpinski(x1,y1,x2,y2,x3,y3,n)

   {

        if (n<=0)  return;

        var x4 = (x1 + x2) / 2;

        var y4 = (y1 + y2) / 2;

        var x5 = (x2 + x3) / 2;

        var y5 = (y2 + y3) / 2;

        var x6 = (x1 + x3) / 2;

        var y6 = (y1 + y3) / 2;

        ctx.beginPath();

        ctx.moveTo(x4,y4);

        ctx.lineTo(x5,y5);

        ctx.lineTo(x6,y6);

        ctx.closePath();

        ctx.fill();

        sierpinski(x1,y1,x4,y4,x6,y6,n-1);

        sierpinski(x6,y6,x5,y5,x3,y3,n-1);

        sierpinski(x4,y4,x2,y2,x5,y5,n-1);

   }

   sierpinski(300, 500-500*Math.sqrt(3)/2, 50, 500, 550, 500,depth);

</script>

</body>

</html>

      在瀏覽器中打開包含這段HTML代碼的html文件,可以看到在瀏覽器視窗中繪製出的SierPinski墊片,如圖4所示。

 

圖4  遞歸深度depth =5的SierPinski墊片

3.SierPinski地毯

      SierPinski墊片的初始圖形是三角形,如果將初始圖形改成正方形,便可以得到稱為SierPinski地毯的圖形。它的生成過程為:

     (1)取一個實心的正方形;

      (2)將正方形的每邊三等分,並連接相應的等分點,從而將原正方形等分為面積相等的9個小正方形;

      (3)去掉中間的那一個小正方形;

      (4)對其餘的8個小正方形重覆這一過程。

       SierPinski墊片的生成示意如圖5所示。

 

圖5  SierPinski地毯的生成

      設正方形的左上角坐標為(x,y),邊長為L,則中間正方形的左上角坐標和邊長分別為(x+L/3,y+L/3)和L/3,其餘8個小正方形的邊長均為L/3,左上角坐標分別為(x,y)、(x+L/3,y)、(x+2*L/3,y)、(x,y+L/3)、(x+2*L/3,y+L/3)、(x,y+2*L/3)、(x+L/3,y+2*L/3)和(x+2*L/3,y+2*L/3)。

      為了繪製SierPinski地毯,可以編寫如下的HTML代碼。

<!DOCTYPE html>

<head>

<title>SierPinski地毯</title>

</head>

<body>

<canvas id="myCanvas" width="600" height="600" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

   var canvas = document.getElementById('myCanvas');

   var ctx = canvas.getContext('2d');

   ctx.fillStyle="black";

   ctx.fillRect(50,50,450,450);

   var depth =5;

   ctx.fillStyle = "white";

   function sierpinski(x,y,L,n)

   {

        if (n<=0)  return;

        ctx.fillRect(x+L/3,y+L/3,L/3,L/3);

        sierpinski(x,y,L/3,n-1);

        sierpinski(x+L/3,y,L/3,n-1);

        sierpinski(x+2*L/3,y,L/3,n-1);

        sierpinski(x,y+L/3,L/3,n-1);

        sierpinski(x+2*L/3,y+L/3,L/3,n-1);

        sierpinski(x,y+2*L/3,L/3,n-1);

        sierpinski(x+L/3,y+2*L/3,L/3,n-1);

        sierpinski(x+2*L/3,y+2*L/3,L/3,n-1);

   }

   sierpinski(50,50,450,depth);

</script>

</body>

</html>

       在瀏覽器中打開包含這段HTML代碼的html文件,可以看到在瀏覽器視窗中繪製出SierPinski墊片,如圖6所示。

圖6  遞歸深度depth =5的SierPinski地毯 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 首先,為什麼說叫所謂呢? 因為在2007年之前Js給予我們typeof解析數據類型的一共有六種(一直有爭議,但是我們暫時就按typeof來算) 'function' 'Number' 'Object' 'boolean' 'String' 'undefined' 但當我們去 typeof Symbo ...
  • Nuxt 使用 create-nuxt-app 創建項目時,選擇使用 Element-UI 為預設組件庫,發現 Nuxt 沒有開啟 Element-UI 的按需引入配置,需要自行配置。 ...
  • display: none; DOM 結構:瀏覽器不會渲染 display 屬性為 none 的元素,不占據空間; 事件監聽:無法進行 DOM 事件監聽; 性能:動態改變此屬性時會引起重排,性能較差; 繼承:不會被子元素繼承,畢竟子類也不會被渲染; transition:transition 不支持 ...
  • 本文章通過簡單的css和html的操作,來實現Tom貓小游戲的功能,通過簡單的js代碼,讓圖片不斷切換來實現動畫效果。 Tom貓小游戲的HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name= ...
  • 前置 本篇隨筆包含 _.compact 和 _.concat 及其依賴的工具函數。 你可能需要一些 JavaScript 基礎知識才能看懂一些沒有註釋的細節。 compact _.compact(array) 創建一個新數組,包含原數組中所有的非假值元素。例如 false, null, 0, "", ...
  • 如果你是想要學習web前端的新人,那麼恭喜你,看完這篇文章,儘早的選擇好努力的方向和規劃好自己的學習路線,比別人多一點付出並且持之以恆,你就已經贏在了起跑線上。 因為工作原因,經常關註有關互聯網行業的最新動態。這不,剛送走了高考,又迎來了每年的畢業季,看到好多人都說今年的前端工作不好找,很多童鞋簡歷 ...
  • 一、postcss-loader有什麼用? PostCSS 本身是一個功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 CSS。它負責把 CSS 代碼解析成抽象語法樹結構(Abstract Syntax Tree,AST),再交由插件來進行處理。插件基於 CSS 代碼的 AS ...
  • 1、精靈圖 (1)為什麼需要精靈圖 一個網頁中往往會應用到很多小的背景圖片,當網頁中的圖像過多時,伺服器就會頻繁地接收和發送請求圖片,造成伺服器的壓力過大,這將大大降低頁面的載入速度,精靈圖是將圖片放到一張裡面,這樣的話只要請求一次就可以了 精靈圖的出現降低了伺服器的壓力,提高了圖片的載入速度 (2 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...