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

我覺得以上非常有道理可以考慮一下↑