MacのRetinaディスプレイに合わせてopenFrameworksの画面を表示させる方法

しばらく解決方法が見つからなかったことがようやく解決できたので、忘備録も兼ねて共有します。

普段Mac Book Pro Retinaで作業しているのですが、openFrameworksの画面表示がRetinaの解像度に合っていないため、ビルドした時に微妙に画像がガタガタになってしまう・・・という現象が起きてしまいます。
Xcodeの画面設定を直しても、oFのウィンドウが対応しないため、画面の枠に対して1/4サイズで表示されてしまうのです。

それを解決するためのPRが丁度一週間前に出たようで、試してみたら見事に直りました。
ありがとうテオさん！！

まず、of_v0.8.0_osx_release/libs/openFrameworks/appディレクトリの
ofAppGLFWWindow.cpp
ofAppGLFWWindow.h
のコードを以下のページの通りに書き換えます。
https://github.com/openframeworks/openFrameworks/pull/2801/files
プレビューリリースなので、念のためコピーをとってから書き換えます。
マーカーが引いてある部分の、"-"の行を削除して、"+"の行を追加。

あとは、画面解像度をRetinaに合わせたいアプリケーションのフォルダのopenFrameworks-Info.plistを開き、

何も無い部分で右クリックしてAdd Rowをクリック
 

High Resolution Capableを選択してvalueをYesに

これを閉じてからビルドすると、Retinaディスプレイに合った画面サイズになります。ちーっちゃい！！！※13インチ

フォーラムの以下のページを参考にしました
http://forum.openframeworks.cc/t/high-resolution-capable-osx-causes-really-small-window-inside-opengl-window/14566

openFrameworksで描く色々な曲線

今回はopenFrameworksで、数学の関数を利用した曲線を色々と描いてみたいと思います。

まずはsinとcosを使った円の描写

//--------------------------------------------------------------
void testApp::setup(){
    ofBackground(0, 0, 0);
    

}

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

}

//--------------------------------------------------------------
void testApp::draw(){
    
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2);//原点を画面の中心に
    
    //方眼紙
    int lines=ofGetWidth()/2/20+1;
    
        ofSetColor(70, 70, 70);
    for (int i=0; i < lines; i++) {
        ofLine(20*i, -1*ofGetHeight()/2, 20*i, ofGetHeight()/2);
        ofLine(-20*i, -1*ofGetHeight()/2, -20*i, ofGetHeight()/2);
        ofLine(-1*ofGetWidth()/2, 20*i, ofGetWidth()/2, 20*i);
        ofLine(-1*ofGetWidth()/2, -20*i, ofGetWidth()/2, -20*i);
    }
    
    ofSetColor(100, 100, 100);
    ofLine(0, -1*ofGetHeight()/2, 0, ofGetHeight()/2);//中心線
    ofLine(-1*ofGetWidth()/2, 0, ofGetWidth()/2, 0);
    
    //式
    ofSetColor(124, 181, 255);
    float radius=200;
    for (int i=0; i < 1000; i++) {
        float x=cos(i)*radius;
        float y=sin(i)*radius;
        ofCircle(x, y, 1);
    }



}

螺旋

#include "testApp.h"

//--------------------------------------------------------------
void testApp::setup(){
    ofBackground(0, 0, 0);
    

}

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

}

//--------------------------------------------------------------
void testApp::draw(){
    
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2);//原点を画面の中心に
    
    //方眼紙
    int lines=ofGetWidth()/2/20+1;
    
        ofSetColor(70, 70, 70);
    for (int i=0; i < lines; i++) {
        ofLine(20*i, -1*ofGetHeight()/2, 20*i, ofGetHeight()/2);
        ofLine(-20*i, -1*ofGetHeight()/2, -20*i, ofGetHeight()/2);
        ofLine(-1*ofGetWidth()/2, 20*i, ofGetWidth()/2, 20*i);
        ofLine(-1*ofGetWidth()/2, -20*i, ofGetWidth()/2, -20*i);
    }
    
    ofSetColor(100, 100, 100);
    ofLine(0, -1*ofGetHeight()/2, 0, ofGetHeight()/2);//中心線
    ofLine(-1*ofGetWidth()/2, 0, ofGetWidth()/2, 0);
    
    //式
    ofSetColor(124, 181, 255);
    for (int i=0; i < 10000; i++) {
        float radius=10+0.02*i;//螺旋の間隔調整
        float x=cos(i*0.01)*radius;
        float y=sin(i*0.01)*radius;
        ofCircle(x, y, 1);
    }



}


インボリュート曲線

#include "testApp.h"

//--------------------------------------------------------------
void testApp::setup(){
    ofBackground(0, 0, 0);
    

}

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

}

//--------------------------------------------------------------
void testApp::draw(){
    
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2);//原点を画面の中心に
    
    //方眼紙
    int lines=ofGetWidth()/2/20+1;
    
        ofSetColor(70, 70, 70);
    for (int i=0; i < lines; i++) {
        ofLine(20*i, -1*ofGetHeight()/2, 20*i, ofGetHeight()/2);
        ofLine(-20*i, -1*ofGetHeight()/2, -20*i, ofGetHeight()/2);
        ofLine(-1*ofGetWidth()/2, 20*i, ofGetWidth()/2, 20*i);
        ofLine(-1*ofGetWidth()/2, -20*i, ofGetWidth()/2, -20*i);
    }
    
    ofSetColor(100, 100, 100);
    ofLine(0, -1*ofGetHeight()/2, 0, ofGetHeight()/2);//中心線
    ofLine(-1*ofGetWidth()/2, 0, ofGetWidth()/2, 0);
    
    //式
    float x=0;
    float y=0;
    ofSetColor(124, 181, 255);
    for (int i=0; i < 10000; i++) {
        float sita=fmodf(i,360);
        float size=1;
        x=size*(sita*cos(sita));
        y=size*(sita*sin(sita));
        ofCircle(x, y, 5);
    }
}

バラ曲線

void testApp::draw(){
    
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2);//原点を画面の中心に
    
    //方眼紙
    int lines=ofGetWidth()/2/20+1;
    
        ofSetColor(70, 70, 70);
    for (int i=0; i < lines; i++) {
        ofLine(20*i, -1*ofGetHeight()/2, 20*i, ofGetHeight()/2);
        ofLine(-20*i, -1*ofGetHeight()/2, -20*i, ofGetHeight()/2);
        ofLine(-1*ofGetWidth()/2, 20*i, ofGetWidth()/2, 20*i);
        ofLine(-1*ofGetWidth()/2, -20*i, ofGetWidth()/2, -20*i);
    }
    
    ofSetColor(100, 100, 100);
    ofLine(0, -1*ofGetHeight()/2, 0, ofGetHeight()/2);//中心線
    ofLine(-1*ofGetWidth()/2, 0, ofGetWidth()/2, 0);
    
    //式
    float x=0;
    float y=0;
    ofSetColor(124, 181, 255, 100);
    for (int i=0; i < 36000; i++) {
        float sita=fmodf(i*0.01,360);//点の数
        int d=7;
        int n=8;
        float size=300*sin(n*sita);
        x=size*sin(d*sita);
        y=size*cos(d*sita);
        ofCircle(x, y, 1);
    }
    
    //float sita=fmodf(i,360);
}

dとnに入れる値を変更する事で、花びらの形を変える事が出来ます
参考： http://ja.wikipedia.org/wiki/%E3%83%90%E3%83%A9%E6%9B%B2%E7%B7%9A

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");
        }
 }


}

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

}

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; //１フレームごとに値を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;
    }
} 

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ディレクトリに保存されるはずです。簡単！