歌德色彩的制作（2020）

弄清楚如何在旧事物上换一张新面孔从来都不是一件容易的事，设计一种新的方式来看待歌德的色彩理论也不例外。一开始是一个相对简单的想法，结果比我预想的要复杂，但这个过程是一次很好的学习经历。最终的结果也很有趣。

我已经分析了我相当多的古文，每次我找到一个新的来探索，我发现以新的方式来探索既令人畏惧又令人兴奋。我尝试了几十种歌德的色彩，最后终于找到了一种。通常情况下，我不知道什么是有效的，直到我看到它，所以需要大量的实验。

1810年，德国政治家兼作家约翰·沃尔夫冈·冯·歌德探索了颜色的心理学，以及人类如何在颜色理论中感知颜色。虽然大部分被科学界拒绝，但它受到哲学家和艺术家的欢迎和影响。

在为其他项目做研究时，这本书曾几次出现在我的脑海中，这一次，它激发了我的兴趣，足以探索将其内容可视化的方法。考虑到这本书都是关于颜色的，我选择特别关注颜色本身，提到了哪些颜色，以及何时提到。我的假设是，这本书将讨论多种颜色，将其可视化可能会很有趣。我不会说德语，所以我选择使用互联网档案馆和古腾堡计划提供的1840年英语翻译。

我惊讶地发现，虽然这最终是真的，但并不像我预期的那么多颜色被提及。在471页的95000多个单词中，只有1851个按名称提及颜色（如“红色”、“黄色”等），只有191个用于引用这些颜色的独特名称（如“红色”、“黄绿色”、“金色”等）。

任何数据驱动项目的首要任务之一就是查看原始数据。像我的许多项目一样，我需要自己生成这些数据。我将古腾堡项目上的文本用作我的主要数据源，因为它是用HTML标记的，所以我的目标是用JavaScript进行解析，以避免将原始数据重塑为另一种格式。

我浏览了一下这本书，发现最常见的颜色名称，如“红色”、“橙色”、“黄色”等，使用频率最高，所以我首先用JavaScript中一个非常基本的正则表达式搜索每种颜色出现的频率：

红色[\.]这是一个最初的尝试，试图捕捉其用法的变化，如“redder”、“redish”或任何其他带有“red”的词。这有其自身的问题，但第一次测试很好地展示了可用数据的数量和种类。

数据的早期图片，使用圆圈表示书中出现的基本颜色名称序列

我决定用正则表达式来查找所有颜色，而不是手动查找每种颜色，于是我开始尝试颜色的其他名称和名称的变体，看看还有什么出现。我找到了许多其他的，但没有回避手动检查的必要性。我忍不住想，一些文本分析和机器学习会使这个过程更高效、更有趣，但由于缺乏如何使其工作的知识，我开始采用手动方法。我最终决定使用下面冗长的正则表达式。它本可以更精简一些，但它满足了我的需要。

(

这种复杂的混乱让我找到了所有的名字和它们的变体，比如“whiter”和“whiteness”，如果它们被连字符连接成“黄绿色”或“红橙色”，即使它们被页面标记打断，或者包含了“light”或“dark”这样的修饰语

在开发检测“红色”而不是“推断”或“有色”等包含“红色”的单词的方法时，我使用了负面查找，但了解到它在我的主要浏览器Firefox中不起作用。我在2018年4月的Stack Overflow上发现了这个线程，其中提到它只适用于最新版本的Chrome。

尽管我努力开发一个全面的正则表达式，但在进行最终解析时，我仍然必须标记一些要忽略的单词，因为即使它们与表达式匹配，它们也没有被用作命名颜色的方式。例如，从第47页中选取以下段落：

在本例中，“胭脂红”被用作色素材料的名称，“玫瑰”的第一个实例引用的是一朵花，它们都不是颜色名称，因此被忽略。所有其他颜色都用作形容词或名词作为颜色名称。

除了找到颜色，我还计算了它们在文本中的确切位置，我在许多早期设计迭代中使用了这些位置，但在最终结果中没有使用。一些名字也没有从德语原文翻译过来，而是保留在德语、意大利语或拉丁语中。谷歌翻译（Google Translate）被用来估计英语对应词的最佳猜测。

一旦收集到原始数据，最后的准备任务就是为文本指定实际的颜色。由于歌德没有提供每一种颜色的视觉效果，因此，一些创作许可被用来设计调色板。罗伯特·里奇韦（Robert Ridgway）1912年的《颜色标准和颜色命名法》被用作该调色板的基础。

只要有可能，我就将歌德使用的语言与里奇韦开发的名称进行匹配，并根据匹配结果对十六进制值进行采样。并不是所有的名字都匹配，所以我使用了一些创造性的许可证，通过我认为很接近的匹配来确定其余的名字。

我在这个项目中的目标是设计一个能以丰富多彩的方式一目了然地展示歌德提到的所有颜色的东西，作为一种看待歌德作品的新方式。许多想法在理论上听起来不错，但最终落空了，因为最终的结果在几个方面削弱了色彩的活力。

这里展示的是几十个迭代中的几个，按照我开发它们的顺序，作为我实验的时间线。它们很粗糙，没有经过打磨，但保存和审查它们可以成为一种有用的方式，可以知道哪些不起作用，或者为未来的项目获得灵感。

到目前为止，我主要关注每种颜色的数据，因为它与整本书有关。结果总是乱七八糟的，没有一个激起我作为最终设计进行探索的兴趣。然而，雷达散点图确实有点有趣，我考虑用它制作一张海报。我把重点转移到了检查每页的颜色使用情况，这导致了接下来的迭代，并最终得到了最终结果。

这一设计理念最终将成为最终结果的基础，但使用圆形代替条纹。比较这两个迭代是意图与吸引力的一个很好的例子。当从远处按条纹在每页上的显示顺序查看时，颜色混合在一起时会显得浑浊。按光谱顺序（红色、橙色、黄色等）重新排列它们可以提高它们的活力。前者可能有额外的意义，但后者更具吸引力。

当我第一次看到最后的设计时，我知道它值得探索。所有的颜色都是可见的和充满活力的，布局也足够多样化，这让我想探索一切。

到目前为止，我在所有迭代中都使用了白色和黑色背景，但这两种颜色都存在无法清晰看到所有颜色的问题。在白色背景下，较浅的颜色很难看到，反之亦然，在黑色背景下。通过切换到灰色背景，并在每个圆圈周围添加一个微妙的边框，我能够找到一个不会干扰灰色圆圈或黄色等其他颜色的最佳点。

这些圆的位置基于一种打包算法，根据正方形中的圆数，在一个正方形中打包尽可能多的大小相同的圆。几年前，我发现了Packomania，它有很多打包图可以下载为PDF格式，包括方形打包的圆、不同比例的矩形、三角形等等。我使用这些图表，而不是开发自己的算法。任何给定页面上的颜色总数是33，所以我只需要前33张图表。

然而，仅仅导入这些图表仍然会从远处导致一些模糊的颜色。幸运的是，使用“按颜色按角度排序”选项可以轻松地对每个形状进行排序，而无需按颜色排序，因此结果非常有用。

当我打磨这个设计时，我发现自己反复思考在任何给定的页面上提到了什么颜色，因为圆圈的图案很有趣。我最初只打算制作一张数据驱动的海报，而不是一个互动版本，但这导致我想制作一张，因为我知道我不会是唯一一个对此感到疑惑的人。

因为我已经有了结构化格式的颜色数据来创建视觉效果，用它来构建一个交互式版本似乎很简单，而且在大多数情况下，除了一些突然出现的挑战之外。

我选择了一种简单的方法，使用简单的HTML/CSS来创建视觉效果，但有一个问题是，我需要定位圆圈，以匹配来自Packomania的图表，我不想自己使用类似d3的东西来生成这些。要做到这一点，每个圆需要三个部分：坐标（x和y）和半径。NodeBox不是为原始数据操作而设计的，但它有一个有用的功能，可以导出到CSV，所以我使用它来创建一个数据集，通过检测每个SVG圆的坐标，并将其与Packomania的半径列表结合起来，生成前33个装箱图。

使用这些数据集，我能够复制我在NodeBox中为海报创建的内容，并通过点击页面查看上下文中提到的颜色来增强它。

点击一个页面以显示上下文中的颜色，将加载古腾堡项目的全文，并突出显示所有颜色。由于最初的检测过程，高亮显示颜色的过程有点慢，而且该过程使用的正则表达式只在Chrome中工作，因此我选择用高亮显示的颜色重新生成HTML，这样每次打开弹出窗口时都不会检测到它们。

我在Safari和mobile Safari中遇到了一个有趣的怪癖。弹出窗口包含一个iframe，用于加载静态HTML文件。我最初的想法是用散列加载文件，跳转到已经存在的页面锚：

然而，每次iframe的源发生变化时，Safari和mobile Safari都会以看似随机的数量向下滚动父窗口，从而导致被单击的页面滚动出框架。在经历了一些麻烦和失败的搜索之后，我发现使用querystring，然后在加载到iframe的页面上添加一些额外的代码来解析它，并滚动到所需的位置，这样做不会影响父窗口。

这个额外的代码还必须劫持页面上链接到其他部分（如脚注和其他部分）的其他锚链接。我承认这是一个奇怪的解决办法，但它是有效的。

最后，我在页面底部添加了一个简单的图表，显示了每种颜色被提及的总次数，并能够深入查看使用了哪些名称。

我开始这个项目时认为，看看一本关于颜色的书中有多少颜色被引用，这将是一个有趣的简单项目。和往常一样，它更多地涉及到许多设计思想和编程挑战。在这个过程中遇到了一些令人头疼的问题，但我对最终的结果感到满意，希望其他人也一样。