免费共享：快速制作复杂四方连续图案的自编插件

这是创意之代码发布的第046号插件。

下载链接：

https://pan.baidu.com/s/1e4JeN8ZcagylZFy_8RB1Ig

提取码：

nzsa

 

（上篇：插件）

1.     需求

 

这是一个开发项目的副产品，顺带为之。

传统图案纹样的设计有时会面临一个两难境地：直接照抄复制博物馆里的东西，显得设计师非常不作为；而创新设计呢，有时又不一定能再现原纹样的精髓，甚至达不到古人的水平而遭诟病。

这个问题可大可小，解决方案也可广可狭。本插件提供的是一种最简单的方案：用一个三角框从原纹样里截取一部分，然后复制阵列，铺满整个平面。

就这么简单，但效果还不算差。三角框放在原纹样不同的部位，出来的效果会大相径庭，这种多样化与不可预测的效果很迷人。

 

2.     插件安装

 

本插件在CorelDraw 2018版运行。更高的版本可能也行，但尚未完全测试，有问题请及时反馈。

需要完整安装的CorelDraw版本，“绿色版”由于模块不全，可能运行会有问题。

创意之代码以往的插件都是内嵌在cdr文档中，本插件采用gms形式，以后有新插件发布也都放在一个统一的gms文档中，更新替换一下即可。

插件文档名为“Biu.gms”，该文档包含了所有基于CorelDraw开发的内容。安装步骤如下：

1. 如果CorelDraw开着，先关闭退出。

2. 把该文档复制到CorelDraw的GMS文件夹下，如：

C:\Program Files\Corel\CorelDRAW Graphics Suite 2018\Draw\GMS

 

 

3.  如果该文件夹下已有Biu.gms文件，则覆盖。

打开CorelDraw，插件自动加载。

 

启动插件的方式：

1.       Alt+Shift+F11（或“窗口—>泊坞窗—>宏管理器”），调出宏管理器面板：

 

 

双击“Biu/启动Biu”条目下的“StartA046”项，即可启动本插件。

我争取把前面发布过的45个插件都做进去（除了有合作项目在做不方便共享的），这样用起来方便。

 

3.    插件功能与使用方法

 

插件界面一如既往的简洁：

 

 

“选择源对象”按钮用于设定一个源纹样图案，如：

 

 

上图来自公众号“纹藏”，对原作者表示感谢。

选中源纹样对象，然后点击按钮，设定成功后其左侧的复选框变为选中状态，同时“生成截取框”和“生成四方连续图案”两个按钮变为可用状态。

“生成截取框”按钮可生成一个三角形截取框：

 

 

“框高比例”输入框内的数值表示生成的截取框与源图对象的高度比，默认值为0.3。

截取框生成后还需要选中才能起作用。选择截取框对象，然后点按钮“选择截取框”，则按钮左侧的复选框变为选中状态。

现在可以做最后一步“生成四方连续图案”了。

 

 

截取框可以自己做，或者把生成的截取框拖到别处，或缩放一下，但是不能旋转，只能是直角在右上方，否则会出错。如果真的需要旋转，那就转源图好了。

如果想得到中心有个圆形的图案，可以把截取框放在如下图所示的位置：

 

 

得到的图案如下：

 

 

如果需要圆弧瓣的花型，则三角框如下图位置摆放：

 

 

生成的图案：

 

 

可以做出丰富的样式：

 

 

调整三角框的大小，可以得到不同细节尺度的四方连续图案：

 

 

“行列数”是指生成图案的单元尺寸，单元如下图所示：

 

 

“边隙”是指阵列时两个相邻单元之间的压叠量。这个主要是为了消除可见的边界缝隙，下图是边隙为0的单元，可以看到明显的单元边界线：

 

 

也可以做出带白底的图案，对源图做一些规划即可：

 

 

这个万花筒也可以处理矢量图。

 

 

下图这个编织纹样是用045号插件做的：

 

 

有点欧普的味道了：

 

 

4.     Discussion

 

这个插件的功能简单得不需要解释。不过，此类型的四方连续可能只是某种更广阔的创意模式的一个“特解”，找到“通解”能让你发现新天地。

这种单元组织模式为具象的（或随机的）图像注入了秩序感，这是其魅力的重要来源。

为这个插件寻找通解的过程会很有意思，甚至能产生些须学术贡献。回头观察一下这个插件程序的执行流程，看看哪些要素被赋予了常量，如果它们发生变化不再是常量呢？这是从特解到通解的一个常规步骤。来简单看一下。

1） 源图案

源图案给这个程序提供了“加工产品”的原材料，也就是输入。选择源图案是用户的工作，也许用户希望最后的输出能体现某种色彩意象，或隐含一些形态意象但又不想照抄。用户有很多种方式来组织源图案，比如不同的图案叠在一起进行切割，或者根据输出进行二次组合（下图），等等。

 

 

二次组合后基本已经看不出源方案的影子了，源方案中设计要素的影响也变得微弱，只有图案的疏密分布还在维持秩序。这对某些图案设计的目标而言……也不错，有时设计需要传达就是视觉知觉本身，而不是什么“意义”。

2） 截取框

截取框的形态也是有很多可选项的，不一定都是直角三角形。截取框里的内容也不是一成不变的，有N种映射方式可以对它们进行变换。如果不在意图形要素的连续性，还有更多的可能性。

截取框生成时的位置是随机的，用户可以修改它的位置和尺寸。作为这个功能的开发者，亲试了一下发现，在拖动截取框给它选定一个位置的时候，比较在意的是框中内容的“分布模式”：

 

 

确定上述截取框的位置和尺寸时，各条边扫过的图形内容是经过选择的：右直角边几乎都是重色，上直角边是轻色，斜边则是某种渐变。最后形成的图案隐约有线状网格特征，而不是前面那种墙洞花窗一样的风格。图案的形态要素变得很复杂的时候，占据支配地位的就是“模式”而不是点线面之类的底层形态了。模式，英文叫pattern，和“图案”是同一个词，有点道理。

当需要在某种给定模式的引导下去放置截取框时，智能设计手段这时可以介入了，它可以对众多随机放置的截取框内容进行分析，找出最合适的几个，把图案做出来呈现给用户。设计活动这时就进入一个新阶段，设计师的工作性质也发生了变化——就像工业革命以后的工人，他们并没有被机器逼得失业，而是有了新的工作内容。

“复杂性”是个很有趣的议题，在设计领域，最有兴趣讨论复杂性的应该就是远离实用功能的图案设计了，可惜没多少人干这个事。AI大神侯世达（Hofstadter）和遗传算法的始作俑者John Holland的女弟子Melanie Mitchell研究了不少复杂性的用途，还总结了度量复杂性的若干指标。遗憾的是她好像不怎么懂设计和艺术。一个写代码牛逼又懂艺术的人Wolfram，也就是Mathematica软件的开发者，写了一本巨厚的书《A New Science》，做了很多好看的图，但是被这女人BS了，说他的东西不高级……

3） 阵列模式

当使用“阵列”一词的时候，就已经限定了单元的使用方式，其实图形单元的组织模式是无穷无尽的，单元的形式也不止一种。比如传统图案“八答晕”即可以分解为一种多层嵌套的组合式四方连续，它的数学结构和逻辑结构并不复杂，在本文这个插件上面再加盖一层就可以做得有模有样了。

 

▼八答晕（图片来源：纹藏）

 

单元的组织模式甚至可以是非线性的，如Escher作品中常见的那类奇妙设计。组织布局模式的设计给现代图案打开了一个新的空间，在与传统图案的传承与创新这对有些矛盾的要求上也是一种解决方案，即跨过“图形”这一底层设计对象，到更抽象的层面上去创新，可用的数学工具也还有大量Escher没来玩的。

下图是一个初等函数的图像，只需要十几行代码就可以生成，它可以被当成一个有趣的映射框架，来处理传统图案中的图形要素。

 

 

4） 输出数量

这个插件只能输出一幅作品。不过要是需要的话，可以再写一个程序，让它来代替人不停地操作这个插件，也就是选源图案（可以指定一个库从里面选）、填参数（可以在定义域里随机生成）、生成截取框、放置截取框、点执行按钮、保存设计成果。没白没黑的干，然后等人睡醒了过来检阅成果，选几个不错的让程序自己去领悟，然后继续生成新的方案。如此循环不止，直到满意。这就是所谓的进化算法了，以电脑的效率优势，毫无压力。

上述过程可以成为许多学术研究的载体，研究的对象不一定是图案设计，也可能是人（如某个用户群体）对图像、形态、色彩、布局等设计要素知觉或隐性的偏好，或者普通用户与设计师两个群体对某个类设计的感知差异，等等。基础工作做好了，搭台唱戏就变得容易了，可以延伸出很多学术成果。

 

所以，“通解”中的共性与抽象性往往可以通向高一级的学术诉求。我喜欢这种自底向上的研究方式，做就是了，必有所得。

 

（下篇：应用）

1.     开发者自己当用户

 

有时候我使用自己开发的软件也要看使用说明。这让有些人大感惊讶，也觉得有些好笑。不过这对编程者来说是很正常的事。比使用自己编的软件更头大的事是阅读自己写的代码，所以我在公众号里也发一些详述编程思路的文章——这些都是写给我自己看的。

开发者用不要自己的软件也是常有的事。3DMAX的开发者就曾经表示，把3DMAX用得出神入化的高手永远轮不到开发者们。

所以我决定好好使用一下自己开发的软件。

 

2.    设计概念

 

前面提到了一个传统纹样“八答晕”（或“八达晕”、“八搭晕”）。我尝试看看能不用就用046完成一幅这种图案的制作。

结果还可以，没有完全实现，做出来一个“四答晕”。

基本设计思路是这样的：

1）    薅羊毛不能只薅一只羊，所以我准备了好几幅源图——都是别人的作品；

2）    几个源图怎么分工协作，在单元里体现，就是那个三角框，要对它进行一番分割与组合处理；

3）    三角框的分割要有些趣味性，我选择了编织图案的特征，让最终的设计方案呈现出一种纤维挑压处理的立体感；

4）    单元的分割组合由设计师手工实施，这是设计师的权利，不能剥夺；如果实在需要自动化手段辅助，可以针对这个需求再进行开发；好在这个活儿也不复杂。

我找了四幅图案，都是从公众号“纹藏”找来的，对原作者表示感谢。

 

 

3.    图案制作过程

 

按步骤叙述。

 

1） 画单元结构线

 

单元结构线如下：

 

 

2） 制作单元

 

过程就不说了，设计师的常规技能；

 

 

这里要注意的是，上面三角单元的5个分割区摊开来是这样的：

 

 

每个分割区在三角形的三个角点处都有一小块，这是为了让所有分割区的长宽都保持一致，以便阵列和叠加时对齐。那些小块最后都会被中间红色的分割区遮住看不见，所以不用担心它们干扰图案内容。

 

3） 制作底纹

 

底纹是黄色分割区，它是这样做的：

 

 

选择4×4阵列，做出来是这样：

 

 

4） 制作内环

 

 

阵列后的样子：

 

 

跟底纹叠加在一起的样子：

 

 

5） 制作外环

 

 

阵列后的样子：

 

 

和底纹、内环组合在一起的样子：

 

 

6） 制作框架

 

 

阵列后的样子：

 

 

组合后的样子：

 

 

可以看到，这个框架把前面那些零碎的角处小块都遮盖掉了。

 

7） 制作中心花饰

 

中心花饰摆在框架中心位置，是叠加上去的，要遮盖住一部分框架。

 

 

用框架做切割单元，其余部分是群组起来的源对象。注意源对象里面那个透明框必须有，否则切出来的部分可能跟单元尺寸不一致，会导致后面阵列错位。

阵列后的样子：

 

 

组合后的样子：

 

 

上面加了个黑底。

 

8） 制作连边花饰

 

连边花饰也是叠加覆盖模式：

 

 

阵列后的样子：

 

 

叠加组合后的样子：

 

 

完成。

 

总结

 

似乎古典的装饰不喜欢简约，所以自动化工具还是有点用处的。