基础课程里绘制了一只多啦A梦,用到了最基础的椭圆、圆、三角形、圆弧、直线等图形。但是涉及比较复杂的图形,以上图形就不够用了。
比如下面这只喜羊羊,涉及边缘不规则的几何图形,因此就需要使用贝塞尔曲线了。
Processing里的贝塞尔曲线类似Photoshop里的钢笔工具。通过锚点和控制点来控制曲线的形状。
noFill();
stroke(255, 102, 0);
line(85, 20, 10, 10);
line(90, 90, 15, 80);
stroke(0, 0, 0);
bezier(85, 20, 10, 10, 90, 90, 15, 80);
当然,如果仅仅像上面的代码手动设置锚点和控制点并进行调整,绘图比较麻烦。我在网上找到了一款通过可视化方式调整贝塞尔曲线的小工具(原作者不详),并对该工具进行了小改动。该工具可加载自己的底图,然后可通过快捷键添加和移除节点。通过鼠标拖拽调整好曲线后,使用快捷键P可自动生成贝塞尔曲线的代码并输出到控制台。
比如我添加了4个节点,将节点调整好后,可在控制台打印代码。
代码运行的效果如下:
继续利用控制点和锚点进行描边,注意曲线的首尾连接关系。发现刚才两步操作绘制的是两个图形,如何合并呢?很简单,由于两段代码都是由beginShape()和endShape()包裹住的,只要将节点代码都放到同一对beginShape()和endShape()组合中即可。
简单的操作就是把下面红框圈出的部分删除。
那么绘制的效果就是这样的
上述就是绘制原理,操作繁杂不再赘述,绘制完成后的效果如下,比较费时间,头上的一撮毛和脖子上的铃铛没时间画了,有兴趣的话可以自己补上。代码和绘画工具我都放到群文件里了。对图文介绍没看明白的可以看我主页更新的同款视频教程。