互动媒体技术博客

临摹图像
互动媒体技术博客

  1. 观察
    整个运动可以看做小圆组成的大圆的转动,加上小圆的径向循环运动
  2. 宏观设计
    使用millis()获取时间,以t作为全局时间变量,修改t可以改变整个运动的速度
    在draw函数不断rotate画布来作为大圆的转动
    另作drawBall函数,实现单个小球的径向循环运动,
    ellipse(r,0, 20, 20);
    通过改变r来实现循环运动
  3. 微观调整
    var fai=(PIttt/3);//fai会决定单个球的运动(半径的变化的)速度
    if(3
    cos(fai)<1 &&3cos(fai)>-1)
    r=rad
    3cos(fai);
    else if(3
    cos(fai)>1)r=rad;
    else r=-rad;
    使得小球的运动连续且有停顿
    将小球复制20个(这里是复制了24个),加上开始时间差
  4. 收尾
    调整整体转动的速度,使得弧度和速度比较接近原图的速度
    给小球加上不同的颜色
  5. 问题反思与总结
    原图中小球的位置变换时是相互交错的,在这里并没有实现这一点
    变换的时候似乎形状不太圆
    应使用pop()和push()函数使得寒素环境的独立性更好
    稍微改了一下参数就变成拓展了的了