Processing rect() 函数应用——范斯沃斯住宅几何风 绘制

请用Processing进行运行

void setup(){
  size(704,945);//画框设置
}
void draw(){
  background(255,255,255);//白底图
  
  fill(232,183,124);
  noStroke();
  rect(21,17,661,859);//浅棕背景色
  
  strokeWeight(3);
  stroke(199,162,79);
  line(22,458+6+64+16+20,680,458+6+64+16+20);
  
  noStroke();
  fill(247,234,199);
  rect(178,457,466,7);//上1矩形
  
  stroke(141,124,95);
  strokeWeight(1);
  line(178,459.5,178+466,459.5);//上1矩形中线
  
  stroke(141,124,95);
  strokeWeight(2);
  line(157+21,458+4,157+21+466-0.5,458+4); //上1矩形下线
  
  noStroke();
  fill(247,234,203);
  rect(178,458+6,466,9);  //上2矩形
  
  noStroke();
  rect(178,458+6+64,466,9);//下1矩形
  
  rect(178-133,458+6+64+16,332,9);//下2矩形
  
  rect(178-133+31,458+6+64+16,5,19);
  stroke(141+20+20,124+20+20,95+20,80);
  strokeWeight(1);
  line(178-133+31+1.5+1,458+6+64+16,178-133+31+1+1.5,458+6+64+16+19);//左1矩形
  
  noStroke();
  rect(178+132,458+6+64-57,334,57);//中间大矩形
  
  
  fill(232,183,124);
  rect(178+132+2,458+6+64-57+25,330,57-25);//背景色长矩形
  
  fill(232,143,65);
  rect(178+140,458+6+64-9,12,9);//左1格小黄色方块
  

  rect(178+140+98,458+6+64-9-40,148,48);//中间格大黄色方块下
  fill(198,59,42);
  rect(178+140+98,458+6+64-9-40,148,19);//中间格大黄色方框上
  
  fill(75,95,67);
  rect(178+140+98+2,458+6+64-9-40+25+2+2,144,19);//中间格下部绿色
  
  noStroke();
  fill(92-20,124-20,100-20,230);
  rect(178+132+2,458+6+64-55,330,50/2);//绿色长矩形
  
  fill(225,215,178,230);
  rect(178+30+133+5,457+9+7,47,55);//左帘
  
  rect(178+30+133+133+133+5,457+9+7,30,55);//右帘
  
  fill(247,234,203);
  stroke(141,124,95);
  strokeWeight(2.5);
  line(157+21+164,458+6+9,157+21+161+301,458+6+9); //上2矩形下线
  
  noStroke();
  rect(178+30,457,5,98+8.5);
  stroke(166,154,114);
  strokeWeight(1.5);
  line(178+30+4,458+3.6,178+30+4,458+6+9);
  line(178+30+4,458+6+64,178+30+4,458+6+64+9);
  line(178+30+4,458+6+64+16,178+30+4,458+6+64+16+9);//左2矩形
  
  noStroke();
  rect(178+30+133,457,5,98+8.5);
  stroke(166,154,114);
  strokeWeight(2);
  line(178+30+133+4,457+2,178+30+4+133,458+6+64+9);
  stroke(166+20,154+20,114+20);
  line(178+30+4+133,458+6+64+16,178+30+4+133,458+6+64+16+9);//左3矩形
  
  noStroke();
  rect(178+30+133+133,457,5,98+8.5);
  stroke(166,154,114);
  strokeWeight(2);
  line(178+30+133+4+133,457+2+2,178+30+4+133+133,458+6+9);
  stroke(166+20,154+20,114+20);
  line(178+30+4+133+133,458+6+64,178+30+4+133+133,458+6+64+9);//左4矩形
  
  noStroke();
  rect(178+30+133+133+133,457,5,98+8.5);
  stroke(166,154,114);
  strokeWeight(2);
  line(178+30+133+4+133+133,457+2+2,178+30+4+133+133+133,458+6+64+9);//左5矩形
}

考虑到这篇文章是反映初学阶段，所以使用的都是第一天就能学懂的基本的函数。
不难发现，代码中这里使用了很多 加法，这样做对于绘图而言，我认为，是有好处的：因为加减式的保留可以很方便地反映 两个图形之间 的位置关系，比如，左3~5矩形，就是在BP (begin point) 上增加相同间距133，其他数值不变，加了几次一目了然。