懒猫挖宝：节点式绘图Graphite

一开始我看到Gaphite这个工具时，觉得很普通。 # 不过是另一个绘图工具嘛 毕竟在懒猫应用商店里，图像处理有Photopea，矢量有Provector，互动有Penpot，图表示意图有tlDraw，白板还有至少五个版本的ExcaliDraw! https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.graphite 打开界面，也就是普通绘画界面该有的样子，不错，但也就是不错而已。  绘图功能我甚至都懒得介绍，该有的都有，也不比别人少什么，好像不比别人多什么。  直到我看到…… # 等等，这是什么？！ 在编辑区的右上角，有一个小小的Node Graph！  这里的Node自然不是指图像上的点，也不是你们开发的Node.js，但Node的含义已经说明了它的特点，打开看看就知道了。  如果你玩过Blender3D的Node绘图，大概就会理解这里的功能的潜力了。 不过由于我也不是很高手的制图员，手头没有特别高级的需求，也就只在视觉的角度上简单演示一下它的基础能力吧。 简单来说，Node式绘图就是把图片（尤其是矢量图）的所有属性（比如大小、位置、旋转角度、填充、边框等）值，以节点属性的形式表现出来。 你可以理解成每个图形元素都是一个函数，这些图形属性就是它的参数（实际上也就是如此）。  当你在面板上点击一个属性前面的小圆点（在这里我点的是一个线条的线宽），这个小圆点就变成了一个三角形的箭头，此时就相当于把这个函数的线宽参数给暴露出来了。  让我们先把之前随手画的这个图形的线宽都暴露出来。  在编辑区的左上角，有一个添加节点的小图标，让我们添加一个数字的值Number Value。  在这个数值上填写一个较宽的值比如20，然后再添加另一个值节点，比如设置成10。  将这两个节点分别连接到不同的图形暴露的线宽节点上，这些图形的节点就会跟随着数值变化了。  同样的数值也可以分配给多边形的半径。 而像变换Transform这样的节点，同时包含了多个参数值，如果复制一下连接到另一个多边形，这两个多边形就会变成同样的位置和大小，相互重合了。  但这样没什么意思，简单的属性变化和位置对齐，其他的工具也能做到。 那么我们来添加一个数学乘法的节点。  将乘法的B值设计为0.618黄金分割率，把第一个大的多边形的半径经过乘法运算后再赋值 给小的多边形，此时小多边形的半径就固定成为大多边形的0.618倍。无论你怎样修改大多边形的半径值 ，小多边形总是以相同的比例随之变化。  为了清楚一点让我们把原本的直线删掉，对于线条应该也有相应的处理方法但不如多边形看得明显。 让我们再增加一个多边形，它的半径将是最大的多边形半径x0.618x0.618倍。  这样你再也不用每次改变大的多边形尺寸，同要重新计算去缩放其他多边形的相应尺寸了。 ## 等等还没完。 让我们把Transform的角度也暴露出来，设置一个角度初始值1，再设置一个角度增量15，这两个值就相当于常量。它们的乘积将决定两个较小的多边形的旋转角度，其中最小的要多旋转一倍，也就是30度。  在这种简单的图形里，可能看不出设置不同的常量对图形的修改会有什么本质的影响，毕竟用图形化界面去设置也不是不可以，比例会麻烦一些，但成组缩放也许可以解决。 但是想象一下如果你绘制的是复杂的工业图纸，有的元件与其他元件之间有比例上的关系，它们却又不能在同一个组中。这样的功能就变得很有价值了。 ## 那么常量有了，变量呢？ 让我们建立一个叫做“Real Time"的节点，它是以实际时间做为参数输出的变量节点。  我们把它的模式先设置为秒，实际上这个节点支持从年到和毫秒的不同单位置，年月日的节点肯定看不出区别，毫秒嘛，我的眼睛是看不清，如果你能看清，请上报科研部门的解剖科。  我们再另外建立两个Real Time，分别设置为分和时，把它们分别赋值给三个圆。  在主画板上方有一个播放按钮，或者按Shift+空格可以查看动态效果，一个时钟就做好了。 因为秒数刚好是60，所以它会在旋转60度后复原，可六边形的每边刚好是60度，至少“秒针”（最大的圆）会是基本正确的（我只截取了很短的时间）。  那么接下来，为了防止广大观众头痛，我就把最终比较复杂的图形放出来好了。 我针对多边形的边角数目、半径大小、都做了一些运算，然后加了一些叠加效果及一个星形，最终的结果是这样的：  https://lzc-playground-1301583638.cos.ap-chengdu.myqcloud.com/guidelines/319/41b8526b-2af1-446b-b218-de1ef4c363b0.mp4 对于Graphite的浅尝性体验就是这样了，实际上它提供了远不止于此的大量运算方式和可变参数。  甚至还有网络请求的变量可以读取网络数据，我猜可以利用一些数据接口做出很变态的动态图像也说不定。 但由于本人是数学学渣，编程经验也是入门，更不用提图象编程了，所以就只能在兴趣的层面展示出它的强大功能的冰山一角。 如果你有兴趣和能力，可以试着发掘一下能搞出什么样的图形来。