iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
2
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具系列 第 17

[PixiJS - Day-17] tint 上色與在 PixiJS 玩顏色

支援 tint 方法的物件,可透過設定 tint:number 的方式將顏色套在物件上
(設定 tint:0xFFFFFF 會移除套色效果)

官方範例 DEMOS - Tinting
alt
原圖
alt

tint 可以把指定的顏色套到物件上
但不是所有可視物件都支援;PIXI.Container 就沒有 tint 方法

支援:
PIXI.Container:不支援
PIXI.Sprite:支援
PIXI.extras.AnimatedSprite:支援
PIXI.Graphics:支援
PIXI.Text:支援


色彩模型:
除了使用 RGB 指定顏色外,
我常使用 HSL或 HSV 色彩空間使指定顏色
Wiki: HSL和HSV色彩空間
alt

當控制「色相」變化,並維持「明度」「飽和度」不變時
就能做出一樣「鮮豔」、一樣「粉」、一樣「沉」但不同的顏色
alt


當填色完成時,再搭配 Alpha 值變化、填色形狀
就能做出漂亮的顏色

使用 角度 漸層填滿方式,填滿白色
並將末端的透明度設定為 0
alt

使用 角度 漸層填滿方式,填滿色相環
並將末端的透明度設定為 0
alt

使用 角度 漸層填滿方式,填滿色相環
一端調高明度,另一端透明度設定為 0
alt

也許有點難理解,攤成直線
一端調高明度,另一端透明度設定為 0
alt

搭配動態,就會很漂亮
alt
(原圖為網路上一張 Gif,我使用 PixiJS 練習重製出一樣的效果)


隨機顏色:
先隨機選擇色相環上的某個角度,再加上正負隨機幾度
就能選到紅、偏橘的紅、偏紫的紅
但不會選到綠色,因為超過隨機選擇的範圍
alt


alt
這是另一個使用 PixiJS 繪製花朵的效果,每一辦葉子田的顏色不完全相同
使用PIXI.GraphicsbezierCurveTo 方法繪製花瓣

alt
做成動態的效果也很不錯


上一篇
[PixiJS - Day-16] 使用 dat.GUI 工具除錯
下一篇
[PixiJS - Day-18] 在 PIXI 裡使用 blendMode 混合模式
系列文
PixiJS,方便好用的 WebGL 內容產生工具31

1 則留言

0
zxcv13579
iT邦新手 5 級 ‧ 2018-01-04 14:20:24

您好,初次接觸PixiJS,請問關於這篇文章內的GIF,請問在github內,是否可以註解教學呢?

色環那邊,實在不明白該如何產生出來

色環的部分,主要用的是 PIXI.Graphics 裡 arc 畫扇形方法
alt

相關程式碼的部分是:

var t = new PIXI.Graphics();
var totalCount = 360;
for(var i = 0;i< totalCount; i++){
	var colorArray = hsvToRGB2( i * 360 / totalCount, 1, 1);
	var color = colorArray[0] * 65536 + colorArray[1] * 256 + colorArray[2];

	var arcGraphic = new PIXI.Graphics();
    
		// 畫扇形的扇部
		arcGraphic.beginFill(color, 1);
		arcGraphic.arc( 0, 0, 200, (0) * (Math.PI / 180), (1) * (Math.PI / 180) );
		arcGraphic.endFill();

		// 畫扇形的三角形部分
		arcGraphic.beginFill(color, 1);
		arcGraphic.moveTo(0, 0);
		arcGraphic.lineTo(0, 200);
		arcGraphic.lineTo(Math.sin( 2 * (Math.PI / 180)) * 200, Math.cos( 2 * (Math.PI / 180)) * 200);
		arcGraphic.lineTo(0, 0);
		arcGraphic.endFill();

		arcGraphic.rotation = i * (Math.PI / 180);
		arcContainer.addChild(arcGraphic);
}

CodePen:
https://codepen.io/eia/pen/wpryQy

這篇 gif 的動態是基於這個色相環的上色方式,
加上遮罩與配合 tween 的使用完成

tween 的部分滿硬的,內容偏向用程式製作動畫
會有些脫離 PixiJS 討論的範圍

zxcv13579 iT邦新手 5 級 ‧ 2018-01-08 10:58:07 檢舉

不好意思,這麼晚回復,也很謝謝您撥空向我說明。

我要留言

立即登入留言