【p5.js】 动态图形临摹

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

我选择的是这幅进行临摹，它的运动规律比较简单，就是一圈圈的小球在绕中心做顺时针匀速旋转

我对它进行了一些修改，让小球的颜色有了渐变效果

代码如下：

let offset=0;
let r = 20;
let speed = 0.1

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


function draw() {
  background(0);
  
  
  for(let layer = 1;layer<=8;layer++){
    fill(200,255-layer*20,layer*20);
    for(let angle=0;angle<360;angle+=360/(4*layer)){
     var x = width/2+cos(radians(angle+offset*(9-layer)/10))*r*layer;
     var y = height/2+sin(radians(angle+offset*(9-layer)/10))*r*layer;
    ellipse(x,y,10,10);
    }
    offset+=speed;
  }
 
  offset+=1; 
  
}

经过多次尝试，发现通过调整每圈中心的位置，可以让它看起来有立体感

代码如下：

let offset=0;
let r = 20;
let speed = 0.8

var x;
var y;


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

function draw() {
  background(0);
  for(let layer = 1;layer<=8;layer++){
    fill(200,layer*20,layer*30);
    for(let angle=0;angle<360;angle+=360/(4*layer)){
   
     x = width/2+cos(radians(angle+offset*(9-layer)/10))*r*layer+pow(1,layer)*10;
     y = height/2+sin(radians(angle+offset*(9-layer)/10))*r*layer+pow(1,layer)*10;
    ellipse(x+layer*10-100,y+layer*10-100,10,10);
    }
    offset+=speed;
    
  }
 
  offset+=1; 
  

}