【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;

}

• 点赞
• 收藏
• 分享
• 文章举报