在“JavaScript图形实例：迭代函数系统生成图形”一文中，我们介绍了采用迭代函数系统（Iterated Function System，IFS）创建分形图案的一些实例。在该文中，仿射变换函数W的一般形式为

X1=a*X0 + b*Y0 + e

Y1=c*X0 + d*Y0 + f

给定不同的IFS码，可以生成不同的图形。

实际上，仿射变换函数的形式还可以是

X1= a * X0*cos(c/180) -  b * Y0*sin(d/180) + e

Y1= a * X0*sin(c/180) +  b * Y0*cos(d/180) + f

按这种仿射变换函数并给出相应的IFS码，编写如下的HTML代码。

<!DOCTYPE html>

<head>

<title>IFS生成图形</title>

<script type="text/javascript">

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

ctx.fillStyle="#EEEEFF";

ctx.fillRect(0,0,500,500);

ctx.fillStyle="red";

var a=[0.5,0.5,0.25,0.25];

var b=[0.5,0.5,0.25,0.25];

var c=[0,0,0,0];

var d=[0,0,0,0];

var e=[0,0.5,2.0,-1.0];

var f=[0,0,2.0,2.0];

var p=[0.2,0.2,0.3,0.3];

var x0=0;

var y0=0;

for (i=0; i<100000; i++)

{

r=Math.random();

if (r<=p[0])

index=0;

else if (r<=p[0]+p[1])

index=1;

else if (r<=p[0]+p[1]+p[2])

index=2;

else

index=3;

x1=a[index]*x0*Math.cos(c[index]/180)-b[index]*y0*Math.sin(d[index]/180)+e[index];

y1=a[index]*x0*Math.sin(c[index]/180)+b[index]*y0*Math.cos(d[index]/180)+f[index];

ctx.fillText('.',x1*100+200,400-y1*100);

x0 = x1;

y0 = y1;

}

}

</script>

</head>

<body onload="draw('myCanvas');">

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

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图1所示的王冠图案。

图1  王冠

将上面程序中的IFS码定义改写为：

var a=[0.2,0.2,0.2,0.2,0.85];

var b=[0.2,0.2,0.2,0.2,0.85];

var c=[0,0,0,0,100];

var d=[0,0,0,0,100];

var e=[0.7,-0.7,0,0,0];

var f=[0,0,0.7,-0.7,0];

var p=[0.2,0.2,0.2,0.2,0.2];

由于有5个变换函数，适当添加一个条件选择语句，可在浏览器窗口中绘制出如图2所示的万花筒图案。

图2  万花筒

实际上，还可以采用1种变换函数进行迭代变换，生成有趣的图形。下面介绍环形图案和窗花形图案的迭代生成方法。

环形图案的迭代变换公式为：

Xn+1=d*sin(a*Xn)-sin(b*Yn)

Yn+1=c*cos(a*Xn)+cos(b*Yn)

根据这个迭代公式，编写如下的HTML代码。

<!DOCTYPE html>

<head>

<title>环形图案</title>

<script type="text/javascript">

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

ctx.fillStyle="#EEEEFF";

ctx.fillRect(0,0,500,500);

ctx.fillStyle="red";

var a=1.40;

var b=1.56;

var c=1.40;

var d=-6.56;

var x0=0;

var y0=0;

for (i=0; i<10000; i++)

{

x1=d*Math.sin(a*x0)-Math.sin(b*y0);

y1=c*Math.cos(a*x0)+Math.cos(b*y0);

ctx.fillText('.',x1*30+250,y1*30+200);

x0 = x1;

y0 = y1;

}

}

</script>

</head>

<body onload="draw('myCanvas');">

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

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图3所示的环形图案。

图3  环形图案

窗花形图案的迭代公式为：

Xn+1= Yn-sign(Xn)*|b*Xn-c|1/2

Yn+1= a-Xn

根据这个迭代公式，编写如下的HTML代码。

<!DOCTYPE html>

<head>

<title>窗花形图案</title>

<script type="text/javascript">

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

ctx.fillStyle="#EEEEFF";

ctx.fillRect(0,0,500,500);

ctx.fillStyle="red";

var a=1;

var b=4;

var c=50;

var x0=0;

var y0=0;

for (i=0; i<100000; i++)

{

x1=y0-Math.sign(x0)*Math.sqrt(Math.abs(b*x0-c));

y1=a-x0;

ctx.fillText('.',x1+250,y1+200);

x0 = x1;

y0 = y1;

}

}

</script>

</head>

<body onload="draw('myCanvas');">

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

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图4所示的窗花形图案。

图4  a=1，b=4，c=50时绘制的图案

同样，迭代公式中的系数a,b,c作为IFS码，取不同的值会生成不同的图形。

例如，取a=0.4，b=1，c=50时，可以在浏览器窗口中绘制出如图5所示的窗花形图案。

图5  a=0.4，b=1，c=50时绘制的图案

例如，取a=0.4，b=1，c=50时，并修改“ctx.fillText('.',x1+250,y1+200);”为“ctx.fillText('.',x1*100+250,y1*100+200);”进行适当放大，可以在浏览器窗口中绘制出如图6所示的图案。

图6  a=0.4，b=1，c=0时绘制的图案

JavaScript图形实例：再谈IFS生成图形的更多相关文章

  1. JavaScript图形实例：迭代函数系统生成图形

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

  2. Javascript继承，再谈

    说到Javascript的继承,相信只要是前端开发者都有所了解或应用,因为这是太基础的知识了.但不知各位有没有深入去理解其中的玄机与奥秘.今本人不才,但也想用自己的理解来说一说这其中的玄机和奥秘. 一 ...

  3. JavaScript图形实例：随机SierPinski三角形

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

  4. JavaScript图形实例：图形的扇形变换和环形变换

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

  5. JavaScript图形实例：线段构图

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

  6. C#生成图形验证码

    先看效果: 再上代码 public class CaptchaHelper { private static Random rand = new Random(); private static in ...

  7. PHP5 GD库生成图形验证码(汉字)

    PHP5 GD库生成图形验证码且带有汉字的实例分享. 1,利用GD库函数生成图片,并在图片上写指定字符imagecreatetruecolor 新建一个真彩色图像imagecolorallocate ...

  8. 再谈JavaScript的数据类型问题

    JavaScript的数据类型问题已经讨论过很多次了,但许多人还有许多书仍然沿用着错误的.混乱的一些观点,所以就再细讲一回. 提及这个讨论的原因在于argb同学在我的MSN博客上的一段回复,又更早的起 ...

  9. eclipse绘制activiti无法生成图形

    今天使用eclipse绘制acitiviti,发现无法绘制图形,设置里面勾选也勾选了,同时activiti插件也是最新的,最后发现同时打开了两个eclipse窗口就不支持生成图形,看来只能开一个窗口了 ...

随机推荐

  1. java算法集训结果填空题练习2

    1 欧拉与鸡蛋 大数学家欧拉在集市上遇到了本村的两个农妇,每人跨着个空篮子.她们和欧拉打招呼说两人刚刚卖完了所有的鸡蛋. 欧拉随便问:"卖了多少鸡蛋呢?" 不料一个说:" ...

  2. java实现滑动解锁

    滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上都一致 ...

  3. java实现第五届蓝桥杯锦标赛

    锦标赛 这题小编能力有限,还望大佬解决 题目描述 如果要在n个数据中挑选出第一大和第二大的数据(要求输出数据所在位置和值),使用什么方法比较的次数最少?我们可以从体育锦标赛中受到启发. 如图[1.pn ...

  4. leetcode之两数相加解题思路

    问题描述 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,数组中同一个元素不能使 ...

  5. Entity Framework Core遇到的问题汇总

    1.add-migration : 无法将“add-migration”项识别为 cmdlet.函数.脚本文件或可运行程序的名称.请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次. 使用E ...

  6. 如何在react中使用decorator

    2020-03-27 如何在react中使用decorator decorator目前都需要修改babel才能使用 说一下具体的操作方法 踩了一天的坑... 步骤1: yarn create reac ...

  7. IDEA优化内存配置，可提高启动和运行速度

    找到IDEA安装的bin目录 打开idea.exe.vmoptions 文件 关键的三个参数的说明 1. -Xms 是最小启动内存参数 2. -Xmx 是最大运行内存参数 3.-XX:Reserved ...

  8. php配置文件

    mysql的配置文件是 my.iniphp配置文件是 php.iniThinKPHP配置文件 config.phpApche配置文件 httpd-confThinkPHP的运行,开启调试模式配置为 a ...

  9. MFC时间简单比较方法

    MFC//时间简单比较方法 void CMFCsaveListTofileDlg::OnBnClickedButton6()//时间简单比较方法 { // TODO: 在此添加控件通知处理程序代码 C ...

  10. 腾讯云Redis混合存储版重磅推出，万字长文助你破解缓存难题！

    导语 | 缓存+存储的系统架构是目前常见的系统架构,缓存层负责加速访问,存储层负责存储数据.这样的架构需要业务层或者是中间件去实现缓存和存储的双写.冷热数据的交换,同时还面临着缓存失效.缓存刷脏.数据 ...