[Processing和P5.js]简单动态图形临摹和拓展

[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