第一次码绘——P5.JS实现动态图片临摹

所临摹图片

临摹过程

首先 我们先仔细观察这张图片的静态图片，确定其图案

我这张图截的效果并不是很好，但也可以看出它是由不同数量的小圆组成一个大圆，那我们应该怎么处理呢？答案是一个个画就完事了（误），这里就要用到循环，来组成我们一个个的圈，但由于我们的每一个圈都是按照不同的速度转动，所以点组成的每个圆应该为一个独立的个体，因此我们循环画圆圈的操作要执行八次，也就是图中圆的层次。

画圆圈代码如下：
其中n为每层的点数，根据点数将圆周2PI平分，得到旋转角度，旋转复制出所需数量的点数，这里用到push()和pop()函数，确保所画完的图像为一个整体，这样才能为每个圈圈赋予不同的速度。

fill(194,34,134);//选择所填充颜色
  for(var i=0;i<29;i++){
    push();
    th = TWO_PI * i / 28;
    rotate(th);
    circle(width/5.1,0,10);
    pop();
  }

所画图像如下：

然后就是运动规律分析，这一步也比较简单，就是让每个圈用不同的速度转起来，观察动图，旋转速度由内到外递减，由此确定每圈的旋转速度，所用到的函数是rotate(),这里我为每个圈设置的速度由内向外非别为：
rotate(millis()/250);
rotate(millis()/250);
rotate(millis()/250);
rotate(millis()/295);
rotate(millis()/400);
rotate(millis()/450);
rotate(millis()/600);
rotate(millis()/800);

完整代码

这里要提一句，要用translate将图像移到画布中央

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

function draw() {
  background(50);
  translate(width/2,height/2);
  stroke(50);
  drawCirle1();
  drawCircle2();
  drawCircle3();
  drawCircle4();
  drawCircle5();
  drawCircle6();
  drawCircle7();
  drawCircle8();
}

function drawCirle1(){
  fill(23,114,184);
  for(var i=0;i<5;i++){
    push();
    th = TWO_PI * i / 4;
    rotate(th);
    rotate(millis()/250);
    circle(width/45,0,10);
    pop();
  }
}

function drawCircle2(){
  fill(0,164,150);
  for(var i=0;i<9;i++){
    push();
    th = TWO_PI * i / 8;
    rotate(th);
    rotate(millis()/250);
    circle(width/20,0,10);
    pop();
  }
}
  
function drawCircle3(){
  fill(130,197,64);
  for(var i=0;i<13;i++){
    push();
    th = TWO_PI * i / 12;
    rotate(th);
    rotate(millis()/250);
    circle(width/12,0,10);
    pop();
  }
}

function drawCircle4(){
  fill(237,175,45);
  for(var i=0;i<17;i++){
    push();
    th = TWO_PI * i / 16;
    rotate(th);
    rotate(millis()/295);
    circle(width/9,0,10);
    pop();
  }
}
  
function drawCircle5(){
  fill(212,82,50);
  for(var i=0;i<21;i++){
    push();
    th = TWO_PI * i / 20;
    rotate(th);
    rotate(millis()/400);
    circle(width/7.2,0,10);
    pop();
  }
}

function drawCircle6(){
  fill(200,35,82);
  for(var i=0;i<25;i++){
    push();
    th = TWO_PI * i / 24;
    rotate(th);
    rotate(millis()/450);
    circle(width/6,0,10);
    pop();
  }
}

function drawCircle7(){
  fill(194,34,134);
  for(var i=0;i<29;i++){
    push();
    th = TWO_PI * i / 28;
    rotate(th);
    rotate(millis()/600);
    circle(width/5.1,0,10);
    pop();
  }
}

function drawCircle8(){
  fill(97,46,141);
  for(var i=0;i<33;i++){
    push();
    th = TWO_PI * i / 32;
    rotate(th);
    rotate(millis()/800);
    circle(width/4.5,0,10);
    pop();
  }
}

最后的效果：

动态临摹最终效果

总结

这次临摹过程略坎坷，但当然不是指最后呈现的这张，而是先前的尝试，之前选的图，真的是给我累的够呛，看着明明很简单，但运动规律想了好几天也没啥效果，但好歹积累了很多学习经验，以至于换一个图一下午就搞好了，但还是略不甘心，所以失败成品也要臭不要脸地摆上来！！

我的失败品/(ㄒoㄒ)/~~

到现在第一步算是勉勉强强完成了，接下来便是相应图像拓展，具体更新日期未知，请敬请期待！！

动图拓展

卡在截止日期前的更新，根据之前所完成的动图进行拓展，先放效果图
（好，上传不了动图，放链接好了）
拓展动图效果

运动规律是四个对角线上的圆沿对角线运动，两个在中线的圆相对运动，最终呈现出的效果是一个圆最终聚拢成一个，然后再分开的效果。

实现方式

运动规律比较简单，这里我就以左上角的圆为例，其他的是一样的道理，只是行走轨迹不同。

在这里插入代码片
push()
  x1+=2;
  y1+=2;
  drawAll(x1,y1);
  if(x1>width){
    x1=0;
  }
  if(y1>height){
    y1=0;
  }
  pop();

其中x1和y1为圆中心坐标，每画一针都会进行偏移，所走的路线便是从左上走到右下，最后判断如果走出画布，就将位置归回原位，实现循环。

完整代码

let x1,x2,x3,x4,x5,x6,x7,x8;
let y1,y2,y3,y4,y5,y6,y7,y8;
function setup() {
  createCanvas(600, 600);
  x1=0;
  y1=0;
  x2=0;
  y2=height/2;
  x3=0;
  y3=height;
  x4=width;
  y4=0;
  x5=width;
  y5=height/2;
  x6=width;
  y6=height;
  x7=width/2;
  y7=0;
  x8=width/2;
  y8=height;
}

function draw() {
  background(50);
  push()
  x1+=2;
  y1+=2;
  drawAll(x1,y1);
  if(x1>width){
    x1=0;
  }
  if(y1>height){
    y1=0;
  }
  pop();
  
  push()
  x2+=2;
  drawAll(x2,y2);
  if(x2>width){
    x2=0;
  }
  pop();
  
  push()
  x3+=2;
  y3-=2;
  drawAll(x3,y3);
  if(x3>width){
    x3=0;
  }
  if(y3<0){
    y3=height;
  }
  pop();
  
  push()
  x4-=2;
  y4+=2;
  drawAll(x4,y4);
  if(x4<0){
    x4=width;
  }
  if(y4>height){
    y4=0;
  }
  pop();
  
  push()
  x5-=2;
  drawAll(x5,y5);
  if(x5<0){
    x5=width;
  }
  pop();
  
  push()
  x6-=2;
  y6-=2;
  drawAll(x6,y6);
  if(x6<0){
    x6=width;
  }
  if(y6<0){
    y6=height;
  }
  pop();
  
  push();
  y7+=2;
  drawAll(x7,y7);
  if(y7>height){
    y7=0;
  }
  pop();
  
  push();
  y8-=2;
  drawAll(x8,y8);
  if(y8<0){
    y8=height;
  }
  pop();
  
}

function drawCirle1(){
  fill(23,114,184);
  for(var i=0;i<5;i++){
    push();
    th = TWO_PI * i / 4;
    rotate(th);
    rotate(millis()/250);
    circle(width/45,0,10);
    pop();
  }
}

function drawCircle2(){
  fill(0,164,150);
  for(var i=0;i<9;i++){
    push();
    th = TWO_PI * i / 8;
    rotate(th);
    rotate(millis()/250);
    circle(width/20,0,10);
    pop();
  }
}
  
function drawCircle3(){
  fill(130,197,64);
  for(var i=0;i<13;i++){
    push();
    th = TWO_PI * i / 12;
    rotate(th);
    rotate(millis()/250);
    circle(width/12,0,10);
    pop();
  }
}

function drawCircle4(){
  fill(237,175,45);
  for(var i=0;i<17;i++){
    push();
    th = TWO_PI * i / 16;
    rotate(th);
    rotate(millis()/295);
    circle(width/9,0,10);
    pop();
  }
}
  
function drawCircle5(){
  fill(212,82,50);
  for(var i=0;i<21;i++){
    push();
    th = TWO_PI * i / 20;
    rotate(th);
    rotate(millis()/400);
    circle(width/7.2,0,10);
    pop();
  }
}

function drawCircle6(){
  fill(200,35,82);
  for(var i=0;i<25;i++){
    push();
    th = TWO_PI * i / 24;
    rotate(th);
    rotate(millis()/450);
    circle(width/6,0,10);
    pop();
  }
}

function drawCircle7(){
  fill(194,34,134);
  for(var i=0;i<29;i++){
    push();
    th = TWO_PI * i / 28;
    rotate(th);
    rotate(millis()/600);
    circle(width/5.1,0,10);
    pop();
  }
}

function drawCircle8(){
  fill(97,46,141);
  for(var i=0;i<33;i++){
    push();
    th = TWO_PI * i / 32;
    rotate(th);
    rotate(millis()/800);
    circle(width/4.5,0,10);
    pop();
  }
}

function drawAll(x,y){
  translate(x,y);
  stroke(50);
  drawCirle1();
  drawCircle2();
  drawCircle3();
  drawCircle4();
  drawCircle5();
  drawCircle6();
  drawCircle7();
  drawCircle8();
}

好，至此本人第一次码绘（实验）就完成了！！感觉还有很多不足之处（我管这叫还有很大进步空间），代码感觉很冗余，希望在后续学习中可以有较明显改进。