当前位置:
首页 > 网站分类 > 趣站奇站 > 【WeaveSilk】独具匠心的在线绘画特效平台,对称涂鸦,怎么画都漂亮

【WeaveSilk】独具匠心的在线绘画特效平台,对称涂鸦,怎么画都漂亮

网站名称:

WeaveSilk

网站热度:979°C     2 人喜欢
silk

Weavesilk是一个基于HTML5的独具匠心的在线绘画特效网页,它告诉我们关于对称的美丽传说,伴着梦境般的音乐,你可以在网页上绘出绚彩效果,不用担心你画得不好,因为网站默认是对称模式,三维图形,把数学算法发挥的淋漓尽致,漂亮的特效显示,搭配炫丽的颜色效果,简直是美的一塌糊涂。无论怎么画都漂亮,还不试试!

【WeaveSilk】独具匠心的在线绘画特效平台,对称涂鸦,怎么画都漂亮

简单的使用方法

进入网站后即可涂鸦,基于一个中心,可设置两边对称或多边对称,动动鼠标就可以绘制不同形状的画。也可设置不同的颜色来达到不一样的效果。点击左下角的色块可以选择颜色(6种颜色),点击色块的右边可以选择2分屏、4分屏、无对称模式,而在左上角提供清空和分享。在绘图的过程中,对上一步操作不满意,可撤销,可全屏显示。绘制完的图片可自行保存,也可分享给好友。更多细节大家去体验下吧,挺好玩的!

【WeaveSilk】独具匠心的在线绘画特效平台,对称涂鸦,怎么画都漂亮

详细的绘制方法

1、波浪线的画法

这个效果中很重要的一个亮点就是一层层平滑的波浪,相信细心的朋友一定注意到了这里面的随机事件,每一条线都是一条随机路径,难点不在于如何选取随机点的位置,而是如何用一条平滑的线将它们连接起来。如图1中左图是一条随机线中的各个随机点,如果用直线连接那么就是一条条的折线,显然不是我们要的波浪线;如果如中图那样用曲线来连接,难点就是如何来确定曲线的控制点;所以我采用的方法是如右图那样,用每两个点的中点来做实际连接的锚点,而采用原来的随机点作控制点,这样既能保证平滑又可以确保曲线与随机点的方向一致,不至于最后出来的波浪线走样儿。

2、波浪线间的填充效果

波浪线做好后,每两段相邻的波浪线之间应该是连续填充的,否则丝绸就变成粗线条的麻布了。我刚看到这个效果的时候就在想这个问题,仔细观察后发现波浪线之间的填充色有很强的渐变,而且在一些极端区域甚至可以看到细线。这让我确定了之前的一个猜测,那就是波浪线之间的填充是若干条细线,而不是整块填充色。

也就是说,在画两条相邻的波浪线时,同时将它们中间的若干条过渡线补充进去,这样当过渡线足够多就会形成填充。

3、颜色的过渡

丝绸绚丽的色彩是整个效果最夺目的地方,它其实就是一条连续的光谱。可见光的光谱从长波到短波会依次经历彩虹的七个颜色:红、橙、黄、绿、青、蓝、紫。

4、光效

为了弄清楚整个效果的点睛之笔,也就是光影效果,我确实费了好一阵功夫。我的思路是这样的,当所有的线条都画好后,由于波浪线的疏密会形成颜色的深浅,这一点无需质疑,只要将波浪线一条一条画上去自然会水到渠成。但是仔细观察后发现,原效果中线条密集的地方除了饱和的颜色之外,还有明显的白色高光。

【WeaveSilk】独具匠心的在线绘画特效平台,对称涂鸦,怎么画都漂亮

所以一定要用到BlendMode.ADD这个算法,因为只有这个方法会在两种颜色叠加时增加RGB的实际值。可是当我用BlendMode.ADD后发现效果与预期的相差甚远,像素感特别强,更别提什么平滑。我用了整整两个通宵来解决这个问题,修改透明度、颜色值、加高光层等等做过各种尝试,最后发现原因出现在一个小小的细节上。因为我用的是BitmapData位图绘制,在黑色的背景上有一层输出位图,我在初始化的时候将输出的位图定义成全透明的,这样绘制的波浪线实际上是在一张透明层上做图形叠加,所以结果很差。解决的方法就是将输出背景改为不透明黑色,这样得到的效果就和当初设想的一模一样!

至于效果中其他的一些细节比如跟随线条的小星星等因为不是核心技术瓶颈,所以我就不一一解释。我写这个代码的目的就是想告诉Flash开发者,Flash 和ActionScript都已经非常成熟,只要你在网页上见到的任何绚丽的效果,不管它是不是用Flash开发,基本上都可以用Flash作出一模一样甚至更好的结果。

快速访问网站:【WeaveSilk】
「淘小众」版权所有丨如未注明 , 均为原创
更多精品网站请访问【小众实用导航】

探索互联网世界,收集和分享实用互联网资源,推荐国内和国外知名、实用、创新、科技、优质的站点资源!互联无极限,探索无止境;分享求真知,网络无国界!

网友评论6

  1. 真的好漂亮哦

    2015-12-01 上午10:24 [回复]
    • 是吧,可以发挥自己的想象力和创造力,尽情创作

      2015-12-01 下午12:14 [回复]
  2. 板凳
    婉婷:

    非常高兴遇到这么好的文章 谢谢

    2015-12-03 上午9:12 [回复]
    • 谢谢你的鼓励,大家的鼓励是我前进的动力!感谢~~~

      2015-12-03 上午9:21 [回复]
  3. 沙发
    HarriesBlog:

    网站做得真不错

    2015-12-08 上午10:49 [回复]

发表评论

表情
还能输入210个字

TOP