背景故事

几周前,在处理ReadShape时,我遇到了一个不太令人惊讶的问题。有些书没有封面。从来没有,永远不会。

这怎么可能?好吧,当你走进书店时,当然所有的书都会有封面,即使只是为了把所有的纸放在一起。但是我们生活在数字时代,任何人都可以在没有出版商的情况下出版一本书,在某些情况下,甚至不需要使用正确的语法。在这种情况下,您经常会遇到没有封面的书籍。

这产生了一个有些独特的问题。当然,您可以使用一个简单的解决方案,只显示一个 cover-not-found.jpeg,但这还不够过度设计。

这使我走上了生成艺术的多彩和艺术之路。

什么是生成艺术?

本质上,生成艺术是由机器使用算法生成的艺术。

很酷的一点是,它每次运行时都可以输出截然不同的结果。

示例

这是 Tyler Hobbs 的一些生成艺术,名为“Fidenza”。每个都是对同一算法的不同调用。

菲登扎


这是与 Kjetil Golid 不同的算法,名为“Tilework”。

瓷砖

流场

从示例中可以看出,每种算法可以产生的输出存在相当大的差异。

在许多情况下,算法需要产生一定程度的整体一致性。如果每条线随机进入新的方向,Fidenza 的输出看起来就不会那么好。

为了获得这种整体均匀性,通常使用称为“流场”(也称为“矢量场”)的东西。本质上,它的作用是创建一个网格,其中每个向量都包含一个方向。

下图更容易理解。

向量场

现在每个点都让您朝着某个方向前进,您只需选择一个点并按照箭头走 N 步。

跟随向量场

生成流场是我不会深入讨论的内容,但如果您想了解更多信息,请查看来自 Tyler Hobbs](https://tylerxhobbs.com/essays/2020/flow-fields)的[这篇文章。

书籍封面

现在,回到为什么我们首先要进入这个兔子洞——书籍。

生成艺术似乎正是我正在寻找的东西。但是,仍然需要记住的是,对于我的用例,给定相同的输入,我总是希望返回相同的输出。这只是为了让我可以节省我的 S3 账单并即时生成这些封面。

这意味着一些事情——没有随机值,没有不必要的依赖,而且它必须很快。

我最终做的是根据输入参数创建一个杂音散列,因为杂音很快并且总是返回一个 uint32 值。非常适合进行基于概率的决策,创建 rgb 值,并且足以创建流场。

如果您有兴趣查看源代码,请看这里:https://github.com/ReadShape/covers

这是结果的示例

ReadShape Covers

它简单,快速,并且包含大量的品种。你可以在这里玩。

结论

我希望你今天学到了一些新东西,希望你能很快在ReadShape上看到这些封面。

也欢迎您为GitHub 存储库做出贡献。

— T

Logo

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐