oFサンプル解読 color

openFrameworksのサンプルを少しずつ読み解くシリーズ

examples/graphics/color

HSBカラーを使った色の表現法、oFmaps()を使った写像、経過秒数を色に変換するプロセスなどが勉強になりました。
コード内に解説があるのでここでの解説は割愛します。
元々付いていたコメントの和訳と、自分で追加したコメントのせいで大分コメントだらけになっていますがご愛嬌...
気になったのが、mouseXPercentとmouseYPercentの記述。
どこで使われているか分からなかったので試しに削除してみたら問題なく動きました。
消し忘れかな・・・？

#pragma once

#include "ofMain.h"

class testApp : public ofBaseApp{
 
 public:
  
  void setup();
  void update();
  void draw();
  
  void keyPressed(int key);
  void keyReleased(int key);
  void mouseMoved(int x, int y );
  void mouseDragged(int x, int y, int button);
  void mousePressed(int x, int y, int button);
  void mouseReleased(int x, int y, int button);
  void windowResized(int w, int h);
  void dragEvent(ofDragInfo dragInfo);
  void gotMessage(ofMessage msg);

    
  float mouseXPercent, mouseYPercent;
};
 

#include "testApp.h"


//--------------------------------------------------------------
void testApp::setup(){
 ofBackground(0,0,0);
    ofEnableSmoothing();
    ofEnableAlphaBlending();
 ofSetWindowTitle("color example");
    
    ofSetRectMode(OF_RECTMODE_CENTER);
    
 ofSetFrameRate(60); // ここではフレームレートを60に設定。
                        //vertical syncがオフになっていたら、もっと早く設定できる。
    
    mouseXPercent = 0.5f;//fはfloatのf
    mouseYPercent = 0.5f;
}

//--------------------------------------------------------------
void testApp::update(){
}

//--------------------------------------------------------------
void testApp::draw(){
    
    //ここでは、よく知られたRGBではなく、HSB（色相、彩度、明度）を使用して色を
    //設定します。
    //HGBカラーは、「彩度」「明度」「色相」を利用するため、おそらく、
    //より自然な方法で色を指定することができます。
    
    //色相(hue)は赤、紫、青、緑、黄、赤と、虹色に循環する色相環を表します。
    //彩度(saturation)は色の強さを表します。
    //彩度が高くなると色が鮮やかになり、低くなると鈍い色になります。
    //明度(brightness)は色の明るさを表します。
    //数値が低いほど色が暗くなり、高いほど明るくなります。
    //明度が0になると、色相や彩度が何であろうと黒になります。
    //ofColor内のすべての値は0~255として指定されます。
    //例えば、強く、明るいオレンジ色を指定するためには、まず色相を設定し
    //（ 15から30の数、 15は赤に近く、 30は黄色に近い）、次に彩度(180~255)
    //そして明度(180~255)を指定します。
    
    //無彩色を作るには、彩度を０に設定し、明度の数値を調整します。
    //色相の色は何色でも大丈夫です。
    
    //ここでは、x軸で彩度、y軸で明度が変化する5x5pixの正方形のグリッドを描写します
    //画面全体に同じ色相が適用され、時間の経過とともに変化します。
    //色相の０と２５５を繋げるためにfmodfを使用しています。
    
    //ofGetElapsedTimef(): 起動してからの経過秒数を取得
    //fmodf(float x, float y): x/yの浮動小数点剰余を計算
    float hue = fmodf(ofGetElapsedTimef()*10,255);
    
    int step = 5;
    
    // y方向のstep
    for ( int i = 0; i < ofGetWidth(); i+=step )
    {
        // x方向のstep
        for ( int j=0; j < ofGetHeight(); j+=step )
        {
            //hue値は時間とともに変化
            //彩度はx軸方向(i)に変化
            //明度はy軸方向(j)に変化
            
            ofColor c;
            // iとjの値を、０〜２５５間にマッピング
            //ofMaps(x.a.b.c.d): a~b間でのxの値を、c~d間に写像する。　a:b:x=c:d:f(x)
            c.setHsb( hue, ofMap(i, 0,ofGetWidth(), 0,255), ofMap(j, ofGetHeight(),0, 0,255 ) );
            
            // 色を設定して正方形を描く
            ofSetColor( c );
            ofRect( i, j, step-1, step-1 );
        }
    }
    //次に、マウス位置の色を表示するより大きな正方形を描く
    //i,jの代わりにmouseX,mouseYを用いて、グリッドを描いた時と同じ方法でマウス部分の色を算出する。
    //ここでは、一行でHBSカラーを設定できるofColor::fromHsbを利用する。
    ofColor color = ofColor::fromHsb(hue, 
                                     ofMap( mouseX, 0,ofGetWidth(), 0,255 ), 
                                     ofMap( mouseY, ofGetHeight(),0, 0,255 ) );
    ofSetColor( color );
    ofFill();//無くても変化なし
    ofRect( mouseX, mouseY, 100, 100 );
    
    //今描いた正方形に白い枠をつける
    ofNoFill();
    ofSetHexColor(0xFFFFFF);
    ofRect( mouseX, mouseY, 100, 100 );
    ofFill();
    
    //最後に、マウス位置のHSB,RGBの値を表示
    ofSetHexColor(0xFFFFFF);
    
    //ofDrawBitmapString(記入内容, float x, float y): Bitmap文字を表示
    ofDrawBitmapString("HSB: "+ofToString(int(hue))+
                       " "+ofToString(int(color.getSaturation()))+
                       " "+ofToString(int(color.getBrightness())),
                       10, ofGetHeight()-13 );
    ofDrawBitmapString("RGB: "+ofToString(int(color.r))+
                       " "+ofToString(int(color.g))+
                       " "+ofToString(int(color.b)), 
                       200, ofGetHeight()-13 );
    
}


//--------------------------------------------------------------
void testApp::keyPressed  (int key){
}

//--------------------------------------------------------------
void testApp::keyReleased  (int key){

}

//--------------------------------------------------------------
void testApp::mouseMoved(int x, int y ){
    
    mouseXPercent = float(x) / ofGetWidth();
    mouseYPercent = float(y) / ofGetHeight();
}

//--------------------------------------------------------------
void testApp::mouseDragged(int x, int y, int button){
}

//--------------------------------------------------------------
void testApp::mousePressed(int x, int y, int button){

}

//--------------------------------------------------------------
void testApp::mouseReleased(int x, int y, int button){

}

//--------------------------------------------------------------
void testApp::windowResized(int w, int h){

}

//--------------------------------------------------------------
void testApp::gotMessage(ofMessage msg){

}

//--------------------------------------------------------------
void testApp::dragEvent(ofDragInfo dragInfo){ 

}