用 Processing 绘制 「太极图」| 数字艺术专栏

今天代码哥，要跟大家从传统文化 “太极” 聊起 ……

太极

是阐明宇宙从无极而太极，以至万物化生的过程。

太极即为天地未开、混沌未分阴阳之前的状态。易经系辞：“是故易有太极，是生两仪”。两仪即为太极的阴、阳二仪。

本人十分赞同和认可道家的哲学概念，每次看到旋转的太极图，总能无穷的联想，其言简意赅，阐述着这个世界和社会的运行规律。

于是想用 Processing 绘制一个动态的 TaiChi 图，不断的提醒自己不要忘记这个世界的本质（一生二，二生三，三生万物）。

构思

先构建一张平面的静态图。一张太极图由半圆和圆，黑色和白色共同组成。

 translate(width/2, height/2);  fill(230,5);  rect(-width/2, -height/2, width, height);  fill(0);  arc(0, 0, width, height, PI/2, PI*3/2);  fill(255);  arc(0, 0, width, height, -PI/2, PI/2);  noStroke();  arc(width/4 * cos(-PI/2),height/4 * sin(-PI/2),width/2,width/2,PI/2, PI*3/2);  fill(0);  arc(width/4 * cos(PI/2),height/4 * sin(PI/2),width/2,width/2,-PI/2, PI/2);  fill(255);  ellipse(width/4 * cos(PI/2),height/4 * sin(PI/2),width/10, width/10);  fill(0);  ellipse(width/4 * cos(-PI/2),height/4 * sin(-PI/2),width/10,width/10）；

使太极图不断旋转

想使圆不断的旋转，那么就要分析，在圆旋转的过程中，半圆弧变化的规律，圆心的坐标变化的规律。

这时，只需要引入：一个角度变化变量deltaAngle，通过调节deltaAngle的大小来控制太极旋转的速率。通过调节不同的速率，可以发现一些有意思的现象。

• 30x

  

• 60x

  

• 90x

  

随着旋转频率的增加，可以观察到有意思的现象。

代码

float deltaAngle = 0.0f;
void setup(){  size(800,800);}
void draw(){  translate(width/2, height/2);  fill(230,5);  rect(-width/2, -height/2, width, height);  deltaAngle += -TWO_PI/360 * 1;  // 绘制两个外半圆  fill(0);  arc(0, 0, width, height, PI/2 + deltaAngle, PI*3/2 + deltaAngle);  fill(255);  arc(0, 0, width, height, -PI/2 + deltaAngle, PI/2 + deltaAngle);  // 绘制两个内半圆  noStroke();  arc(width/4 * cos(-PI/2 + deltaAngle),height/4 * sin(-PI/2 + deltaAngle),width/2,width/2,PI/2 + deltaAngle, PI*3/2 + deltaAngle);  fill(0);  arc(width/4 * cos(PI/2 + deltaAngle),height/4 * sin(PI/2 + deltaAngle),width/2,width/2,-PI/2 + deltaAngle, PI/2 + deltaAngle);  // 绘制两个圆  fill(255);  ellipse(width/4 * cos(PI/2 + deltaAngle),height/4 * sin(PI/2 + deltaAngle),width/10,width/10);  fill(0);  ellipse(width/4 * cos(-PI/2 + deltaAngle),height/4 * sin(-PI/2 + deltaAngle),width/10,width/10);}

-END-

专栏作者：恒成立

上海理工大学 光电硕士

热爱折腾与创造

---

一个人的探索有些孤单，

一群人的探索会更有意思。

  加入社群交流

在这里 （扫码）！