【p5.js】动态图形临摹

最新推荐文章于 2020-11-29 15:30:11 发布

无敌的988

最新推荐文章于 2020-11-29 15:30:11 发布

阅读量267

点赞数

本文链接：https://blog.csdn.net/qq_41873179/article/details/102646646

版权

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

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

在这里插入图片描述

我对它进行了一些修改，让小球的颜色有了渐变效果在这里插入图片描述

代码如下：


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; 
  

}