5.自定义形状 #Programming Design System

Drafff

2020-01-14

[TOC]

虽然只用简单形状做设计是一种很好的练习方式，但是复杂的形状将会提供更多的创作的可能性。在动手设计的过程中，复杂的形状通常需要很长的时间才能绘制出来，因为形状的每个细节都需要手动绘制。尽管各大软件公司已经努力让这些工作自动化，但是在目前的数字设计工具（如Adobe illustrator或Sketch）中创建某些复杂形状仍然很繁琐，尤其是需要重复或者随机化的设计（例如振幅发生变化的正弦曲线图案）。在代码中我们能快速的生成这些图案，并且需要的代码还非常简单。另一方面，用笔随意画出的图案很难用代码复现出来，尤其是没有任何规则可以描述这个形状的时候。

在接下来的章节中，我将介绍一系列用代码绘制自定义形状的技术。但是，我们必须首先了解清楚在用代码绘制图形的基本概念，如beginShape()函数和其他许多可用于定义外形的函数。

编写自定义形状

大多数图形编程语言都允许你绘制自定义形状，就像“连点图”：你需要定义一系列点（我们称为顶点），通过把这些点相连形成形状轮廓。

形状中的每个顶点都决定了它与前一个顶点的连接方式。如果是一个简单的顶点，它将以直线与前一个点连接。如果是一个弯曲顶点，它将以曲线与前一个点连接。如果把最后一个点与第一个点连接，形状可以选择是否变成闭合形状。可以使用beginShape()函数开始一个新的自定义形状，使用不同的顶点函数定义该形状的顶点，最后通过在endShape()函数中调用可选参数来使形状闭合。下面我们讲解一下这些顶点函数。

直线

使用vertex()函数创建一个简单的顶点，这个顶点会通过直线与其他顶点连接。所有通过begainShape()创建的形状必须以vertex()开始。下面的示例对此进行了说明。尝试拖动顶点来查看生成的代码。

beginShape();
  vertex(171, 73);
  vertex(353, 118);
  vertex(220, 253);
endShape(CLOSE)

下面的示例都是用简单顶点创建的，但是通过设置描边和填充实现了非常不同的效果。

代码

贝塞尔曲线

我们需要使用quadraticVertex()和bezierVertex()函数，这两个函数明显要比vertex()更加复杂，因为他们需要一些点的坐标来控制曲线。要知道怎么画出贝塞尔曲线，我们先简要了解下贝塞尔曲线的概念。

在数学的数值分析领域中，贝塞尔曲线（英语：Bézier curve，亦作“贝塞尔”）是计算机图形学中相当重要的参数曲线。

贝塞尔曲线于1962年，由法国工程师皮埃尔·贝兹（Pierre Bézier）推广，他是计算几何学中绘制任意缩放的曲线常见的解决方案。贝兹通过引入控制点优雅的解决了曲线缩放的问题：不可见的重力点吸引了直线并将其弯曲成曲线。具有单个控制点的贝塞尔曲线称为二次贝塞尔曲线，具有两个控制点的贝塞尔曲线称为三次贝塞尔曲线。如果你曾经在Adobe Illustrator中使用过钢笔工具，那么你应该已经熟悉这个概念。

该动画显示了如何计算二次贝塞尔曲线。

该动画显示了如何计算三次贝塞尔曲线。

你可以使用quadraticBezier()函数绘制二次贝塞尔曲线，只需传入两个端点，以及一个控制点的坐标。同样的bezierVertex()函数可以绘制三次贝塞尔曲线，需要传入两个端点以及两个控制点的坐标。这两个函数的唯一区别在于，bezierVertex()函数多了以控制点，可以绘制更加复杂的贝塞尔曲线。尝试拖动顶点和控制点以查看生成的代码。

beginShape();
  vertex(80, 100);
  quadraticVertex(217, 92, 354, 122);
  bezierVertex(430, 360, 200, 170, 130, 310);
endShape(CLOSE)

掌握贝塞尔曲线需要一定的练习，一开始很难知道一个形状需要几条贝塞尔曲线。尝试去控制这些看不见的控制点是没有用的，所以在深入研究代码之前话一些时间在这些示例上可能会有所帮助。下面三个都是用贝塞尔曲线创建的自定义形状示例。

代码

带洞的形状

当我们用vertex()，quadraticVertex()和bezierVertex()绘制图形时，无法绘制带孔洞的图形。在p5.js中，孔洞称为contour（等高线？）你可以使用beginContour()和endContour()函数来绘制具有孔洞的形状。实际上beginContour()函数表示你开始了一个新的形状，这个形状将会从主形状中减去。和beginShape()一样，你可以使用顶点函数绘制形状，并且使用endContour()结束轮廓。

代码

beginShape();
  // 在这画矩形
  beginContour();
    // 在这画三角形
  endContour();
endShape();

柔软而锋利

你可以继续前面几章的“设计词语”练习。我给学生的作业大概是这样的：设计一个具有黑白两种形状的设计，分别代表“柔软”和“锋利”。这是一项艰巨的任务，原因有很多，首先，学生必须考虑形状和轮廓如何传达这些意思，并且用不同的顶点表示“柔软”和“锋利”。同样这些形状存在于同一画布中能让学生考虑如何让形状互相融合以实现更加生动的效果。