/* start */
(sai的颜色选择器)
作业小产物，仿照sai的hsv颜色选取做的颜色选取器：
这里做的是一个基于hsb(hsv)色彩模型的选择器，rgb模型我们都熟悉，每个像素点的颜色用三个值Red、Green、Blue来表示其红色通道强度、绿色通道强度以及蓝色通道强度。
HSB模型即：Hues (色调)， (饱和度)， (亮度) 来表示每个像素点的颜色。
视觉上看：
色调决定颜色是偏红一些还是偏绿或者蓝一些；
饱和度决定颜色鲜艳程度,就是涂了口红和没涂口红的区别
亮度决定了颜色是偏白还是偏黑
问：如何做一个功能完备的颜色选取器？
首先，弄清一个颜色选择器都需要什么 (hsv模型) :
1.色调环；
2.饱和度和亮度选择方块；
3.显示当前选择的颜色；
4.标注当前选择的色调位置。
此外，你还可构想额外的功能，如：输入rgb数值进行颜色选取；对于当前选定的颜色给出一系列搭配色彩等
四个功能实现：
1.色调环：
首先弄清色调环的色彩变化规律，我们再看一遍图：
只看外圈色调环，具体什么值我们肯定不能一下子说出来，几个特征颜色的rgb值：
红(255，0，0) 黄(255，255，0) 绿(0js选择器，255，0)
青(0，255，255) 蓝(0，0，255) 紫(255，0，255)
都是显而易见的
我们便大概知道变化规律：
从红色到黄色区段, Red保持不变, Green从0逐增到255
从黄色到绿色区段, Green保持不变, Red从255逐减到0
从绿色到青色的区段, 以此类推……
这里发现是色调环RGB值的变化规律，其实也就告诉你：原来HSB模型的色调就是这么一回事，只不过hsb模型的色调h一般区间是（0~360），即圆环360度方向对应着不同色彩
所以我们去绘制一个圆环，每次绘制1/6圆环（一共六个区段），得到完整的色调环。色调环因为颜色逐渐变化，我们选择使用线按照垂直于圆心的方向一条一条填充出一个圆环，下面以一个区段为例：
//红色到黄色区段的绘制：
for (var i = 0; i < 60; i++) {
(255,i * 255 / 60, 0);
//红色强度保持不变,绿色强度逐渐增加
(i* PI / 180);
//()旋转了坐标系,便不必计算画线坐标
line(0,r1, 0, r2);
如此循环六次得到色调环,得到色调环后
使用get(,)获得鼠标点击位置像素颜色
不使用RGB，也可以直接使用p5.js的
(HSB/RGB,[MAX])定义使用的HSB颜色模型：
for (var i = 0; i < 360; i++){
(HSB,360)；
(i , 360 , 360 );
(i* PI / 180);
line(0,r1, 0, r2);
2.饱和度和亮度选择方块
在选取一个色调后，我们要对其饱和度和亮度进行调整
所以应该是在鼠标点击色调环选择出当前色调之后，会显示当前色调饱和度和亮度选择方块
再用get(,)获得鼠标点击位置的像素颜色
如何实现饱和度和亮度的调整：
观察上图的左上点和右下点，不难看出，在横坐标减小的时候，亮度升高 (越来越白)，在纵坐标增加的时候，饱和度降低 (颜色越来越黯淡) 所以这里使用两层嵌套循环：
for(vari = 0 ;i
for(var j = 0;j
(HSB,255);
(, 255 – j , 255 –i);
point(i, j);
}} //得到饱和度&亮度调整模块
直接使用hsb色彩模型就会很简单，如果不了解hsb而使用rgb的话，还需要构造一个();先将rgb转换成hsb再绘制（代码文末链接有）
3.显示当前选择的颜色
在前两步中，颜色的选取都是鼠标点击事件响应的，只要在每次鼠标点击之后绘制一个矩形，其填充颜色使用获取的当前颜色(定义为全局变量color)：
() {
color =get(, );
fill(color);
();
rect( x, y , width , );
4. 标注当前选择的色调位置
(1) 先构造函数 (x,y),绘制小的圆形标注样式
(2) 仍旧跟颜色的更新联系起来,每次鼠标点击更新颜色后,
都将这个点击位置存到的参数x和y中
(3) 但注意js选择器，我们只需要绘制一个小的圆形标注样式
就是最新的那一个——当前的色调位置
(4) 所以我们给()一个draw方法
当调用(x,y ).draw的时候再进行绘制
而在鼠标点击更新颜色的时仅将当前的(x,y)添加到一个数组中：
//添加一个颜色选择点信息
(,new (, ));
//然后在p5.js的()中
每次只绘制最新的小的圆形标注样式。
/* */
/* 文件中还对最近使用的颜色进行了记录 */
/* p5.js是一个js库，注意引用*/
RGB转化为HSB思路：
1. 把RGB值用（0, 1）表示
2. 找出RGB中的最大值
3. 计算L(明度)：L=(max(R,G,B) + min(R,G,B))/2
4. 如果最大和最小的颜色值相同，即表示灰色，那么S(饱和度)定义为0，而H(色调)未定义并在程序中通常写成0
5. 否则L(明度)计算S(饱和度)：
If L
S=(max(R,G,B) -min(R,G,B))/(max(R,G,B) + min(R,G,B))
If L>=0.5,
S=(max(R,G,B)-min(R,G,B))/(2.0-：-min(R,G,B))
6. 计算H(色调)：
If R=max(R,G,B)
H=(G-B)/(max(R,G,B)-min(R,G,B))
If G=max(R,G,B),
H=2.0+(B-R)/(max(R,G,B)-min(R,G,B))
If B=max(R,G,B),
H=4.0+(R-G)/(max(R,G,B)-min(R,G,B))
H=H*60.0
if(H
H+=360 */
名称： .rar
密码： 1k7z