互动媒体技术动态图形临摹

首先放出原图

临摹图片预览

我的方法是首先用PS打开图片，找到合适的位置确定图案的起点，用PS取色器获取每个小球的颜色
然后编写循环函数放置小球，为了确保每个小球旋转的周期一样，进行了大致的运算。
下面放出代码

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

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

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

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

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

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

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

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

拓展图形
这里我添加了个参数 使得每个小球有放缩

最终效果：

代码如下：

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

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

function drawCirle1(){var move=20*sin(millis()/500);

  
  fill(23,114,184);
  //translate(width/2,height/2);
  for(var i=0;i<5;i++){
    push();   
    theta = TWO_PI * i / 4;
    rotate(theta);
    rotate(millis()/250);
  
    circle(width/45,0,5+move);
    pop();
  }
}

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

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

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

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

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