当前位置:搜索引擎大全 > 工具 > 站长工具 >

WeaveSilk:基于HTML5的在绘图特效平台【美国】
栏目分类:站长工具 发布日期:2022-07-18 浏览次数:

WeaveSilk它是最流行的使用HTML5网页技术开发的一个绘制三维图形的网站,将数学算法发挥得淋漓尽致,展现出美丽的特效,搭配耀眼的色彩效果,简直美一塌糊涂。

  网站logo:WeaveSilk logo

  网站名称:WeaveSilk

  所属国家:美国

  网站地址:http://weavesilk.com

  网站介绍:

  WeaveSilk它是最流行的使用HTML5网页技术开发的一个绘制三维图形的网站,将数学算法发挥得淋漓尽致,展现出美丽的特效,搭配耀眼的色彩效果,简直美一塌糊涂。

  使用方法简单:

  1.进入主站,通过鼠标点击拖动,形成优美的光线,分为双边对称和四边对称模式;

  2.截下图案,剩下的就是图案,PS的活儿了。

  以下是比较详细的绘制方法:

  1.波浪线画法

  这种效果的一个重要亮点是光滑的波浪。我相信细心的朋友一定注意到了随机事件。每条线都是一条随机路径。在于如何选择随机点的位置,而在于如何用光滑的线连接。如图1所示,左图是随机线中的每个随机点。如果用直线连接,那就是折线,显然不是我们想要的波浪线;如果像中图一样用曲线连接,难点在于如何确定曲线的控制点;所以我用的方法是像右图一样,用每两个点的中点作为实际连接的锚点,用原来的随机点作为控制点,既能保证光滑,又能保证曲线与随机点的方向一致,以免最终波浪线变形。

  2.波浪线间的填充效果

  波浪线完成后,每两条相邻的波浪线应连续填充,否则丝绸将成为粗线的亚麻布。当我第一次看到这个效果时,我正在考虑这个问题。经过仔细观察,我发现波浪线之间的填充颜色有很强的渐变,甚至可以在一些极端区域看到细线。这让我确定了之前的猜测,波浪线之间的填充是几条细线,而不是整个填充颜色。

  网站缩略图:

WeaveSilk首页缩略图
WeaveSilk首页缩略图

  也就是说,在绘制两条相邻的波浪线时,同时补充它们之间的几条过渡线,这样当过渡线足够时就会形成填充。

  3.颜色的过渡

  丝绸华丽的颜色是整个效果中最引人注目的地方,它实际上是一个连续的光谱。可见光谱从长波到短波依次经历彩虹的七种颜色:红色.橙.黄.绿.青.蓝.紫。

  4.光效

  为了找出整个效果的点睛之笔,也就是光影效果,我真的花了很多时间。我的想法是这样的。当所有的线条都画出来时,由于波浪线的密度,颜色的深度就会形成。毫无疑问,只要波浪线一条一条地画出来,自然会自然而然地画出来。但仔细观察后发现,除了饱和的颜色外,原效果中线条密集的地方还有明显的白色亮点。

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

  至于效果中的其他细节,比如跟随线条的小星星,因为不是核心技术瓶颈,我就不一一解释了。我写这个代码的目的是告诉你Flash开发者,Flash和ActionScript已经很成熟了,只要你在网页上看到任何华丽的效果,不管它是否使用,Flash开发基本上可以用Flash做出相同甚至更好的结果。

相关热词: 美国 平台 特效 绘图 HTML5 WeaveSilk

搜索引擎 搜索杂谈 专栏 资讯 工具 新媒体 网站