【第一幅码绘】p5实现有趣的动态图形艺术（利用正弦函数）

【第一幅码绘】p5实现有趣的动态图形艺术（利用正弦函数）

实现图形运用的数学知识

正弦函数想必大家都十分熟悉，但是我们对它的印象可能停留在那波浪形的函数曲线上，实际上我们还可以利用正弦函数去实现更有趣的图形。正弦函数相位的变化会引起图形的变化，本文就利用了相位的变化去绘制出不同状态的圆弧，从而用这些圆弧构成一幅有趣的图形。

图形的素材来源于老师所给资料，从图形素材中可观察到，各圆弧对应圆的半径不同，且相邻圆弧半径差相同，每个圆弧都在重复着增长为半圆，然后再缩短为一段很小的圆弧的行为，每段圆弧增长时的速度规律为先加快后减慢。且相邻圆弧开始增长的时间有相同的时间差，这就让我想到了正弦函数，以及正弦函数的相位差问题。

具体实现

正弦函数公式：y=Asin(ωx+φ)，通过改变φ的值改变函数的相位，可观察到各圆弧的周期相同，振幅也相同，所以只需要改变函数的φ值即可使各圆弧在不同的时间开始增长。
例如：arc(400,400,300,300,PI,PI+PI*(39/80sin(wt)+41/80));
arc(400,400,280,280,PI,PI+PI*(39/80sin(wt+3/7)+41/80));所绘制的两个圆弧即可随着时间的变化呈现出不同的角度的圆弧。以此类推，即可制作出与原图一样的动图。

利用原图进行扩展

原图中，圆弧只可向一个方向进行增长，所以我对其进行扩展，使其向两个方向皆可增长。且原图中圆弧运动对应正弦函数中的t是始终按照固定的值进行增长的，所以在我的扩展中，改变t的增长值，从视觉上看，会有圆弧增长时快时慢的效果，同时，我改变了圆弧的颜色，使圆弧呈现出颜色的变化，看起来更加美观。

示例代码

function setup() {
   
createCanvas(800,600); 
}
var w;//=PI;
var t=0.0;
function draw() {
   
// 调用函数second()，获得程序运行经过的秒数
  //var t = second()%2;
  background(0);
  noFill();
  strokeWeight(4);
  stroke(255,255,255);
  w=PI;
  arc(400,400,300,300,HALF_PI*(39/80*sin(w*t)+41/80),HALF_PI+3/2*PI*(39/80*sin(w*t)+41/80)); 
  stroke(255,255,200);
  arc(400,400,280,280,HALF_PI*(39/80*sin(w*t+3/7)+41/80),HALF_PI+3/2*PI*(39/80*sin(w*t+3/7)+41/80)); 
  stroke(255,255,180);
  arc(400,400,260</