この体験授業では、iPadのカメラ機能を利用して、撮影した写真を加工する実習を行います。
カメラ
撮影してみる
まず、xCodeのプロジェクトを実行してみます。
普通にカメラが起動して、写真を撮る事ができます。
フレームの表示
このプログラムは最初からフレームが表示されていますが、まずは自分でフレームを選んでみましょう。階層がわかりにくいですが、デスクトップから、
of_v0.8.3_ios_release > apps > myApps > myImagePickerStart150720_2 > bin > data > frame
を辿っていくといくつかフレームのパターンがあるのs、その番号を覚えてください。
ofApp.mmの13行目前後に以下の記載があるので、「frame1.png」を好きな番号のフレームに変えてください。
1 | frame1.loadImage("frame/frame1.png"); |
そして、xCodeの左上のRunボタンを押してください。プログラムのデータがiPadに転送され、アプリが起動します。
どうでしょうか。写真を撮影して「Use Photo」ボタンを押すと、写真と一緒にフレームも表示されます。
オブジェクトの表示
同じように、以下のフォルダからオブジェクトとデコレーションを探してください。
of_v0.8.3_ios_release > apps > myApps > myImagePickerStart150720_2 > bin > data > object もしくは deco
そして、これらを描画しますが、まずはx座標とy座標という位置を表示するためのルールを知る必要があります。
みなさんが今まで勉強して来た数学の座標と違い、コンピュータの場合は一般的に左上が起点になります。ですので、特にy軸方向が上から下に向かって数値が増えていくということを覚えておきましょう。
オブジェクトとデコレーションの位置を変えてみましょう。
244行目前後に以下の表記があります。この最初の二つの数字がx座標とy座標です。
1 2 3 | object1.draw(400, 400, object1.getWidth()*1.0, object1.getHeight()*1.0); deco1.draw(0, 100, deco1.getWidth()*1.0, deco1.getHeight()*1.0); frame1.draw(0, 0); |
上記のコードでは、deco1のx, y座標と大きさも決めています。
例えば大きさを２分の1にしたければ以下のようになります。
1 | deco1.draw(0, 100, deco1.getWidth()*0.5, deco1.getHeight()*0.5); |
パーツは画像なので、大きくすると画質が下がるので気をつけましょう。一般的には縮小したほうが見た目は綺麗になります。
撮影画像にエフェクトをかけてみる
次に、撮影画像の色味を変えてみましょう。
次に、update()の中の、effect1の部分を以下のように書き換えてみます。
1 2 3 4 5 | //（色の入れ替え） newR = g; newG = b; newB = r; |
モニタの色は、red（赤）、green（緑）、blue（青）の順番で表示されているのですが、この順番を変えてみます。
本来赤の部分が緑に。本来緑の部分が青に。本来青の部分が赤に変換されます。かなり色が変化したのが分かるのではないかと思います。これを元にして色々組み合わせを変えてみましょう。
このエフェクトは、明るさとコントラストを調整します。
1 2 3 4 5 6 | float brightness = 50; float contrast = 2.5; newR = contrast*(r - 128) + 128 + brightness; newG = contrast*(g - 128) + 128 + brightness; newB = contrast*(b - 128) + 128 + brightness; |
このエフェクトは、赤を強調します（緑と青を引き算する）。
1 2 3 | newR = r; newG = g - 100; //緑を引く newB = b - 100; //青を引く |
このエフェクトは、色をグレーにします。
1 2 3 | newR = (r + g + b) / 3; newG = (r + g + b) / 3; newB = (r + g + b) / 3; |
このエフェクトは、完全に色を反転させます。
1 2 3 | newR = 255 - r; newG = 255 - g; newB = 255 - b; |
このエフェクトは、色をセピア調にします。
1 2 3 | newR = 255 - r/255*240; newG = 255 - g/255*200; newB = 255 - b/255*145; |
このエフェクトは白と黒の2階調に変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 | int brightness = (r + g + b)/3; if(brightness < 127){ newR = 0; //赤 newG = 0; //緑 newB = 0; //青 }else if(brightness >=127){ newR = 255; //赤 newG = 255; //緑 newB = 255; //青 } |
このエフェクトは3階調に変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | int brightness = (r + g + b)/3; if(brightness < 85){ newR = 0; //赤 newG = 0; //緑 newB = 0; //青 }else if(brightness >=85 && brightness < 170){ newR = 0; //赤 newG = 255; //緑 newB = 0; //青 }else if(brightness >= 170){ newR = 255; //赤 newG = 0; //緑 newB = 0; //青 } |
その他にも、形を変形するサンプルなどもありますので、試してみてください。
以下のサイトには、無料の画像がたくさんあります。好きな画像を選んで自由に画面を作ってみましょう。
http://gallery.yopriceville.com/Free-Clipart-Pictures