成果索引表
LineLib_01.js
--主函数对应表，与线条上下顺序对应--
- WideSnowFlake(0,100,700,5,50);
- NarrowSnowFlake(0,150,700,5,50);
- SnowFlakeBorad(0,250,700,50);
- ResidualCurve(0,350,700,20,20);
- ResidualCurve(0,400,700,20,8);
- theta+=TWO_PI/frms;
RoundNoise(400,500,50,10,0.6,2,theta,2); - theta+=TWO_PI/frms;
RoundNoise(500,500,50,25,0.2,3,theta,2);
——6\7为右下的两个动态对话框
Pattern.js
- drawSmileFace(80,500,50,1);32
- drawSmileFace(140,500,50,0.5);
- drawSmileFace(200,500,50,0.1);
——1、2、3为三个固定笑脸 - time++;
var Smile=cos(time/10);
drawSmileFace(260,500,50,Smile);
——眨眼笑脸
线条部分
LineLib_01.js文件
1.function WideSnowFlake
- 核心思想：
利用noise与random的属性对y值进行上下的改变，再利用line函数画出短线模拟雪花点。
跳转到预览目录
2.function NarrowSnowFlake
- 核心思想：
自WideSnowFlake衍生而来。
起初时因为发现每次刷新时WideSnowFlake绘制出的线条宽度不一，发现可以设置参数调整线条的宽度，形成新的效果。
将WideSnowFlake()中固定的movespeed乘上随机小数，获得随机值move，利用noise(move)来随机控制线条的宽度，形成聚合效果。
跳转到预览目录
3.function SnowFlakeBorad
- 核心思想：
发现了可以控制WideSnowFlake()中绘制线条的宽度后，思考是否能够在固定(x,y)范围内实现雪花屏效果。
4.function ResidualCurve
- 核心思想：
希望结合之前的随机方法，生成随机波动的曲线。
寻找到了curveVertex()方法记录点用于绘制曲线。
想要控制曲线的平滑度，设想是增加绘制点间的距离，于是增加了Smooth变量。同时yHeight变量可以控制y值变化的最大区间，配合Smooth可以更好的实现范例中平滑拉伸的效果。
跳转到预览目录
5.function RoundNoise
- 核心思想：
环形动态对话框绘制。
用于交互漫画，设想可以控制绘制位置(x0,y0)、对话框大小®、线条的平滑值(nInt)、上下跳动的极限范围(nAmp)、重叠对话框效果(num)、对话框宽度(w)。
利用前面在ResidualCurve()中学习的*curveVertex()*方法绘制平滑的曲线。
跳转到预览目录
动态图形部分
Pattern.js
1.function drawSmileFace
- 核心思想：
绘制可自由设置的动态笑脸。
利用弧函数arc(x,y,w,h,[start],[end])绘制会眨动的眼睛。
UpDown参数为0~1内小数，对圆的y轴值进行调整，达到由圆变线的效果。
- 动态绘制：
主函数调用时：
time++;
var Smile=cos(time/10);
drawSmileFace(260,500,50,Smile);
跳转到预览目录
588
