互动媒体技术临摹及拓展作业

**

互动媒体技术临摹及拓展作业

插入链接与图片

临摹动态图片预览：

分析：该图片的效果主要是由黑色的圆半径由大减小再回归原宽度，或者白色的圆半径由小变大再回归原宽度来实现的。
这两种方法在实现时都要求变化由内向外，并在内圈完成一个周期的变化时，相邻的同色外圈开始一个同样的周期。本篇采用白色圆的粗细变化来实现该效果。

主要的方法：
（因为这里将该方法重复使用，全部显示比较繁琐，就只放一个实例）

// An highlighted block
 if(b<=5)
    {   
      b++;
      strokeWeight(10);
    
   ellipse(200,200,370,370);
   ellipse(200,200,330,330);
   ellipse(200,200,290,290);
   ellipse(200,200,250,250);
   ellipse(200,200,210,210);
   ellipse(200,200,170,170);
   ellipse(200,200,130,130);
   ellipse(200,200,90,90);
   ellipse(200,200,50,50);
    
      for(;i<=5;i++)
    {
      if(i==1)
      {
        strokeWeight(5*(i+1));
   ellipse(200,200,10,10);
      }
       if(i==2)
      {
        strokeWeight(5*(i-1));
   ellipse(200,200,10,10);
      }
      if(i>=3)
      {strokeWeight(5*(i-3));
   ellipse(200,200,10,10);
  }
    }

该方法先创建几个宽度相同且不变的圆，在处理最内侧的圆的时候分为四个阶段，分别是前两个变细阶段和后两个加粗阶段，这样相当于一个周期内存在五帧图像，并使用计时函数来控制其变化的时间。

毫秒计时函数：

let t=millis();//将程序开始到执行的时间记载并赋值给t

程序可以一直运行下去，不会在过了一个大周期就停下来：

let t=millis();
  a=0;//统计循环的次数

 
  b=1;//记载着20毫秒的次数;
    
    for(;(t-1000*a)%20==0;)
    
    {     
    i=(t-1000*a)/20+2-b;
  
  if(t%1000==0)
        a++;

大概是这样的逻辑草图：

运行结果：
截个图吧

关于拓展，则考虑其黑白线条粗细差异的增大，通过改变圆的半径和线的宽度来实现或者颜色变化，例如通过随机函数取色来替代原线条的黑色。

例如，将颜色GRB分别设为120,0，120后，就是这个样子了
（没有找到随机取色函数，以为有的）