JavaScript图形实例：再谈IFS生成图形
在“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生成图形的更多相关文章
- JavaScript图形实例：迭代函数系统生成图形
迭代函数系统(Iterated Function System,IFS)可以用来创建分形图案,它是分形理论的重要分支,也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯 ...
- Javascript继承，再谈
说到Javascript的继承,相信只要是前端开发者都有所了解或应用,因为这是太基础的知识了.但不知各位有没有深入去理解其中的玄机与奥秘.今本人不才,但也想用自己的理解来说一说这其中的玄机和奥秘. 一 ...
- JavaScript图形实例：随机SierPinski三角形
在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...
- JavaScript图形实例：图形的扇形变换和环形变换
1.1 扇形变换 将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换. 设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2),长方形的长为X,扇形圆心坐标为 ...
- JavaScript图形实例：线段构图
在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...
- C#生成图形验证码
先看效果: 再上代码 public class CaptchaHelper { private static Random rand = new Random(); private static in ...
- PHP5 GD库生成图形验证码(汉字)
PHP5 GD库生成图形验证码且带有汉字的实例分享. 1,利用GD库函数生成图片,并在图片上写指定字符imagecreatetruecolor 新建一个真彩色图像imagecolorallocate ...
- 再谈JavaScript的数据类型问题
JavaScript的数据类型问题已经讨论过很多次了,但许多人还有许多书仍然沿用着错误的.混乱的一些观点,所以就再细讲一回. 提及这个讨论的原因在于argb同学在我的MSN博客上的一段回复,又更早的起 ...
- eclipse绘制activiti无法生成图形
今天使用eclipse绘制acitiviti,发现无法绘制图形,设置里面勾选也勾选了,同时activiti插件也是最新的,最后发现同时打开了两个eclipse窗口就不支持生成图形,看来只能开一个窗口了 ...
随机推荐
- java实现第五届蓝桥杯年龄巧合
年龄巧合 小明和他的表弟一起去看电影,有人问他们的年龄.小明说:今年是我们的幸运年啊.我出生年份的四位数字加起来刚好是我的年龄.表弟的也是如此.已知今年是2014年,并且,小明说的年龄指的是周岁. 请 ...
- java实现第七届蓝桥杯愤怒小鸟
愤怒小鸟 题目描述 X星球愤怒的小鸟喜欢撞火车! 一根平直的铁轨上两火车间相距 1000 米 两火车 (不妨称A和B) 以时速 10米/秒 相对行驶. 愤怒的小鸟从A车出发,时速50米/秒,撞向B车, ...
- java实现第六届蓝桥杯加法变乘法
加法变乘法 题目描述 我们都知道:1+2+3+ - + 49 = 1225 现在要求你把其中两个不相邻的加号变成乘号,使得结果为2015 比如: 1+2+3+-+1011+12+-+2728+29+- ...
- 【Mysql】使用一条sql查询出库表结构信息
1.新建查询 将以下脚本粘贴进去 脚本如下: SELECT TABLE_SCHEMA 库名, TABLE_NAME 表名, COLUMN_NAME 列名, COLUMN_TYPE 数据类型, DATA ...
- mysql基础之-mysql存储引擎概述(八)
0x01 mysql 存储引擎:存储引擎也通常被称作“表类型” mysql> show engines; --- 查看当前所有所支持的存储引擎 mysql> show table st ...
- Vue点击改变属性(改变文字颜色)
<template> <div class="tab-control"> <div v-for="(item , index) in tit ...
- Openshift 4.4 静态 IP 离线安装系列：准备离线资源
本系列文章描述了离线环境下以 UPI (User Provisioned Infrastructure) 模式安装 Openshift Container Platform (OCP) 4.4.5 的 ...
- js中有遍历作用相关的方法详解总结
题外话 os:个人笔记: 大概接触过map, foreach, for, filter, findIn, includes等等 字符串检索 .indexOf() 返回某个指定字符串值在字符串中首次出现 ...
- 曹工说JDK源码（4）--抄了一小段ConcurrentHashMap的代码，我解决了部分场景下的Redis缓存雪崩问题
曹工说JDK源码(1)--ConcurrentHashMap,扩容前大家同在一个哈希桶,为啥扩容后,你去新数组的高位,我只能去低位? 曹工说JDK源码(2)--ConcurrentHashMap的多线 ...
- thinkphp5集成GatewayWorker
Workerman是一款纯PHP开发的开源高性能的PHP socket 服务器框架,而GatewayWorker则是基于Workerman开发的一个长连接框架,支持分布式部署,支持全局广播或者向任意客 ...