WeaveSilk:基於HTML5的在繪圖特效平臺

WeaveSilk:基於HTML5的在繪圖特效平臺是一個使用最流行的HTML5網頁技術開發的一個繪製三維圖形的網站,該網站把數學演算法發揮的淋漓盡致,漂亮的特效顯示,搭配炫麗的顏色效果,簡直是美的一塌糊塗。

WeaveSilk:基於HTML5的在繪圖特效平臺

簡單的使用方法:

1、進入主站,通過滑鼠點選拖拽,形成優美光紋,分雙邊對稱和四邊對稱模式;

2、截下圖案,剩下就是PS的活兒了。

下面是比較詳細的繪製方法了:

1、波浪線的畫法

這個效果中很重要的一個亮點就是一層層平滑的波浪,相信細心的朋友一定注意到了這裡面的隨機事件,每一條線都是一條隨機路徑,難點不在於如何選取隨機點的位置,而是如何用一條平滑的線將它們連線起來。如圖1中左圖是一條隨機線中的各個隨機點,如果用直線連線那麼就是一條條的折線,顯然不是我們要的波浪線;如果如中圖那樣用曲線來連線,難點就是如何來確定曲線的控制點;所以我採用的方法是如右圖那樣,用每兩個點的中點來做實際連線的錨點,而採用原來的隨機點作控制點,這樣既能保證平滑又可以確保曲線與隨機點的方向一致,不至於最後出來的波浪線走樣兒。

2、波浪線間的填充效果

波浪線做好後,每兩段相鄰的波浪線之間應該是連續填充的,否則絲綢就變成粗線條的麻布了。我剛看到這個效果的時候就在想這個問題,仔細觀察後發現波浪線之間的填充色有很強的漸變,而且在一些極端區域甚至可以看到細線。這讓我確定了之前的一個猜測,那就是波浪線之間的填充是若干條細線,而不是整塊填充色。

也就是說,在畫兩條相鄰的波浪線時,同時將它們中間的若干條過渡線補充進去,這樣當過渡線足夠多就會形成填充。

3、顏色的過渡

絲綢絢麗的色彩是整個效果最奪目的地方,它其實就是一條連續的光譜。可見光的光譜從長波到短波會依次經歷彩虹的七個顏色:紅、橙、黃、綠、青、藍、紫。

4、光效

為了弄清楚整個效果的點睛之筆,也就是光影效果,我確實費了好一陣功夫。我的思路是這樣的,當所有的線條都畫好後,由於波浪線的疏密會形成顏色的深淺,這一點無需質疑,只要將波浪線一條一條畫上去自然會水到渠成。但是仔細觀察後發現,原效果中線條密集的地方除了飽和的顏色之外,還有明顯的白色高光。

所以一定要用到BlendMode.ADD這個演算法,因為只有這個方法會在兩種顏色疊加時增加RGB的實際值。可是當我用BlendMode.ADD後發現效果與預期的相差甚遠,畫素感特別強,更別提什麼平滑。我用了整整兩個通宵來解決這個問題,修改透明度、顏色值、加高光層等等做過各種嘗試,最後發現原因出現在一個小小的細節上。因為我用的是BitmapData點陣圖繪製,在黑色的背景上有一層輸出點陣圖,我在初始化的時候將輸出的點陣圖定義成全透明的,這樣繪製的波浪線實際上是在一張透明層上做圖形疊加,所以結果很差。解決的方法就是將輸出背景改為不透明黑色,這樣得到的效果就和當初設想的一模一樣!

至於效果中其他的一些細節比如跟隨線條的小星星等因為不是核心技術瓶頸,所以我就不一一解釋。我寫這個程式碼的目的就是想告訴Flash開發者,Flash 和ActionScript都已經非常成熟,只要你在網頁上見到的任何絢麗的效果,不管它是不是用Flash開發,基本上都可以用Flash作出一模一樣甚至更好的結果。

猜你喜歡

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *