開発環境
言語
- Processing 3.1.1
eclipseを使用し、core.jarをインポートした環境でコーディングしているため、ProcessingのIDEでは実行できません。
参考URL
http://hiroyukitsuda.com/archives/1721
- java 1.8.0_91
Processingで使用しているバージョン
照明
- Philips Hue スターターセット v2
OS
- macOS sierra 10.12.2
HSBカラーモデルのパレットを作成
色のスペクトルを円形に配置した色相環を作成します。
扇形の図形を配置して作ります。それぞれの頂点は、対応する角度のコサインとサインから求めています。
また、マウスでクリックした色を取得し、Phillips Hue APIに対応するJSON形式に整形しコンソールに出力します。
コード
package colorPalette;
import org.json.JSONObject;
import processing.core.PApplet;
public class HSBcolorPalette extends PApplet{
//半径の長さ
int radius = 300;
//角度の増加量
int segmentCount = 360;
//HSBカラーの彩度
int saturation = 254;
//HSBカラーの明度
int brightness = 254;
//lightナンバー
int lightnum = 1;
//heuAPI連携用のJSONオブジェクト
JSONObject jsonObject;
public void settings() {
size(800, 800);
}
public void setup() {
noStroke();
//背景色に黒色を指定
background(0);
}
public void draw() {
//カラーモードをHSBモードで指定
//hue:色相を360°円周の範囲
//Saturation:hueの彩度の範囲
//brightness:hueの輝度の範囲
colorMode(HSB,360,254,254);
//角度の増加量
float angleStep = 360/segmentCount;
beginShape(TRIANGLE_FAN);
//頂点を中心に設定
vertex(width/2,height/2);
for(float angle=0;angle<=360;angle+=angleStep){
float vx = width/2 + cos(radians(angle))*radius;
float vy = height/2 + sin(radians(angle))*radius;
vertex(vx,vy);
//angleの値を色相に設定
fill(angle,saturation,brightness);
}
endShape();
}
public void mousePressed() {
//色情報を配列pixelsとして読み込む
loadPixels();
//マウスの座標位置を取得
int x = constrain(mouseX, 0, width-1);
int y = constrain(mouseY, 0, height-1);
//マウスクリックした位置の色を取得
int color = pixels[y*width + x];
//HSBカラーの形式に変換
//色相をhueの色相範囲にマッピング
int hue = (int)map(hue(color), 0, 360, 0, 65535);
//彩度を設定
int saturation = (int)saturation(color);
//輝度を設定
int brightness = (int)brightness(color);
//JSON形式に整形
hueLight(lightnum, true, hue, saturation, brightness);
//背景色をマウスクリックした色に設定
background(color);
}
//JSONのレイアウトに整形
public void hueLight(int lightnum,boolean on,int hue,int saturation,int brightness) {
jsonObject = new JSONObject();
jsonObject.put("on", on);
jsonObject.put("hue", hue);
jsonObject.put("sat", saturation);
jsonObject.put("bri", brightness);
println(jsonObject.toString());
}
public void keyPressed() {
//輝度を変更
if(keyCode == RIGHT) brightness += 10;
if(keyCode == LEFT) brightness -= 10;
brightness = max(brightness,0);
brightness = min(brightness,254);
//彩度を変更
if(keyCode == UP) saturation += 10;
if(keyCode == DOWN) saturation -= 10;
saturation = max(saturation,0);
saturation = min(saturation,254);
//角度の増加量を変更
if(key == 'a') segmentCount += 10;
if(key == 'd') segmentCount -= 10;
segmentCount = min(segmentCount,360);
segmentCount = max(segmentCount,1);
//制御するlightを設定
if(key == '1') lightnum = 1;
if(key == '2') lightnum = 2;
if(key == '3') lightnum = 3;
}
public static void main(String[] args) {
PApplet.main(HSBcolorPalette.class.getName());
}
}
結果
起動時
マウスクリック[青色をクリック]
コンソール出力内容
{"sat":254,"bri":254,"hue":44032,"on":true}
hueのデバッグ画面にコンーソルの出力内容を貼り付け
ライト点灯