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

共 2043字,需浏览 5分钟

 ·

2021-03-16 22:15





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




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

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

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

于是想用 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-


专栏作者:恒成立

上海理工大学 光电硕士

热爱折腾与创造






一个人的探索有些孤单,
一群人的探索会更有意思。

  加入社群交流
在这里 (扫码)!


浏览 97
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报