【p5.js】作业一——动态图形临摹

创意编程作业

主题

从参考资料中的“动态图形艺术”中选取不少于1幅作品，用编程方式临摹，并进行拓展

临摹作品

观察规律

整幅图案背景为黑色，由6X6个白色的圆组成，圆与圆之间存在相同的间距，每个圆上有一个90°黑色扇形在运动，相邻的四个扇形在运动到某一时间会组成一个黑色正方形。
可以将整幅图案分割成3X3，9个相同的部分，方便去用代码实现。

代码实现

ellipse()函数绘制圆
arc()函数绘制扇形
第一个和第二个参数设置位置，而第三个和第四个参数设置宽度和高度。第五个参数设置开始弧的角度，第六个参数设置要停止的角度。角度以弧度而不是度数设置
通过动态改变起始坐标位置，实现转动效果

// An highlighted block
var a = 50;//半径
var d = 2 * a;
var x = 0;
function setup() {
  createCanvas(635, 635);
  noStroke();
  rectMode(CENTER);
  frameRate(30);    
}

function draw1() {//画圆
  fill(230);
  ellipse(a + 5, a + 5, d, d);
  ellipse(a + 5, 3*a + 10, d, d);
  ellipse(3*a + 10, a + 5, d, d);
  ellipse(3*a + 10, 3*a + 10, d, d); 
}

function draw2() {//扇形
  fill(32);
  x+=0.01;
  arc(a + 5, a + 5, d+1, d+1, -x, HALF_PI-x); 
  arc(a + 5, 3*a + 10, d+1, d+1, HALF_PI+x, PI+x); 
  arc(3*a + 10, a + 5, d+1, d+1, -HALF_PI+x, x); 
  arc(3*a + 10, 3*a + 10, d+1, d+1, PI-x, HALF_PI+PI-x); 
}

function draw(){
  background(32);
  draw1();
  draw2();
}

加入循环

function draw1() {//画圆
  fill(230);
  for(i=1;i<=6;i++){
    for(j = 1;j<=6;j++){
  ellipse((2*i-1)*a + 5*i, (2*j-1)*a + 5*j, d, d);
    }
  }
}
function draw2() {//扇形
  fill(32);
  x+=0.1;
  for(i=1;i<=3;i++){
    for(j = 1;j<=3;j++){
  arc((4*i-3)*a + 5*(2*i-1), (4*j-3)*a + 5*(2*j-1), d+1, d+1, -x, PI/2-x); 
  arc((4*i-1)*a + 10*i, (4*j-3)*a + 5*(2*j-1), d+1, d+1, HALF_PI+x, PI/2+HALF_PI+x); 
  arc((4*i-3)*a + 5*(2*i-1), (4*j-1)*a + 10*j, d+1, d+1, -HALF_PI+x, PI/2-HALF_PI+x); 
  arc((4*i-1)*a + 10*i, (4*j-1)*a + 10*j, d+1, d+1, PI-x, HALF_PI+PI-x); 
    }
  }
}

效果如下

改进

发现绘制出来的图案没有像原图一样每转动90°时会产生停顿效果，观察后可以发现运动的速度可以用三角函数表示。思考了很久也没有做出类似的效果
查阅资料时发现了大佬的推导结果如下大佬博客

  c = frameCount/(4*PI);
  angle1 = angle1 + 1/16*abs(sin(c));

对我们的代码做出如下修改

  //x+=0.1;
  x+=1/16*abs(sin(frameCount/(4*PI)));

效果如下

拓展

鼠标点击后会重置并转动方向相反

总结

p5.js的功能十分强大,p5.js文档提供了许多函数可以用来创作。