代码之家  ›  专栏  ›  技术社区  ›  mmcdole

你怎么画得像蜡笔?

  •  39
  • mmcdole  · 技术社区  · 16 年前

    Crayon Physics Deluxe 是一款最近推出的商业游戏。观看主链接上的视频,了解我在说什么。

    它可以让你画出形状,让它们与适当的物理反应。我们的目标是用你制作的装置和形状,将球在屏幕上移动到一颗星星上。

    虽然游戏基本上是大众的包装 Box2D Physics Engine 它确实有一个特性,我很好奇它是如何实现的。

    它的绘画外观 非常 很像蜡笔。你可以看到蜡笔的纹理,当它画的时候,它的厚度和黑暗程度会有所不同,就像实际的蜡笔画一样。

    alt text http://www.kloonigames.com/crayon/screenshots/crayon_small_01.jpg alt text http://www.kloonigames.com/crayon/screenshots/crayon_small_02.jpg

    背景纹理免费提供 here .

    alt text http://img267.imageshack.us/img267/1488/crayonmh7.png
    蜡笔画特写-注意不同的黑暗

    用什么样的算法来渲染那些像蜡笔一样的线条?这是一个简单的纹理随机厚度和黑暗,还是有更多的事情发生?

    7 回复  |  直到 16 年前
        1
  •  21
  •   PATRY Guillaume    16 年前

    我记得(很久以前)我读过一个算法的简短描述:

    • 对于直线的一般形式,在一个随机点将线段分成两部分,并将该点稍微远离其位置(取决于点到末端的距离的变化)。递归/随机重复。 这样,你的线条就不是“完美的”(直线)

    • 对于给定的段,您可以通过延伸一个端点或另一个端点(或两者)来稍微“超调”。 这样,你的关节就不完美了 . 如果我记得很好的话,最好的方法是延伸原来的末端,但是如果你想明显地分割它们,你可以为子段做这个。

    • 用图案/图章画线

    • 还可以用不同的开始和结束不透明度绘制(模拟绘图结束时释放笔的趋势)。

    • 您可以使用不同大小的图章作为行首和行尾(也可以模拟在绘图结束时释放笔的趋势)。为了达到同样的效果,你也可以画两次线,其中一个末端的变化很小(在这种情况下,注意α,因为画两次线)。

    • 最后,对于一个给定的行,您可以进行前面的几次修改(即,用不同的变体绘制两次行):如果人类犯了一些错误,则倾向于重复一行。

    当做

        2
  •  7
  •   mmcdole    16 年前

    如果放大图像,可以看到重复的图章图案。可能有一个小的分类,当它从A到B移动时使用-甚至可能旋转它们。

    这条线的摇摆不定不是那么困难。分成一组随机段,从直接路线上稍微选取位置并绘制样条曲线。

        3
  •  7
  •   Steve Hanov    12 年前

    这里有一个 paper 这需要大量的数学知识来模拟使用摩擦模型在纸上沉积蜡的过程。但是我认为你最好的选择是使用一个重复的模式,正如另一个读者提到的,并根据压力改变不透明度。

    对于不完美的线条绘制部分,我有一个 blog entry 描述如何使用贝塞尔曲线。

        4
  •  4
  •   mmcdole    16 年前

    你可以把黑暗建立在速度的基础上。这只是测量光标在这一帧和最后一帧之间移动的距离(记住勾股定理),然后当您在屏幕上绘制该线段时,根据您测量的距离调整alpha(不透明度)。

        5
  •  4
  •   a_m0d    15 年前

    有一份叫 Mimicking Hand Drawn Pencil Lines 其中包含了一些你想要的东西。虽然它没有给出算法的非常详细的视图,但作者确实介绍了他们使用的步骤的基础。

    本文对它们是如何生成线条以及如何生成线条的纹理进行了高级描述,并得出了与您想要的相似的结果。

        6
  •  3
  •   Drew Noakes    12 年前

    本文就 rendering chart series to look like XKCD comics 有一个相关的干扰线的算法。它不包括计算蜡笔画线的纹理,但它提供了一种方法,使一条直线看起来不完美,以一种类似人类的方式。

    实例输出:

    enter image description here

        7
  •  0
  •   bgw rmribeiro    16 年前

    我相信最简单的方法就是使用一个纹理和随机黑暗(一些梯度,也许)在整个,并设置大小随机。