动态图片

动态图片实现

function setup() {
createCanvas(500, 500);
}

function draw() {
background(0);
// 获得毫秒数
var Millis = millis();

// 获得秒数，相比second()，能获得小数点后的部分
var t = millis()/1000;
//var Second=second();
drawcube(t);

fill(69,139,116);
drawBob(t,150);
fill(82,139,139);
drawBob(t+(PI/12),140);
fill(102,205,170);
drawBob(t+(PI/6),130);
fill(118,238,198);
drawBob(t+(PI/4),120);
fill(127,255,212);
drawBob(t+(PI/3),110);
fill(151,255,255);
drawBob(t+(5*PI/12),100);

//
fill(69,139,116);
drawBob(-t,85);
fill(82,139,139);
drawBob(-t+(PI/12),85);
fill(102,205,170);
drawBob(-t+(PI/6),85);
fill(118,238,198);
drawBob(-t+(PI/4),85);
fill(127,255,212);
drawBob(-t+(PI/3),85);
fill(151,255,255);
drawBob(-t+(5*PI/12),85);
}

function drawBob(t,R)
{

t=t%3.64;

//t是时间，也是角度
if(t<=2*PI)
{
if (t<=0.5) //右半边
{

//line(200,200,200+100*sin(t),200-100*cos(t));
ellipse(200+R*sin(t),200-R*cos(t),15,15);

}

else if(0.5<t&&t<3.14)
{

t=2*t-0.5

 //line(200,200,200+100*sin(t),200-100*cos(t));
 ellipse(200+R*sin(t),200-R*cos(t),15,15);

}

else if(3.14<=t&&t<=3.64)
{
t=t+2.64;
//line(200,200,200+100sin(t),200-100cos(t));
ellipse(200+Rsin(t),200-Rcos(t),15,15);

}
}

}

function drawcube(t)
{
var theta=2tPI/6;
fill(141,238,238);
arc(200,200,100,100,PI/6+2theta,5PI/6+2theta); //顺
fill(0);
arc(200,200,94,94,PI/6+2theta,5PI/6+2theta); //顺

fill(151,255,255);
arc(200,200,80,80,PI/6-2theta,5PI/6-2theta); //顺
fill(0);
arc(200,200,74,74,PI/6-2theta,5PI/6-2theta); //顺

fill(118,238,198);
arc(200,200,60,60,PI/6+2theta,5PI/6+2theta); //顺
fill(0);
arc(200,200,54,54,PI/6+2theta,5PI/6+2theta); //顺

fill(102,205,170);
arc(200,200,40,40,PI/6-2theta,5PI/6-2theta); //顺
fill(0);
arc(200,200,34,34,PI/6-2theta,5PI/6-2theta); //顺

fill(82,139,139);
arc(200,200,20,20,PI/6+2theta,5PI/6+2theta); //顺
fill(0);
arc(200,200,14,14,PI/6+2theta,5PI/6+2theta); //顺
}`

function setup() {
  createCanvas(500, 500);
}

var t_before=0;  //上一次的时间

function draw() 
{
  background(255);
  
  	// 获得毫秒数
   var Millis = millis();
  
// 获得秒数，相比second()，能获得小数点后的部分
   var t = millis()/1000; 
  	// 获得毫秒数
   var Millis = millis();
  
// 获得秒数，相比second()，能获得小数点后的部分
   var t = millis()/1000; 
  
  drawBob(t);
  
 
}

  
   var x=0;
   var y=0;
   var theta=0;
   var s=0;

//在垂线上画个×
function cha()
{
  line(195,195,205,205);
  line(195,205,205,195);
}




function drawBob(t)
{  
  
  cha();
  drawArc(t);
  
   //t是时间，也是角度
   if(t<=2*PI)
   {
      if (t<=0.5)  //右半边
  { 
    
    line(200,200,200+100*sin(t),200-100*cos(t));
    fill(0);
    ellipse(200+100*sin(t),200-100*cos(t),12,12);
  }
  
  else if(0.5<t&&t<3.14)
  {
    
    t=2*t-0.5
    
     line(200,200,200+100*sin(t),200-100*cos(t));
    fill(0);
     ellipse(200+100*sin(t),200-100*cos(t),12,12);
   
  }
  
  else if(3.14<=t&&t<=3.64)
  {
    t=t+2.64;
    line(200,200,200+100*sin(t),200-100*cos(t)); 
    fill(0);
    ellipse(200+100*sin(t),200-100*cos(t),12,12);
    
  }
   } 

临摹图像的规律：
 两个小球的速度是相互对应的，摆锤小球的速度与所在高度的关系是相反的。速度与时间的关系近似正弦函数。
 扩展在临摹的基础上，利用小球运动与时间的关系，再给每个小球赋予不同的初相位，形成相位差。外层和内层小球的角速度是相反的。