你怎么画得像蜡笔?

蜡笔物理豪华是最近出来的商业游戏。 观看主要链接上的video,了解我在说什么。

它可以让你绘制形状,让他们与适当的物理反应。 目标是使用您制作的装置和形状将球移到屏幕上。

虽然游戏基本上是stream行的Box2D物理引擎的封装,但它确实有一个function,我很好奇它是如何实现的。

它的绘画看起来很像一个蜡笔。 你可以看到蜡笔的纹理,当它画出来的时候,就像实际的蜡笔画看起来一样,它的厚度和黑度都不一样。

替代文字http://www.kloonigames.com/crayon/screenshots/crayon_small_01.jpg 替代文字http://www.kildigames.com/crayon/screenshots/crayon_small_02.jpg

背景纹理在这里免费提供。

替代文字http://img267.imageshack.us/img267/1488/crayonmh7.png
closures蜡笔画 – 注意变化的黑暗

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

7 Solutions collect form web for “你怎么画得像蜡笔?”

我记得(很久以前)读过这样一个algorithm的简短描述:

  • 对于线的一般forms,将线段在随机点分成两部分,然后稍微远离它的位置(取决于点到四肢的距离的变化)。 重复recursion/随机重复。 这样,你的线条就不是“完美”(直线)

  • 对于给定的段,可以通过扩展一个末端或另一个(或两个)来“超调”一点。 这样,你没有完美的关节 。 如果我记得不错的话,最好的办法就是延长原来的四肢,但是如果你想明显地将它们分开,你可以在子细分中做到这一点。

  • 用图案/图章画线

  • 还有(已经提到的)以不同的开始和结束不透明度绘制的可能性(以模仿在绘图结束时释放笔的倾向)

  • 您可以使用不同的尺寸作为开始和结束的印章(也可以模拟在绘图结束时释放笔的趋势)。 为了达到同样的效果,你也可以画两条线,其中一个端点的变化很小(在这种情况下要注意alpha,因为这个线会被绘制两次)

  • 最后,对于一个给定的行,你可以做几次以前的修改(即画两条线,有不同的变化):如果人们犯了一些错误,他们倾向于重复行。

问候

如果你把图像吹起来,你可以看到一个重复的印章模式..它可能会使用一个小的分类,因为它从一个移动到B – 甚至可能旋转它们..

线路的摇摆不是那么难。 划分成一堆随机段,从直接路线稍微挑选位置并绘制样条线。

这里有一篇论文使用大量的math来模拟使用摩擦模型在纸上沉积蜡。 但是我认为你最好的办法就是像上面提到的另外一个读者一样使用重复模式,并根据压力改变不透明度。

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

你可以基于黑暗的速度。 这只是测量在这个帧和最后一帧之间光标所走过的距离(记得毕达哥拉斯定理),然后当你在屏幕上绘制该线段时,根据你测量的距离调整alpha(不透明度)。

有一种叫做“ 模仿手绘铅笔线”的纸张,涵盖了你之后的一些东西。 虽然它没有提供一个非常详细的algorithm视图,但作者确实涵盖了他们使用的步骤的基础知识。

这篇论文包含了他们如何生成线条的高级描述,以及他们如何生成线条的纹理,并得到了与你想要的相似的结果。

这篇将图表系列看起来像XKCD漫画的文章有一个扰动可能相关的行的algorithm。 这并不包括计算蜡笔画线条的纹理,但是它确实提供了一种以类似于人类的方式使直线看起来不完美的方法。

示例输出:

在这里输入图像说明

我相信最简单的方法就是使用随机黑暗(也许有些渐变)的纹理,并随机设置大小。

  • 获取图像大小,但不将图像加载到内存中
  • Symfony2 - CSS中的资产负载图像
  • 在电子邮件中发送内嵌图像
  • 在UIButton中的图像下标签
  • 使用ImageMagick批量调整图像到新文件夹中
  • 将base64string转换为Java中的Image
  • 在C#中使用Bitmap对象查找图像格式
  • 如何按比例调整图像大小/保持纵横比?
  • href图像链接下载点击
  • 为什么我得到错误:“不是JPEG文件:以0x89 0x50开头”
  • “JPG”/“JPEG”/“PNG”/“BMP”/“GIF”/“TIFF”图像有什么区别?