ラベル openFrameworks の投稿を表示しています。 すべての投稿を表示
ラベル openFrameworks の投稿を表示しています。 すべての投稿を表示

2014年2月8日土曜日

oF フォントデータの読み込みとテキストの中央配置、スクロール



今回は、openFrameworksでTrue Type Fontデータを読み込んで中央に表示してみました。
ただ、それだけではつまらないので、
・文字が下から上にスクロールする
・スペースキーを押すとテキスト内容と色が変わる
という動作も盛り込んだため、文字を書いただけにしては若干コードが長くなっています。
なので、テキスト入力について重要な部分はハイライトしてあります。

テキスト内容が動的なのでsprintf関数を使いましたが、入力テキストが変化しない場合は
フォントのインスタンス名.getStringBoundingBox("表示する文字列", 先頭位置のx座標, 先頭位置のy座標)
で直接入力して大丈夫です。

テキストを中央に配置するために文字幅を取得するのがいくらやっても上手くいかず、苦戦したのですが、結局変なところに ; を間違えて打ち込んでいたのが原因でした。。。
なんというケアレスミス...気をつけよう...

さて、まずは画像の時と同じようにdataフォルダにフォントのttfファイルを入れます。

そして以下入力


#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);
  
    ofTrueTypeFont architxt; //True Type fontを取り扱うインスタンスを作成
    char text[255]; //テキストデータの変数の宣言
    int fontX; //フォントX軸の位置の宣言
    int fontY; //フォントY軸の位置の宣言
    int R;
    int G;
    int B;
    bool bSmooth;//キーを押したか判断用
    



    };

#include "testApp.h"

//--------------------------------------------------------------
void testApp::setup(){
    ofBackground(255, 255, 255);
    ofSetVerticalSync(true);//フレームレートの上限をモニタのリフレッシュレートに合わせる
    ofSetFrameRate(60);
    
    //フォントデータの読み込み
    architxt.loadFont("architxt.ttf",30);
    
    sprintf(text, "Good Morning");//配列textに文字データを代入
    
    float w = architxt.stringWidth(text); //テキストの幅を調べる
    float h = architxt.stringHeight(text);//テキストの高さを調べる
        
    //フォントの初期位置(中央配置)
    fontX = ofGetWidth()/2-w/2;
    fontY = ofGetHeight()/2-h/2;//下に配置
    
    //色の初期設定
    R=255;
    G=147;
    B=60;
}

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

    //フォントを左に移動
    fontY -= 1; //(fontY=fontY-1と同じ)
    
    float h = architxt.stringHeight(text);//テキストの高さを調べる
    
    //フォントの右端が画面上端からはみ出したら位置を下端に戻す
    if (fontY < -h) {
        fontY = ofGetHeight();
    }

}

//--------------------------------------------------------------
void testApp::draw(){
    

    ofSetColor(R, G, B);
    
    architxt.drawString(text, fontX, fontY);//(表示する文字列, 先頭位置のx座標, 先頭位置のy座標)
}

//--------------------------------------------------------------
void testApp::keyPressed(int key){
    if (key==32){//スペースのキーコード
  bSmooth = !bSmooth;
        if (bSmooth){
            R=12;
            G=38;
            B=124;
            ofSetColor(12, 38, 124);
            sprintf(text, "Good Night");
        }else{
            R=255;
            G=147;
            B=60;
            ofSetColor(255, 147, 60);
            sprintf(text, "Good Morning");
        }
 }


}


2014年2月6日木曜日

oFサンプル解読 blendingExample

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

examples/graphics/blendingExample



重なった色の混色方法のサンプルです。
ofEnableBlendMode() を利用し、()内に
OF_BLENDMODE_ALPHA
OF_BLENDMODE_ADD
OF_BLENDMODE_MULTIPLY
OF_BLENDMODE_SUBTRACT
OF_BLENDMODE_SCREEN
のいずれかを入れて指定します

一つ気になったのが、testApp.hで宣言したalphaとcounterをどこにも使っていない事。
私の見落としなのか、もしくはコードの使い回しの名残なのか...



#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);  
  
    
  ofBlendMode blendMode;
  ofImage rainbow; //イメージの宣言
  float           alpha;
  float    counter;
  ofTrueTypeFont  vagRounded; //Truetypefont"vagRounded"の宣言
  char eventString[255]; //文字型変数の配列evenStringの宣言
  char timeString[255]; //文字型変数の配列timeStringの宣言
};




#include "testApp.h"

//--------------------------------------------------------------
void testApp::setup(){  
    alpha = 0;
 counter = 0;

    sprintf(eventString, "Alpha"); //変数evenStringに文字データを代入

 vagRounded.loadFont("vag.ttf", 32); //("読み込むフォントのファイル名",サイズ)
 ofBackground(50,50,50);
    
    rainbow.allocate(256, 256, OF_IMAGE_COLOR_ALPHA);//画像rainbowに対する(幅の設定,高さの設定,混色方法の設定)
    rainbow.loadImage("rainbow.tiff");//画像の読み込み
}


//--------------------------------------------------------------
void testApp::update(){
 counter = counter + 0.033f;

    alpha += 0.01; //1フレームごとに値を0.01ずつ増やす
   
    alpha = (alpha > 1.0) ? 1.0 : alpha; //条件演算子 alphaの値が1.0を超えたらalpha=1.0
}

//--------------------------------------------------------------
void testApp::draw(){
 
    sprintf(timeString, "Press 1 - 5 to switch blend modes"); //変数timeStringに文字データを代入
 
    ofEnableBlendMode(OF_BLENDMODE_ALPHA); //混色法の設定
    
 ofSetHexColor(0xffffff);
 vagRounded.drawString(eventString, 98,198); //フォント名.drawString(記入内容, x位置, y位置)で文字入力
 
 ofSetColor(255,122,220);
 vagRounded.drawString(eventString, 100,200);
 
 ofSetHexColor(0xffffff);
 vagRounded.drawString(timeString, 98,98);
 
 ofSetColor(255,122,220);
 vagRounded.drawString(timeString, 100,100);

    ofSetColor(255, 255, 255,255);
    
    
    ofEnableBlendMode(blendMode); //混色の方法をblendModeの指定に合わせる
    
    rainbow.draw(mouseX, mouseY); //画像の位置をカーソルに合わせる
    
    ofDisableBlendMode(); //混色の無効化
}


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

    //スイッチ文
    switch (key) {
        case 49: //1のキーコード
            blendMode = OF_BLENDMODE_ALPHA; //混色をアルファに
            sprintf(eventString, "Alpha"); 
            break;
        case 50: //2のキーコード
            blendMode = OF_BLENDMODE_ADD; //混色を加算に
            sprintf(eventString, "Add"); 
            break;
        case 51: //3のキーコード
            blendMode = OF_BLENDMODE_MULTIPLY; //混色を乗算に
            sprintf(eventString, "Multiply"); 
            break;
        case 52: //4のキーコード
            blendMode = OF_BLENDMODE_SUBTRACT; //混色を減算に
            sprintf(eventString, "Subtract");
            break;
        case 53: //5のキーコード
            blendMode = OF_BLENDMODE_SCREEN; //混色をスクリーンに
            sprintf(eventString, "Screen"); 
            break;
        default:
            break;
    }
} 

2014年2月5日水曜日

oF 画像加工のための関数(未完)

画像加工で使える関数のメモ

unsigned char * pixels = 画像名.getPixels();
読み込んだ画像データのビットマップ情報を配列に格納する
ピクセルごとの、RGBまたはRGBAそれぞれの色の階調(0~255)を順番に配列に格納するメソッド。内容はpixels[]で参照できる。 

oF: 画像の読み込み

基礎的ですが、openFrameworksに画像を呼び込む方法と書き出す方法覚え書き。
まず、プロジェクトフォルダ内のbin/dataディレクトリに使用する画像を保存
そして以下入力


#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);
    
        ofImage image1;//読み込む画像の名前宣言
        ofImage grabbedimage;//書き出す画像の名前の宣言
    
    
};


#include "testApp.h"

//--------------------------------------------------------------
void testApp::setup(){
    ofBackground(0, 0, 0);
    ofEnableSmoothing();
    ofEnableAlphaBlending();
    ofEnableBlendMode(OF_BLENDMODE_ADD);
    image1.loadImage("shock.jpg");//画像をimage1として読み込む
    
}

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

//--------------------------------------------------------------
void testApp::draw(){
    ofSetColor(255, 255, 255);//画像の背景色の設定。これをいじることで表示彩度や色相が変わる。基本は白
    image1.draw(20,20);//読み込んだ画像データを画面に描写

}

//--------------------------------------------------------------
void testApp::keyPressed(int key){
    int width =image1.width;
    int height =image1.height;//画像の縦横幅を取得
    
    if(key =='x'){
        grabbedimage.grabScreen(20,20, width, height);//位置とサイズを指定して画面をキャプチャ
        grabbedimage.saveImage("grabbedimage.png");//キャプチャした画像をgrabbedimage.pngで保存
    }

}

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

}

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

}

//--------------------------------------------------------------
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){ 

}




これで、Xキーを押す事によって読み込んだ画像がgrabbedimage.pngとしてプロジェクトフォルダ内のbin/dataディレクトリに保存されるはずです。簡単!