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地毯

JavaScript图形实例:SierPinski三角形的更多相关文章

  1. JavaScript图形实例:随机SierPinski三角形

    在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...

  2. JavaScript图形实例:线段构图

    在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...

  3. JavaScript图形实例:再谈IFS生成图形

    在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...

  4. JavaScript图形实例:迭代函数系统生成图形

    迭代函数系统(Iterated Function System,IFS)可以用来创建分形图案,它是分形理论的重要分支,也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯 ...

  5. JavaScript图形实例:图形的旋转变换

    旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P( ...

  6. JavaScript图形实例:Canvas API

    1.Canvas概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 要使用HTML5在浏览器窗口中绘制 ...

  7. JavaScript图形实例:合成花卉图

    我们知道在直角坐标系中,圆的方程可描述为: X=R*COS(α) Y=R*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个圆.编写 ...

  8. JavaScript图形实例:四瓣花型图案

    设有坐标计算公式如下: X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中对坐标位置(X,Y)描 ...

  9. JavaScript图形实例:图形的扇形变换和环形变换

    1.1  扇形变换 将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换. 设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2),长方形的长为X,扇形圆心坐标为 ...

随机推荐

  1. java算法集训代码填空题练习3

    1 数组转置 编写程序将2行3列的数组行列置换复制给3行2列的数组(即数组的转置).已经写了如下代码,请完善之: class y{ public static void main(String[] a ...

  2. Java实现 蓝桥杯 算法提高 道路和航路

    问题描述 农夫约翰正在针对一个新区域的牛奶配送合同进行研究.他打算分发牛奶到T个城镇(标号为1-T),这些城镇通过R条标号为(1-R)的道路和P条标号为(1-P)的航路相连. 每一条公路i或者航路i表 ...

  3. java实现第五届蓝桥杯等额本金

    等额本金 题目描述 小明从银行贷款3万元.约定分24个月,以等额本金方式还款. 这种还款方式就是把贷款额度等分到24个月.每个月除了要还固定的本金外,还要还贷款余额在一个月中产生的利息. 假设月利率是 ...

  4. [web][学习随笔]php中http post&get数据传输

    GET <!--客户端发送--> <form id="form1" action="doGet.php" method="get&q ...

  5. WAMP3.1 安装php_redis.dll扩展并配置php.ini

    一. 下载对应版本的php_redis.dll 下载地址:http://windows.php.net/downloads/pecl/releases/redis 注:php7目录下有php7.dll ...

  6. 《大话数据库》-SQL语句执行时,底层究竟做了什么小动作?

    <大话数据库>-SQL语句执行时,底层究竟做了什么小动作? 前言 大家好,我是Taoye,试图用玩世不恭过的态度对待生活的Coder. 现如今我们已然进入了大数据时代,无论是业内还是业外的 ...

  7. 透过源码看懂Flink核心框架的执行流程

    前言 Flink是大数据处理领域最近很火的一个开源的分布式.高性能的流式处理框架,其对数据的处理可以达到毫秒级别.本文以一个来自官网的WordCount例子为引,全面阐述flink的核心架构及执行流程 ...

  8. (十一)Maven之profile实现多环境配置动态切换

    原文链接:https://www.cnblogs.com/zeng1994/p/a442108012ffd6a97b22c63055b48fe9.html 一.多环境配置文件的放置  将不同环境下的配 ...

  9. 解决mysql插入数据l出现"the table is full"的问题

    需要修改Mysql的配置文件my.ini,在[mysqld]下添加/修改两行:tmp_table_size = 256Mmax_heap_table_size = 256M

  10. cb10a_c++_顺序容器的操作3关系运算符

    cb10a_c++_cb09a_c++_顺序容器的操作3 2 顺序容器的操作3 3 关系运算符 4 所有的容器类型都可以使用 5 比较的容器必须具有相同的容器类型,double不能与int作比较 6 ...