開発環境
言語
- 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形式に整形しコンソールに出力します。
コード
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 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のデバッグ画面にコンーソルの出力内容を貼り付け

ライト点灯
