WeaveSilk:基于HTML5的在绘图特效平台【美国】
栏目分类:站长工具 发布日期:2022-07-18 浏览次数:次
网站logo:
网站名称:WeaveSilk
所属国家:美国
网站地址:http://weavesilk.com
网站介绍:
WeaveSilk它是最流行的使用HTML5网页技术开发的一个绘制三维图形的网站,将数学算法发挥得淋漓尽致,展现出美丽的特效,搭配耀眼的色彩效果,简直美一塌糊涂。
使用方法简单:
1.进入主站,通过鼠标点击拖动,形成优美的光线,分为双边对称和四边对称模式;
2.截下图案,剩下的就是图案,PS的活儿了。
以下是比较详细的绘制方法:
1.波浪线画法
这种效果的一个重要亮点是光滑的波浪。我相信细心的朋友一定注意到了随机事件。每条线都是一条随机路径。在于如何选择随机点的位置,而在于如何用光滑的线连接。如图1所示,左图是随机线中的每个随机点。如果用直线连接,那就是折线,显然不是我们想要的波浪线;如果像中图一样用曲线连接,难点在于如何确定曲线的控制点;所以我用的方法是像右图一样,用每两个点的中点作为实际连接的锚点,用原来的随机点作为控制点,既能保证光滑,又能保证曲线与随机点的方向一致,以免最终波浪线变形。
2.波浪线间的填充效果
波浪线完成后,每两条相邻的波浪线应连续填充,否则丝绸将成为粗线的亚麻布。当我第一次看到这个效果时,我正在考虑这个问题。经过仔细观察,我发现波浪线之间的填充颜色有很强的渐变,甚至可以在一些极端区域看到细线。这让我确定了之前的猜测,波浪线之间的填充是几条细线,而不是整个填充颜色。
网站缩略图:
WeaveSilk首页缩略图
也就是说,在绘制两条相邻的波浪线时,同时补充它们之间的几条过渡线,这样当过渡线足够时就会形成填充。
3.颜色的过渡
丝绸华丽的颜色是整个效果中最引人注目的地方,它实际上是一个连续的光谱。可见光谱从长波到短波依次经历彩虹的七种颜色:红色.橙.黄.绿.青.蓝.紫。
4.光效
为了找出整个效果的点睛之笔,也就是光影效果,我真的花了很多时间。我的想法是这样的。当所有的线条都画出来时,由于波浪线的密度,颜色的深度就会形成。毫无疑问,只要波浪线一条一条地画出来,自然会自然而然地画出来。但仔细观察后发现,除了饱和的颜色外,原效果中线条密集的地方还有明显的白色亮点。
所以一定要用到BlendMode.ADD这种算法,因为只有这种方法会在两种颜色叠加时增加RGB实际值。但是当我用它的时候。BlendMode.ADD后来发现效果与预期相差甚远,像素感特别强,更不用说平滑了。我花了两个晚上来解决这个问题,修改透明度.颜色值.添加高光层等。做了各种尝试,最后发现原因出现在一个小细节上。因为我用的是它。BitmapData位图绘制,黑色背景上有一层输出位图,我初始化时将输出位图定义为完全透明,所以绘制的波浪线实际上是在透明层上叠加的,所以结果很差。解决办法是将输出背景改为不透明的黑色,这样效果就完全一样了!
至于效果中的其他细节,比如跟随线条的小星星,因为不是核心技术瓶颈,我就不一一解释了。我写这个代码的目的是告诉你Flash开发者,Flash和ActionScript已经很成熟了,只要你在网页上看到任何华丽的效果,不管它是否使用,Flash开发基本上可以用Flash做出相同甚至更好的结果。