Polycode

[Polycode] コードで作成した画像を表示する

[`evernote` not found]
LINEで送る
Pocket

さて、今回はちょっと飛躍してコード上で各ピクセルのデータを作成して表示する方法をご紹介します。

通常であれば、Imageのコンストラクタにファイル名を追加すれば指定された画像が表示されるのですが、例えばKinectの映像や動画などを表示させたい場合はファイル名の指定ではできませんのでこの方法を使います。

早速サンプルコード。これをPolycodeTemplateAppクラスのコンストラクタに記述して下さい。
このサンプルでは、640x480pxでRGBAの紫の画像を表示させます。

	// Write your code here!
    Screen* screen = new Screen();
    // 表示させる画像のピクセルデータを作成します。
    char* pixels = (char*)malloc(640*480*4*sizeof(char));
    for(int y = 0; y < 480; y++)
    {
        for(int x = 0; x < 640; x++)
        {
            int index = (x + y * 640) * 4;
            pixels[index] = 255;
            pixels[index+1] = 0;
            pixels[index+2] = 255;
            pixels[index+3] = 255;
        }
    }
    
    Image* image = new Image(pixels, 640, 480);
    
    ScreenImage* screenImage = new ScreenImage(image);
    screenImage->setPosition(0, 0, 0);
    screen->addChild(screenImage);
    free(pixels);

Imageのコンストラクタの引数には、charのポインタを設定させる事ができます。
この場合、種類は[char型の画像データ, 幅, 高さ] を指定します。

    Image* image = new Image(pixels, 640, 480);

後の流れは通常の画像表示と変わりません。

で、以下の部分は640x480pxで、RGBAの紫の画像データを生成しています。
この流れは画像にエフェクトをかけたりする場合(※Shaderの場合はまた別の方法ですけどね)や画像のデータを解析する時に使ったりするので覚えておくと良いです。

    char* pixels = (char*)malloc(640*480*4*sizeof(char));
    for(int y = 0; y < 480; y++)
    {
        for(int x = 0; x < 640; x++)
        {
            int index = (x + y * 640) * 4;
            pixels[index] = 255;       // R
            pixels[index+1] = 0;      // G
            pixels[index+2] = 255;  // B
            pixels[index+3] = 255;  // A
        }
    }

この処理を延々と繰り返す事で画像をリアルタイムに変化させる事が可能になりました。
次回は、OpenNIで拾ったデータを表示させてみましょう。

Leave a Reply

Your email address will not be published.

CAPTCHA