p5.js实现动态旋转的小球

实验要求：

从给出的参考资料中的“动态图形艺术”中选取不少于1幅作品，用编程方式临摹并进行拓展。编程语言推荐p5,processing。写一篇文章发表为博文、推文等形式，描述从原作中提炼出的规律。

使用的工具

p5.js官网在线编辑器
https://editor.p5js.org

想要临摹的动态图形

临摹过程

小白一枚，从零开始。
盯着图片看了一会儿，还截了张图，首先我要画只球出来，然后画两只球出来，画的球要可以旋转，这两只球的要在同一个圆上…

画只球

第一次打开编辑器或者新建都会默认是下面这个样子，setup()函数是只在一开始调用一次，draw()函数则会在之后不停调用。

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

function draw() {
  background(220);
}

画只球(实际上只是个圆形，但如果称呼它为圆的话，感觉怪怪的,反正这里的小球实际上都是圆)

function draw() {
  background(220);//设置背景色，220为灰度值
  ellipse(200,200,200,200);//圆心坐标（200，200），宽度200，高度200
}

填充颜色

function draw() {
  background(220);//设置背景色，220为灰度值
  noStroke();//去除边线
  fill(32,178,170);//填充颜色
  ellipse(200,200,200,200);//圆心坐标（200，200），宽度200，高度200
}

画只旋转的小球

function setup() {
  createCanvas(400, 400);//创建400x400的画布
}

function draw() {
  background(0);//设置背景色，220为灰度值
  noStroke();//去除边线
  fill(32,178,170);//填充颜色
  t=millis()/1000;
  ellipse(200+60*cos(2*t),200+80*sin(2*t),20,20);
  //旋转中心坐标（200，200），轨迹图形的宽度40，高度60
  //圆宽度200，圆高度200
  //2为控制速度的参数
}

四只旋转的小球

主要是cos()函数里的改变，四只在圆上的小球，第二只比第一只增加PI/2的相位差就好了，第三只增加PI,第四只增加PI/2*3。更多个数的小球，依次类推。

function setup() {
  createCanvas(400, 400);//创建400x400的画布
}

function draw() {
  background(0);//设置背景色，220为灰度值
  noStroke();//去除边线
  fill(32,178,170);//填充颜色
  t=millis()/1000;
  ellipse(200+60*cos(2*t),200+80*sin(2*t),20,20);
  //旋转中心坐标（200，200），轨迹图形的宽度40，高度60
  //圆宽度200，圆高度200
  //2为控制速度的参数
  ellipse(200+60*cos(2*t+PI/2),200+60*sin(2*t+PI/2),20,20);
  ellipse(200+60*cos(2*t+PI),200+60*sin(2*t+PI),20,20);
  ellipse(200+60*cos(2*t+PI/2*3),200+60*sin(2*t+PI/2*3),20,20);

临摹完成

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

function draw() {
  background(220);
  drawball();
}


function drawball()
{
  background(5);
  noStroke();
  t=(millis()/1000);
  x0=200;//旋转中心的横坐标
  y0=200;//旋转中心的纵坐标
  d=10;//小球的直径
  r=2;//与小球到旋转中心的距离有关
  tr=18;//增量
  v=2;//与速度有关，数值越大转得越快
  tv=-0.1;
  
  p1=PI/2;//四只球
  r=r+tr;
  fill(30,144,255);//蓝色
  for(i=0;i<=3;i++)
    ellipse(x0+r*cos(t*v+p1*i),y0+r*sin(t*v+p1*i),d,d);
    
  
  p2=PI/4;//八只球
  r=r+tr;v=v+tv;
  fill(32,178,170);//蓝绿色
  for(i=0;i<=7;i++)
    ellipse(x0+r*cos(t*v+p2*i),y0+r*sin(t*v+p2*i),d,d);
  
  p2=PI/6;//十二只球
  r=r+tr;v=v+tv;
  fill(0,255,127);//绿色
  for(i=0;i<=11;i++)
    ellipse(x0+r*cos(t*v+p2*i),y0+r*sin(t*v+p2*i),d,d);
  
  p2=PI/8;//十六只球
  r=r+tr;v=v+tv;
  fill(255,215,0);//
  for(i=0;i<=15;i++)
    ellipse(x0+r*cos(t*v+p2*i),y0+r*sin(t*v+p2*i),d,d);
  
  p2=PI/10;//二十只球
  r=r+tr;v=v+tv;
  fill(255,140,0);//DarkOrange
  for(i=0;i<=19;i++)
    ellipse(x0+r*cos(t*v+p2*i),y0+r*sin(t*v+p2*i),d,d);
  
  p2=PI/12;//二十四只球
  r=r+tr;v=v+tv;
  fill(255,99,71);//Tomato
  for(i=0;i<=23;i++)
    ellipse(x0+r*cos(t*v+p2*i),y0+r*sin(t*v+p2*i),d,d);
  
  p2=PI/14;//二十八只球
  r=r+tr;v=v+tv;
  fill(255,105,180);//HotPink
  for(i=0;i<=27;i++)
    ellipse(x0+r*cos(t*v+p2*i),y0+r*sin(t*v+p2*i),d,d);
  
  p2=PI/16;//三十二只球
  r=r+tr;v=v+tv;
  fill(238,130,238);//Violet
  for(i=0;i<=31;i++)
    ellipse(x0+r*cos(t*v+p2*i),y0+r*sin(t*v+p2*i),d,d);
  
    
}

拓展

拓展其实就是改改参数啦，参数改一改，效果大不同。

拓展1

当速度变大的时候，效果会有一点迷幻，它变得好像不再匀速转动了，但是想不懂为什么。

v=8;//与速度有关，数值越大转得越快

拓展2

当v=1的时候，外圈的小球速度会递减，变到负的。效果就是内外圈的球转动方向不一致。

v=1;//与速度有关，数值越大转得越快
tv=-0.23;

拓展3

本来想做小球加速转，然后减速转，但是效果和预想的并不一样，是我无法解释的效果呢。

v=1*cos(0.5*second()*PI);//与速度有关，数值越大转得越快

不足之处

有很多啦，所有小球的转动仔细盯着看的话会发现画面有在抖动，可能是写的式子太简陋了。然后有很多想要实现的效果也还没有实现，还要继续加油学习啦。