寫的這個demo是想要實現Siggraph 17的一篇論文
原文地址如下
https://dl.acm.org/citation.cfm?doid=3072959.3073690
代碼鏈接
https://github.com/Birdy-C/HCI_ColorMixer
demo
關於論文
這個論文其實還是比較簡單的啦（我不過我只看了和寫的部分有關的內容）
主要部分一個是水滴融合，一個是提出了新的交互方式（的樣子）。（爲什麼不是一篇HCI論文而是一篇圖形學論文）
因爲原文是在Pad上的一個軟件，所以相對而言交互會方便很多。
所以交互方式就只能用鼠標點擊了——
關於水滴融合，其實我的理解就是
看看這個等勢面！多麼完美的水滴融合模型啊！（它可能有一個更專業的名詞叫做隱式曲面）
然後用的是據說是高斯的一個近似
剩下的就是對於在某個勢能以上的點判斷各部分的貢獻比例了
步驟
事件和交互
落下不會寫前端的眼淚……
js的數據處理都折騰了很久。經常小數轉十六進制就炸了啊、轉了十六進制沒有補0啊……格式輸出不對啊……還好比jsx debug方便很多（不太會用Adobe ExtendScript Toolkit）。
好像在js到jsx不能直接傳數組。我後來是弄成字符串在split的。
然後在CEP JavaScript和ExtendScript 端之間傳數據的時候，我還出現過事件監聽循環的那種炸（……）網絡環路那種。
在canvas上顯示小球的時候，是遍歷canvas上每一個點，根據位置判斷應該輸出什麼顏色。
球的信息同步
然後基本的界面是
對就是那麼傻。
一個球對應一個顏色。js中有一個數組記錄球的數量，jsx中一個數組記錄圖層的信息。然後接收到顏色變化事件之後，更新mask的顏色。
新建顏色的jsx代碼
function addNewColor(inColor) {
try {
// 新建兩個圖層並塞到數組裏
var layerRef = app.activeDocument.artLayers.add();
layerRef.name = "ColorMixer";
var layerRefMask = app.activeDocument.artLayers.add();
layerRefMask.name = "CM mask";
myLayerSets[index] = layerRef;
index++;
myLayerSets[index] = layerRefMask;
index++;
// layerRefMask.blendMode = BlendMode.NORMAL; // auto
// 移到合適的位置 這裏的worklayer就是之前那個workspace
worklayer.move(layerRef, ElementPlacement.PLACEBEFORE);
worklayer.move(layerRefMask, ElementPlacement.PLACEBEFORE);
layerRefMask.grouped = true;//設爲剪切蒙版
app.activeDocument.selection.selectAll;//選擇所有顏色
var colorRef = new SolidColor;
colorRef.rgb.hexValue = inColor;// 設置顏色
app.activeDocument.selection.fill(colorRef);
app.activeDocument.activeLayer = worklayer;// 把激活圖層回到Workspcace 免得讀完之後位置不對
} catch (e) {
alert("addNewColor" + e);
}
}
你敢信剪切蒙版是grouped……
繪製
每次更新顏色的時候，需要把畫在workspace上的內容分塊繪製到下面的分圖層中。
這個還是比較麻煩的（撫額）
分幾步
1. 選出在workspace上的繪製內容
2. 把下面圖層中被覆蓋的內容清空
3. 在下面的workspace按不同的顏色組成填充
第二步是爲了防止在上面的顏色已經繪製的內容遮擋先繪製的內容。
但是這樣的模型是有問題的。
主要是在透明度的問題上，由於這個沒有辦法讀取具體的透明度，所以沒有辦法分情況處理（或許有，讓我再想想有沒有好的操作）。一旦有了透明度之後，將這個顏色合併到其他顏色裏的操作會顯得格外複雜。
舉個例子、
比如圖層是
0層 —50%—
1層 — 50%—
現在要把兩個圖層調換順序，取得一樣的效果的話，我需要
1層 —25%— // ==50%*50%
0層 —67%— // == 50%/75%
所以如果有透明度的話處理起來會有問題。所以對於軟畫筆啊啥的，會有問題。感覺要是真想要避免這種問題的話，可能需要重新確定結構了、
接下來分別介紹那三步
1. 選出在workspace上的繪製內容
我也想不到這一步會很麻煩……
如果在操作PS的話直接Ctrl加點擊那個圖層就行了。
然後翻遍了文檔，artlayer沒有返回選區的函數。
於是開始找有沒有取artlayer的色彩範圍的函數……
最後的解決方法又是迷之智障了——
這樣，然後取channel返回選區。
這也是爲什麼每次我點一下那個插件PS的取色板會抖，而且處理還非常慢了（捂臉）。
2. 把下面圖層中被覆蓋的內容清空
這個就selection.clear()一個命令就行
3. 在下面的workspace按不同的顏色組成填充
理論上也就selection.fill()一個命令
由於之前講過的透明度的問題，如果本來我想呈現的是兩個圖層各50%的顏色的話，下面那個圖層實際的透明度是100%
0層 —50%—
1層 — 100%—
這樣呈現的是0層50%，1層50%的效果
0層 —50%—
1層 — 50%—
這樣由於混合的效果（普通混合），下面一層實際顯示出來是25%
所以由於這個，需要進行一些預處理。
後面
第一個PS擴展，不枉我早年無知的時候玩過PS（？？？）
一開始想寫插件的，然後發現插件限制還蠻多的（而且看不懂例程），就寫了個擴展。
感覺最後效果一般吧——能交作業，但是遠遠沒到願意去用它的地步。很多地方還很粗糙。慢慢來吧。
哦然後最後引用我的傻兒子評價——
捨棄無用的取色功能，剩下有用的球。
這球真好玩.jpg
我覺得以上非常有道理可以考慮一下↑