⚪互动媒体日常●线条库

成果索引表

总览

LineLib_01.js

--主函数对应表,与线条上下顺序对应--
  1. WideSnowFlake(0,100,700,5,50);
  2. NarrowSnowFlake(0,150,700,5,50);
  3. SnowFlakeBorad(0,250,700,50);
  4. ResidualCurve(0,350,700,20,20);
  5. ResidualCurve(0,400,700,20,8);
  6. theta+=TWO_PI/frms;
    RoundNoise(400,500,50,10,0.6,2,theta,2);
  7. theta+=TWO_PI/frms;
    RoundNoise(500,500,50,25,0.2,3,theta,2);
    ——6\7为右下的两个动态对话框

Pattern.js

  1. drawSmileFace(80,500,50,1);32
  2. drawSmileFace(140,500,50,0.5);
  3. drawSmileFace(200,500,50,0.1);
    ——1、2、3为三个固定笑脸
  4. time++;
    var Smile=cos(time/10);
    drawSmileFace(260,500,50,Smile);
    ——眨眼笑脸

线条部分

  • 在LineLib_0*.js中实现线条的绘制

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);

跳转到预览目录

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页