利用三角函数生成计算机图形

利用三角函数生成计算机图形

吴占鹏

（辽宁省风沙地改良利用研究所阜新123000）

摘要：利用三角函数，通过加倍、嵌入等修饰，以实现生成各种绚丽图形。

关键词：计算机图形；三角函数；嵌入；修饰

计算机图形学自诞生以来，在辅助设计、美术、动画艺术、可视化计算、虚拟现实等方面得到了广泛应用。计算机图形主要分为图像和图形。图像一般是指自然生成的，如数码照片，扫描文件等。图形一般是通过计算生成的。在图形中，很多程序图形和三角函数有密切关系，利用三角函数创作曲线、着色、模型、动画可以产生意想不到的效果。

1曲线

1.1曲线细分与动画周期

三角函数曲线细分是把曲线一个圆周周期内分成n干段，即2*Math.PI /n，如果是旋转动画，简单曲线的动画周期是2*n。后面有时会简化成Math.PI/n，那么周期是4*n。

1.2简单曲线

最简单曲线当属圆形，用javascript可表示成

moveTo(a,0);

for(i=0;i

x=a*Math.cos(i*2*Math.PI/n);

y=b*Math.sin(i*2*Math.PI/n);

lineTo(x,y);

}

这里a=b,为圆形，否则a≠b为椭圆。如果把y=b*Math.sin(i*2*Math.PI/n)改成y=b*Math.sin(i*4*Math.PI/n)，则圆形变成8字形。如果写成

x=a*Math.cos(i*m*Math.PI/n);

y=b*Math.sin(i*(n) *Math.PI/n);

其中m不能为偶数，n=m+1,或n=m-1。则图形为：

m=1,n=2 m=3,n=2 m=3, n=4 m=5,n=4 m=5,n=6 m=7,n=6

图1变化m，n生成的曲线

1.3曲线修饰

1.3.1加修饰

如果定义一个常量x=Math.PI/n，循环变量i，可以写出他的绘图程序

for(i=0,i<2*n,i++){

x=a1*Math.cos(b1*i*x)+a2*Math.cos(b2*i*x);

y=a1*Math.sin(b1*i*x)+a2*Math.sin(b2*i*x);

lineTo(x,y);

}

这里a1、a2为半径系数，是大于0的实数，b1、b2为周期系数，是大于0的正整

数，且b2>b1，则图形会在圆形图案上形成b2-b1个突起。如果把x、y的赋值写成x=a1*Math.cos(b1*i*x)+a2*Math.sin(b2*i*x);

y=a1*Math.sin(b1*i*x)+a2*Math.cos(b2*i*x);

或写成

x=a1*Math.cos(b1*i*x)-a2*Math.cos(b2*i*x);

y=a1*Math.sin(b1*i*x)+a2*Math.sin(b2*i*x);

或写成

x=a1*Math.cos(b1*i*x)+a2*Math.cos(b2*i*x);

y=a1*Math.sin(b1*i*x)-a2*Math.sin(b2*i*x);

则图案的突起是b1+b2个。这里我们把

a1*Math.cos(b1*i*x)

a1*Math.sin(b1*i*x)

称之为主函数，把

a2*Math.cos(b2*i*x)

a2*Math.sin(b2*i*x)

称之为修饰函数。修饰函数可随意增加，只要遵循突起规律，可以创造出无数个美丽图形，而且是对称图形。如果把b1和b2换成b1,b2,b3,b4四个不等的正整数，生成的图形多数可能是不对称的。

图2 通过加修饰生成的曲线

1.3.2乘修饰

可以写成

x=a*Math.cos(i*x)*Math.cos(b*i*x);

y=a*Math.sin(i*x)*Math.cos(b*i*x);

或写成

x=a*Math.cos(i*x)*(c+Math.cos(b*i*x));

y=a*Math.sin(i*x)*(c+Math.cos(b*i*x));

b=5,c=1 b=5,c=1.5 b=5,c=0.3 b=6,c=0.3

图3通过乘修饰生成的曲线

1.3.3嵌入修饰

如果周期系数出现非整数，曲线可能会产生无规则穿插。当把小数部分定义成1/m，即b2*(1+1/m)，这样曲线经过b2*(m+1)次又形成重合，产生嵌入效果，即嵌入修饰，

其循环周期是2*n*m（n在前面定义过）。也可写成b2*(k+s/m)，这里s允许是负整数，嵌入次数为b2*(k*m+s)。这种嵌入方式加修饰、乘修饰都适合。

图4 利用嵌入修饰生成的花篮

1.3.4藤编效果

利用正弦余弦的嵌入方式只改变b2，在曲线的交汇点处产生偏移，避免重合，就像用一条藤子编织而成。

图5藤编效果曲线

2着色

利用三角函数可以使着色产生渐变效果。

2.1简单渐变

这种着色界限不是很明显，没有纯红、纯绿和纯蓝色：

r=127.5*(1+ Math.cos(t*p/n));

g=127.5*(1+ Math.cos((t+c)*p/n));

b=127.5*(1+ Math.cos((t+2*c)*p/n));

2.2三色渐变

直接滤除曲线小于0部分，突出红、绿和蓝三颜色：

Math.cos(t*p/n) <0?r=0:r=255*Math.cos(t*p/n);

Math.cos((t+c)*p/n) <0?g=0:g=255*Math.cos((t+c)*p/n);

Math.cos((t+2*c)*p/n) <0?b=0: b=255*Math.cos((t+2*c)*p/n);

2.3组合渐变

组合渐变更细分一些，可以组合成红、黄、绿、青、蓝、紫色：

Math.cos(t*p/n)+0.5<0?r=0:(Math.cos(t*p/n)+0.5>1?r=255:r=255*(0.5+Math.cos(t*p/n)));

Math.cos((t+c)*p/n)+0.5<0?g=0:(Math.cos((t+c)*p/n)+0.5>1?g=255:g=255*(0.5+Math.cos((t+c)*p/n) ));

Math.cos((t+2*c)*p/n)+0.5<0?b=0:(Math.cos((t+2*c)*p/n)+0.5>1?b=255:b=255*(0.5+Math.cos((t+2 *c)*p/n)));

这里c=循环周期/3。