实验一 动态图像临摹

实验一 动态图像临摹

所选临摹作品

链接: link.

二、规律分析：

基础图象分析：
该图形是由25个圆组成，呈对角线分组，共计9组，每一组的颜色喂同一个颜色，变换是类似于球体一面是彩色，一面是黑色旋转而成。
周期分析：
单组周期变换：类似于正选函数，分成4个阶段，fisttime：彩色出现->彩色停留->黑色出现（彩色消失）->黑色停留->secondtime：彩色出现以此类推，所以单组是比较简单的一种变换。
图片:
多组周期变换：仔细观察不难发现，图像开始变换时，每一组开始时间呈现出等差时间开始的循环周期，即大家都是在同一个时间上，但是开始时间是不同的，像9组相位差等距的正弦函数。同时间能存在6组在变换，即6组周期有相交的地方第7组就不会相交了。类似下图。（没做好，应该是6组在一个周期相交）

三、临摹作品展示：

颜色：使用PS工具获取RGB值，绘制出有颜色的圆。
图像变换：原作品中图像的变换像是球的旋转，而我采用了圆的变换，周期做出调整为4周期相交。
周期理念：刚开始接触P5.JS，比较生硬所以自创了一套略微效果不好的周期方法，var t=millis()/500获取时间，用了floor(t)取整，最后将t的9次增长作为总的一次周期，然后运用判断语句来实现每一组在总周期中的位置。这样有一种全局到局部的感觉，比较清晰好理解，但是参数调整过于繁琐。
判断语句内容：

 if(floor(t)%9>1&&floor(t)%9<6)

圆的变换：

 ellipse(40, 40,60*sqrt(sin(i1)*sin(i1)), 60*sqrt(sin(i1)*sin(i1)));

圆的变换不是随着大周期变换，而是到了自己的周期后才开始变换，当自己的周期结束时间就结束了。

废话少说，上代码。

var i1=0;
var i2=0;
var i3=0;
var i4=0;
var i5=0;
var i6=0;
var i7=0;
var i8=0;
var i9=0;
var date = new Date();
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  noStroke();
  var t=millis()/500;
  if(floor(t)%9>1&&floor(t)%9<6)
  {
    fill(90,49,136);
    ellipse(40, 40,60*sqrt(sin(i1)*sin(i1)), 60*sqrt(sin(i1)*sin(i1)));
    i1=i1+0.026;
  }
  else
  {
    i1=0;
  }
  
  //2
  if(floor(t)%9>2&&floor(t)%9<7)
  {
  fill(54,114,182);
  ellipse(120, 40, 60*sqrt(sin(i2)*sin(i2)), 60*sqrt(sin(i2)*sin(i2)));
  ellipse(40, 120, 60*sqrt(sin(i2)*sin(i2)), 60*sqrt(sin(i2)*sin(i2)));
    i2=i2+0.026;
  }
  else
  {
    i2=0;
  }
  //3
    if(floor(t)%9>3&&floor(t)%9<8)
  {
  fill(72,160,152);
  ellipse(200, 40, 60*sqrt(sin(i3)*sin(i3)), 60*sqrt(sin(i3)*sin(i3)));
  ellipse(120, 120, 60*sqrt(sin(i3)*sin(i3)), 60*sqrt(sin(i3)*sin(i3)));
  ellipse(40,200,60*sqrt(sin(i3)*sin(i3)), 60*sqrt(sin(i3)*sin(i3)));
    i3=i3+0.026;
  }
  else
  {
    i3=0;
  }
  //4
    if(floor(t)%9>4)
  {
  fill(144,194,85);
  ellipse(280, 40,60*sqrt(sin(i4)*sin(i4)), 60*sqrt(sin(i4)*sin(i4)));
  ellipse(200, 120,60*sqrt(sin(i4)*sin(i4)), 60*sqrt(sin(i4)*sin(i4)));
  ellipse(120,200,60*sqrt(sin(i4)*sin(i4)), 60*sqrt(sin(i4)*sin(i4)));
  ellipse(40,280,60*sqrt(sin(i4)*sin(i4)), 60*sqrt(sin(i4)*sin(i4)));
    i4=i4+0.026;
  }
  else
  {
    i4=0;
  }
  //5
    if(floor(t)%9>5||floor(t)%9<1)
  {
  fill(235,183,77);
  ellipse(360, 40, 60*sqrt(sin(i5)*sin(i5)), 60*sqrt(sin(i5)*sin(i5)));
  ellipse(280, 120, 60*sqrt(sin(i5)*sin(i5)), 60*sqrt(sin(i5)*sin(i5)));
  ellipse(200,200,60*sqrt(sin(i5)*sin(i5)), 60*sqrt(sin(i5)*sin(i5)));
  ellipse(120,280,60*sqrt(sin(i5)*sin(i5)), 60*sqrt(sin(i5)*sin(i5)));
  ellipse(40,360,60*sqrt(sin(i5)*sin(i5)), 60*sqrt(sin(i5)*sin(i5)));
    i5=i5+0.026;
  }
  else
  {
    i5=0;
  }
  //6
    if(floor(t)%9>6||floor(t)%9<2)
  {
  fill(220,100,65);
  ellipse(360, 120, 60*sqrt(sin(i6)*sin(i6)), 60*sqrt(sin(i6)*sin(i6)));
  ellipse(280, 200, 60*sqrt(sin(i6)*sin(i6)), 60*sqrt(sin(i6)*sin(i6)));
  ellipse(200, 280, 60*sqrt(sin(i6)*sin(i6)), 60*sqrt(sin(i6)*sin(i6)));
  ellipse(120, 360, 60*sqrt(sin(i6)*sin(i6)), 60*sqrt(sin(i6)*sin(i6)));
    i6=i6+0.026;
  }
  else
  {
    i6=0;
  }
  //7
    if(floor(t)%9>7||floor(t)%9<3)
  {
  fill(205,57,92);
  ellipse(360, 200, 60*sqrt(sin(i7)*sin(i7)), 60*sqrt(sin(i7)*sin(i7)));
  ellipse(280, 280, 60*sqrt(sin(i7)*sin(i7)), 60*sqrt(sin(i7)*sin(i7)));
  ellipse(200,360,60*sqrt(sin(i7)*sin(i7)), 60*sqrt(sin(i7)*sin(i7)));
    i7=i7+0.026;
  }
  else
  {
    i7=0;
  }
  //8
    if(floor(t)%9>8||floor(t)%9<4)
  {
  fill(178,51,131);
  ellipse(360, 280, 60*sqrt(sin(i8)*sin(i8)), 60*sqrt(sin(i8)*sin(i8)));
  ellipse(280, 360, 60*sqrt(sin(i8)*sin(i8)), 60*sqrt(sin(i8)*sin(i8)));
    i8=i8+0.026;
  }
  else
  {
    i8=0;
  }
  //9
    if(floor(t)%9>0&&floor(t)%9<5)
  {
  fill(90,60,136);
  ellipse(360, 360, 60*sqrt(sin(i9)*sin(i9)));
    i9=i9+0.026;
  }
  else
  {
    i9=0;
  }
}

不够6?来个刺激的DJ拓展船新版本。
将填充fill里面的参数改为随时间而动就会有DJ的感觉。

 fill(200*sin(tt+9),200*cos(tt+2),200*sin(tt+2));