一开始对银杏树没什么头绪，观察了好几棵学校里的银杏，在大风刮过之时，金黄树叶在风中颤抖摇晃，我突然有了灵感——色块堆积。我可以不用准准确确的画出这棵树长啥样，我只需要保证它在运动中是符合这棵树的逻辑的，那么这棵树就是成功的。
下面贴上代码：
function YinxingTree() { push(); drawtree(220,180,0,-20,20,random(0.6)); drawtree(120,60,0,-100,100,random(0.01)); drawtree(120,60,0,-50,160,random(0.01)); drawtree(180,160,0,40,160,random(0.05)); drawtree(200,100,0,-20,100,random(1)); drawtree(200,160,0,0,120,random(0.5)); drawtree(220,160,0,55,160,random(0.1)); drawtree(240,200,0,50,100,random(0.3)); drawtree(240,200,0,50,180,random(0.3)); drawtree(240,200,0,80,190,random(1)); drawtree(220,180,0,-50,80,random(0.1)); translate(150,90); drawtree(220,180,0,-50,150,random(0.5)); translate(-100,-150); drawtree(240,200,120,-100,100,random(0.01)); pop(); } function drawtree(c1,c2,c3,pos_x,pos_y,pos_angle) { push(); rotate(pos_angle); var trans_x; var trans_y; var trans_angle; fill(c1,c2,c3); for(var i=0;i<20;i++) { trans_x=random(50); trans_y=random(20); trans_angle=random(-0.5); push(); translate(trans_x,trans_y); rotate(trans_angle); drawYinXing(pos_x,pos_y); pop(); } pop(); } function drawYinXing(pos_x,pos_y) { stroke(200,150,60); push(); translate(pos_x, pos_y); rotate(0.0); arc(0, 0, 30, 30, 0, PI/2); pop(); }
大量使用radom可以让这棵树更自然。
2.动画主角——猫
这里我先对猫进行了一些处理——低多边形处理。
吸取了第一个实验的教训，这次我先设置了一个中心点，然后在根据这个点扩充出有关猫的肢干总共12个点，然后画三角形，形成一个没有四肢，没有尾巴的橘猫。
尾巴用了贝塞尔曲线，坐标也跟中心点关联。
猫的四肢是运动视觉的关键！！！动画之所以能动是因为有承上启下的连续性动作。猫行走从侧面看过去就是两腿相互交叉变换。所以在写动画逻辑之前你需要先画出关键帧状态。
关键帧状态确定了就可开始着手动画逻辑：首先视觉上我们先要营造出猫在原地踏步的感觉。我们有两个关键帧状态，所以可以运用模运算，在运动的中心坐标基础上模2，结果对应两个状态。
附上代码：
function feetControl(x,y) { if(x%2==0) { rect(x-(cat_scale)/10,y-8,(cat_scale)/10,(cat_scale)*1/3+8); } else { quad(x,y-10, x-(cat_scale)/10,y-10, x-(cat_scale)/10+(cat_scale/10),y+(cat_scale)*1/3, x+(cat_scale/10),y+(cat_scale)*1/3); quad(x,y-15, x-(cat_scale)/10,y-15, x-(cat_scale)/10-(cat_scale/5),y+(cat_scale)*1/3, x-(cat_scale/5),y+(cat_scale)*1/3); } }
至此，动画完成。
手绘与码绘的对比
在动画这个应用上，其实两者各有千秋。手绘能做到画面更加精致有更多细节，更能体现质感，但同时，它又太过费时。而码绘在运动这一方面有着得天独厚的优势，它能更平滑的完成动画操作。
发现的问题
码绘在建立场景的过程中，发现对于环境色这一概念，几乎还是一个空白领域。