生成性不良笔迹

2020-09-21 06:35:42

所以.。上周,我在#つぶやき处理圈子里发了一条很受欢迎的推文。

我会试着解释一下这个剧本是如何工作的,以及我是如何将整个剧本写成280个字符的。

所有这些都始于上周,当时我正在试验p5js curve()函数。在内部,这是Centripetal Catmull-Rom样条线的实现。为了好玩,我试着创造了一群8条腿的水蜘蛛:)。

我承认这看起来很蠢。这样做的目的是制作一部动画,一大群水蜘蛛,摄像机四处摇摆。但后来,为了理解Catmull-Rom样条的确切工作原理,我决定在2D画布上随机绘制一组曲线,它不知何故类似于我的母语(马拉雅拉姆语)的手写。

另外,在这个时候,我正在玩“旅行”(2012)中的PC Remaster。旅途中有一部非常漂亮的块状经文,在游戏中遍布寺庙。

我猜这很容易产生。我尝试了几次使用p5.js重现近似样式。

这个脚本有一些严重的性能问题(您可以看到它在接近尾声时变慢了)。后来我了解到,这种毫无意义的写作风格在艺术界被称为生成性贫血写作。根据维基百科的说法:

贫血写作是一种无字、开放的语义写作形式。“同源”一词的意思是“没有特定的语义内容”。由于贫血症写作的非特异性,出现了意义的真空,留给读者去填充和解释。

我决定将两者结合起来,创造一个无限的马拉雅拉姆语式贫血写作的生成器。我以前见过弯曲性贫血。所以,我所做的并不是什么新鲜事。然而,也许我让它无限滚动的方式是新的(?)。我会试着解释一下代码是如何工作的。

我在缩小的过程中丢失了原稿,但我设法将这条推文重新缩小了。

Var yOffset=24;var scllPosition=0;var canvasWidth=800;var edge=90函数Setup(){createCanvas(canvasWidth,canvasWidth)noFill();}函数确定性Random(Index){return 1000/3*Noise(Index)-90}函数Draw(){Background(';#fd7&39;);Translate(0,scroll Position--);for(i=0,y=0;y<;canvasWidth-scroll Position;y+=yOffset)for(x=90;x<;canvasWidth-scroll Position;y+=yOffset){if(y+March>;){if(y+March>;);for(i=0,y=0;y<;canvasWidth-scllPosition;y+=yOffset)for(x=90;x<;canvasWidth-scroll Position;y+=yOffset。-scroll Position){curve(确定随机(i++)+x,确定随机(i++)+y,x,y+yOffset,x+9,y+yOffset,确定随机(i++)+x,确定随机(i++)+y)}其他{i+=4}x+=(9+确定随机(i++)%9)if(Noise(x*y)<;.13){y+=2*yOffset x=March}。

代码中最重要的部分是Definistic Random()函数,该函数在草图中使用了很多次。它基本上是Noise(),但映射到范围[243,-90]。P5 js curve()采用2个控制点和2个物理点坐标来确定曲线的位置和形状。因此,每个字符IS是控制点的4个确定性随机数+物理点的4个常数的集合。所有这些点都通过基准<;x,y>;坐标偏移,以将曲线放置在一条直线上。因为它是确定性随机的,所以曲线的形状和位置在每一帧中都保持不变。使无限滚动效果发挥作用。

这2个循环以恒定的速率在x和y上迭代。X乘9像素,y乘24像素。但是,在循环内部,基于确定性随机,x被随机递增最多9个像素,以模拟字符之间空格中的随机性。此外,如果对于概率较低的随机条件(Noise(x*y)<;.13),则添加换行符。这意味着,y在该循环中递增三次,并且x被重置为裕度值(90)。

无限滚动效果基本上是使用Translate(0,scllPosition--)完成的。调整循环终止子句,以便只呈现帧内的行(在y=scllPosition到scllPosition+canvasHeight之间)。直接在循环内的条件y+差额>;-scllPosition会检查这一点。这还将随机数索引偏移到Else情况下呈现的行所需的索引。以下是脚本的一个版本,它显示了在脚本运行时呈现的行:

基本上就是这样。我设计的最初版本渲染每帧中从第一个滚动位置到最后一个滚动位置的每一行,即使这些行不可见。这对性能非常糟糕,循环中的if条件修复了这个问题。

最小化的第一步是将所有函数转换为箭头函数。这样占用的空间要少得多。然后,我将所有的setup()内容移动到raw()。即使您将createCanvas放在Draw()中,p5也不会重新执行它。然后我不得不尽可能地减少变量的数量。其中2个被重复使用:CanvasWidth(W)和Edge(K)也被用作确定性Random()中的系数。最后,删除了空格,并将长名称截断为单字符。

这个剧本大约用了2-3个小时就写好了。回过头来看,我可以在很多地方尝试减少重复代码并使其更流畅。我从来没有想过这会这么受欢迎,所以我从来没有真正关心过优化这么多。但这就是你要做的..。生成糟糕笔迹的简单方法:)