開発環境
言語
- 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のデバッグ画面にコンーソルの出力内容を貼り付け
ライト点灯
