论文回顾：Playful Palette: An Interactive Parametric Color Mixer for Artists

Playful Palette: An Interactive Parametric Color Mixer for Artists 发表于TOG 2017，这篇论文提出了一种新的调色板叫做：Playful Palette。跟之前的调色板比如 [Chang 2013] 基于聚类的调色板 和 [Tan 2017] 基于凸包的调色板不一样的是，之前的调色板基本只能对已有图像的颜色进行修改。而本文则真正意义上生成了可供画家使用的调色板，即可以生成多种颜色（颜料）的混合渐变颜色。

按惯例，先上一张teaser。（a）中圆圈内部展示的是当前使用的几种颜色生成的调色板，可以看出有光滑的渐变效果。圆圈上是历史颜色记录，以及圆圈外部每种颜色对应的那个时刻的调色板，这主要用于回退到某一步或修改颜色。（b）在调色板中选择颜色绘画；（c）绘画效果，（d）通过调色板历史记录修改图像颜色。

论文指出Color Picker的研究没有得到研究重视，当前的颜色用户接口已经无法满足数字绘画的需求。论文首先针对数字绘画存在的问题进行了初步的用户调研。调研标明现有Color Picker最显著的缺点就是无法混合多种颜色，而真实绘画经常需要将多种颜料调制出新的颜色以满足需求。因此，本文最重要的贡献就是提出一种新的调色板可以混合多种颜色并生成光滑的颜色渐变效果。

一、Playful Palette原理

该调色板由多个圆形的颜色水滴（Blob）生成，每个颜色水滴可以表示为一个元祖：$B_i=(r_i,g_i,b_i,x_i,y_i,r_i)$, 其中$c_i=(r_i,g_i,b_i)$是这个水滴的颜色，$p_i=(x_i,y_i)$ 和 $r_i$ 分别这个水滴的圆心和半径。

给定一个矩形或圆形包围盒（总之包住所有颜色水滴）， 以及内部的多个颜色水滴 B { B 1 , B 2 , . . . B k } B\{B_1,B_2,...B_k\} B{B1​,B2​,...Bk​}, 我们要得到这些水滴生成的调色板。直观上，每个颜色水滴对应一个圆形区域，包围盒中的像素跟哪个水滴的位置与越接近，颜色也就越接近。为此，我们遍历包围盒中的每个位置并计算它们的颜色。

包围盒中某个像素 $p$ 受到水滴 $B_i$的影响权重可以表示为：
M i ( p ) = F ( B i , p ) = { 1 − 4 d 6 9 b 6 + 17 d 4 9 b 4 − 22 d 2 9 b 2 d ≤ b 0  else  (1) M_i(p) = F(B_i,{p})=\left\{

\right.\tag1 Mi​(p)=F(Bi​,p)={1−9b64d6​+9b417d4​−9b222d2​0​d≤b else ​(1)

其中，$d$ 表示 $p$ 到 水滴 $B_i$ 的圆心 $(x_i,y_i)$ 的距离，$b$ 是一个调整参数这里可以取为半径即: $b=r_i$.

绘制调色板过程中，同一个像素受到多个水滴的权重之和 大于给定的阈值才绘制，否则为白色。
c ( p ) = { ∑ i M i ( p ) ⋅ c i ∑ i M i ( p ) ∑ i M i ( p ) > = T w h i t e  else  (2) c(p) = \left\{

\right. \tag2 c(p)={∑i​Mi​(p)∑i​Mi​(p)⋅ci​​white​∑i​Mi​(p)>=T else ​(2)
这里 $T=0.6$.

其实，水滴生成的调色板的边界就是 公式(2) 对应的 $c(p)=T$ 的等值线，博主 Birdy_C 画了一张示意图展示了两个水滴的合成效果。

需要注意的是，修改公式（1）中 $b$ 的值可以改变每个水滴的影响范围。我们令 $z=d/b$, 那么上式当 $d<b$ 成立时，$M_i(p)$可以写为：

$$M_i(p)=1-\frac{4}{9}{x}^6+\frac{17}{9}{x}^4-\frac{22}{9}{x}^2$$
这个函数的图像如下所示：可以看出干函数在0,1之间单调递减，也就是说我们当我们改变增大 $b$, $x=d/b$ 变小，从而$M_i(p)$ 变大，因此水滴影响范围变大。

论文中给出的多个水滴生成得调色板效果：

二、简单实现

#include  <vector> 
#include <opencv2/opencv.hpp>
using namespace std;
using namespace cv;

void DrawPlayfulPalette() {
	vector<Vec6d> blobs; //r,g,b,x,y
	blobs.push_back(Vec6d(255, 0, 0, 120, 45));
	blobs.push_back(Vec6d(0, 0, 255, 120, 135));
	blobs.push_back(Vec6d(0, 255, 0, 50, 90));
	
	int rows = 200, cols = 200;
	cv::Mat img = cv::Mat(rows, cols, CV_8UC3, Scalar(255, 255, 255));

	for (int r = 0; r < rows; r++) {
		uchar* data = img.ptr<uchar>(r);
		for (int c = 0; c < cols; c++) {
			Vec2d pix_pos(r , c);

			Vec3d sum_color(0, 0, 0);
			Vec3i res_color(0, 0, 0);
			double sum_w = 0;

			for (int i = 0; i < blobs.size(); i++) {
				Vec3d blob_color(blobs[i][0], blobs[i][1], blobs[i][2]);
				Vec2d blob_pos(blobs[i][3], blobs[i][4]);

				double d2 = (pix_pos - blob_pos).dot(pix_pos - blob_pos);
				double b2 = 70 * 70;
				double db = d2 / b2;

				double w = d2  <= b2 ? 1 - 4 / 9 * pow(db, 3) + 17 / 9 * pow(db, 2) - 22 / 9 * db : 0;
				sum_w += w;
				sum_color += w * blob_color;
			}
			res_color = sum_w < 0.6 ? Vec3d(255, 255, 255): sum_color / sum_w;
			data[3 * c + 0] = res_color[2];
			data[3 * c + 1] = res_color[1];
			data[3 * c + 2] = res_color[0];
		}
	}
	imshow("PlayfulPalette", img);
	waitKey();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

绘制了几个简单的调色板效果：

文章的其他部分主要讲如何保持历史记录，我不太感兴趣，因此就不再赘述。