[Processing和P5.js]简单动态图形临摹和拓展
在这里先说一下,本篇里做的两张动态图形,分别用了processing和p5.js,两者之前差异不大,所以明白了一种之后另一种也就比较好掌握了,但是p5.js相对来说可能更为简单一点。
原版动态图
由蒙德里安的作品演变形成的动态图
动态图临摹
观察动图组成及其运动规律
图片的主要构成就是长方形,但是如果把每个长方形都做出来,工作量就实在是太大了,所以就先计算图形四周主要顶点的坐标,然后用直线来进行图片的分割,至于说带有颜色的部分,就直接运用长方形的的函数来进行添加就好了。
相关代码如下:(这里用的processing)
void setup() {
size(640, 640);
}
void draw(){
strokeWeight(5);
fill(255);
rect(10,20,620,580);
fill(255);
rect(30,20,20,580);
rect(590,20,20,580);
drawline();
colorrect();
activerect();
smallrect();
}
void drawline(){
//画直线分割界面
stroke(0);
line(10,20,630,20);
line(10,40,630,40);
line(10,580,630,580);
line(10,600,630,600);
line(50,280,630,280);
line(50,310,630,310);
line(50,340,210,340);
line(210,20,210,600);
line(230,20,230,600);
line(420,20,420,600);
line(360,20,360,600);
line(420,480,590,480);
line(10,20,10,600);
line(630,20,630,600);
}
void colorrect(){
//添加带颜色的长方形到指定位置
fill(255,0,0);
rect(210,20,20,20);
rect(50,40,160<