function drawsky() { var c1 = color(90,150,205); var c2 = color(190,200,220); noStroke(); setGradient(0, 0, Width, skyHeight,c1,c2,1); } function setGradient(x, y, w, h, c1, c2,axis) { noFill(); if (axis == Y_AXIS) { // Top to bottom gradient for (var i = y; i <= y+h; i++) { var inter = map(i, y, y+h, 0, 1); var c = lerpColor(c1, c2, inter); stroke(c); line(x, i, x+w, i); } } else if (axis == X_AXIS) { // Left to right gradient for (var k = x; k <= x+w; k++) { var interk = map(k, x, x+w, 0, 1); var ck = lerpColor(c1, c2, interk); stroke(ck); line(k, y, k, y+h); } } }
红墙就不细说了，直接看屋檐，屋檐还稍微有点东西。观察故宫屋檐结构之后发现，故宫这样的建筑简直太有规律可循了！你只要生成一个基本元，接下来的就只用循环生成就可以。我们主要来看看圆木那一块怎么实现。
圆木那里其实还挺麻烦，主要是有光的影响，圆木被分为三个面：受光面，反光面，阴影面，直接用一个圆肯定解决不了，我想了一个办法，用三个扇形就可以区分三个面。
具体代码：
function drawCicle(x_trans,angle,c1,c2,c3,i) { push(); noStroke(); fill(c1,c2,c3); translate(x_trans-i+7,skyHeight+70+i*3); rotate(angle); arc(0,0,50,50, 0, PI/2); pop(); } function drawCicle_all(x_trans) { for(var i=0;i<8;i++) { drawCicle(x_trans+quad_width-8,24.5,100,10,10,i); drawCicle(x_trans+quad_width-8,-2.2,130,110,90,i); drawCicle(x_trans+quad_width-8,1,70,20,10,i); drawCicle(x_trans+quad_width-8,-3.5,200,160,80,i); } stroke(50,10,10); fill(140,100,50); ellipse(x_trans+60,skyHeight+95,50,50); fill(80,60,20); ellipse(x_trans+60,skyHeight+95,35,35); }
还有瓦片上的阴影，也用了渐变过渡，这里就不贴代码了。
银杏树