Enviar pesquisa
Carregar
iTamabi 13 第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
•
4 gostaram
•
4,711 visualizações
Atsushi Tadokoro
Seguir
Educação
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 28
Baixar agora
Baixar para ler offline
Recomendados
iTamabi iPhoneアプリ実践開発講座2 - 時計アプリをつくる
iTamabi iPhoneアプリ実践開発講座2 - 時計アプリをつくる
Atsushi Tadokoro
openFrameworks iOS 入門
openFrameworks iOS 入門
Atsushi Tadokoro
iPhoneカメラアプリ開発入門(第1回)
iPhoneカメラアプリ開発入門(第1回)
Takashi Ohtsuka
iOSで動画からスクショを撮る方法
iOSで動画からスクショを撮る方法
Tomo Ita
あの言語で画像処理する ライブラリを作った件
あの言語で画像処理する ライブラリを作った件
Sakiyama Kei
Flashup 11
Flashup 11
Katsushi Suzuki
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
Atsushi Tadokoro
iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」
iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」
Toshio Ehara
Recomendados
iTamabi iPhoneアプリ実践開発講座2 - 時計アプリをつくる
iTamabi iPhoneアプリ実践開発講座2 - 時計アプリをつくる
Atsushi Tadokoro
openFrameworks iOS 入門
openFrameworks iOS 入門
Atsushi Tadokoro
iPhoneカメラアプリ開発入門(第1回)
iPhoneカメラアプリ開発入門(第1回)
Takashi Ohtsuka
iOSで動画からスクショを撮る方法
iOSで動画からスクショを撮る方法
Tomo Ita
あの言語で画像処理する ライブラリを作った件
あの言語で画像処理する ライブラリを作った件
Sakiyama Kei
Flashup 11
Flashup 11
Katsushi Suzuki
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
Atsushi Tadokoro
iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」
iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」
Toshio Ehara
Flashup 8
Flashup 8
Katsushi Suzuki
iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜
Yusuke SAITO
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
Takashi Yoshinaga
ARコンテンツ作成勉強会:Myoを用いたVRコンテンツ開発
ARコンテンツ作成勉強会:Myoを用いたVRコンテンツ開発
Takashi Yoshinaga
勉強会資料Out ofmemory
勉強会資料Out ofmemory
Nao Fujita
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
Takashi Yoshinaga
RoboVM
RoboVM
Satoshi Takami
3D touch for iOS
3D touch for iOS
toyship
Android Hacks - Hack30
Android Hacks - Hack30
Masanori Ohkawara
20110212 Silverlight から Bing Maps に触れる
20110212 Silverlight から Bing Maps に触れる
Kenji Wada
TestFlight自動化でらくらくチームテスト
TestFlight自動化でらくらくチームテスト
Yoichiro Sakurai
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Atsushi Tadokoro
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
Atsushi Tadokoro
coma Creators session vol.2
coma Creators session vol.2
Atsushi Tadokoro
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Atsushi Tadokoro
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Atsushi Tadokoro
Interactive Music II Processing基本
Interactive Music II Processing基本
Atsushi Tadokoro
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Atsushi Tadokoro
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Atsushi Tadokoro
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Atsushi Tadokoro
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
Atsushi Tadokoro
Mais conteúdo relacionado
Semelhante a iTamabi 13 第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
Flashup 8
Flashup 8
Katsushi Suzuki
iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜
Yusuke SAITO
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
Takashi Yoshinaga
ARコンテンツ作成勉強会:Myoを用いたVRコンテンツ開発
ARコンテンツ作成勉強会:Myoを用いたVRコンテンツ開発
Takashi Yoshinaga
勉強会資料Out ofmemory
勉強会資料Out ofmemory
Nao Fujita
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
Takashi Yoshinaga
RoboVM
RoboVM
Satoshi Takami
3D touch for iOS
3D touch for iOS
toyship
Android Hacks - Hack30
Android Hacks - Hack30
Masanori Ohkawara
20110212 Silverlight から Bing Maps に触れる
20110212 Silverlight から Bing Maps に触れる
Kenji Wada
TestFlight自動化でらくらくチームテスト
TestFlight自動化でらくらくチームテスト
Yoichiro Sakurai
Semelhante a iTamabi 13 第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
(11)
Flashup 8
Flashup 8
iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
ARコンテンツ作成勉強会:Myoを用いたVRコンテンツ開発
ARコンテンツ作成勉強会:Myoを用いたVRコンテンツ開発
勉強会資料Out ofmemory
勉強会資料Out ofmemory
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
RoboVM
RoboVM
3D touch for iOS
3D touch for iOS
Android Hacks - Hack30
Android Hacks - Hack30
20110212 Silverlight から Bing Maps に触れる
20110212 Silverlight から Bing Maps に触れる
TestFlight自動化でらくらくチームテスト
TestFlight自動化でらくらくチームテスト
Mais de Atsushi Tadokoro
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Atsushi Tadokoro
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
Atsushi Tadokoro
coma Creators session vol.2
coma Creators session vol.2
Atsushi Tadokoro
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Atsushi Tadokoro
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Atsushi Tadokoro
Interactive Music II Processing基本
Interactive Music II Processing基本
Atsushi Tadokoro
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Atsushi Tadokoro
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Atsushi Tadokoro
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Atsushi Tadokoro
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
Atsushi Tadokoro
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Atsushi Tadokoro
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Atsushi Tadokoro
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Atsushi Tadokoro
Tamabi media131118
Tamabi media131118
Atsushi Tadokoro
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Atsushi Tadokoro
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Atsushi Tadokoro
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
Atsushi Tadokoro
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Atsushi Tadokoro
Mais de Atsushi Tadokoro
(20)
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
coma Creators session vol.2
coma Creators session vol.2
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Interactive Music II Processing基本
Interactive Music II Processing基本
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Tamabi media131118
Tamabi media131118
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
iTamabi 13 第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
1.
iTamabi 13 第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する 2013年9月30日 多摩美術大学
PBL科目 担当:田所 淳
2.
今日の内容 ‣ 今回から、実践的なアプリケーション開発を進めます!! ‣ 今日のテーマ
- 画像の表示とアニメーション ‣ openFrameworksに画像ファイルを読み込み表示する ‣ 2枚の画像を入れ替えてみる ‣ 連続する画像を読み込んで、自作アニメーションに挑戦!!
3.
iPhoneに画像で画像ファイルを扱う ‣ iPhoneで、外部の画像ファイルを読込み表示するには ‣ ofImageクラスを使用する ‣
ofImage ‒ freeImageライブラリをopenFrameworksで使用 しやすいようにしたクラス ‣ 主要な画像フォーマットに対応している ‣ PNG, JPEG, TIFF, BMP, GIF ‣ 読み込む画像ファイルの位置に注意!! ‣ [プロジェクトのフォルダ]/bin/data/
4.
iPhoneに画像で画像ファイルを扱う ‣ 画像の配置例 ‣ appsに「iTamabi110531/01_loadImage」プロジェクト ‣
プロジェクトの「bin/data」内に配置する
5.
iPhoneに画像で画像ファイルを扱う ‣ iPhoneの画面いっぱいに画像を表示したい場合 ‣ iPhoneの画像解像度、320
x 480 pixel にあわせる 320px 480px
6.
オリジナルの画像を準備 ‣ せっかくなので、自分の顔を表示してみよう!! ‣ Photo
boothで撮影して、画像サイズを 320 x 480pxに
7.
画像を読み込む手順 ‣ ofImageのインスタンスを生成 ‣ 例)
ofImage myImage; ‣ ofImageクラスのインスタンスmyImageを生成 ‣ 画像ファイルを読み込み ‣ 例) myImage.loadImage("hoge.png"); ‣ bin/dataフォルダにある hoge.png ファイルを読み込む ‣ 画像を表示 ‣ 例) myImage.draw(0, 0); ‣ 座標(0, 0)を左上にして、画像を表示
8.
1枚の画像を表示する ‣ 実際のコードは、サンプルプログラムを参照 ‣ iTamabi110531
> 01_loadImage
9.
1枚の画像を表示する ‣ testApp.h #pragma once #include
"ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" class testApp : public ofxiPhoneApp { public: void setup(); void update(); void draw(); void exit(); void touchDown(ofTouchEventArgs &touch); void touchMoved(ofTouchEventArgs &touch); void touchUp(ofTouchEventArgs &touch); void touchDoubleTap(ofTouchEventArgs &touch); void lostFocus(); void gotFocus(); void gotMemoryWarning(); void deviceOrientationChanged(int newOrientation); //ofImageクラスのインスタンスmyImageを生成 ofImage myImage; };
10.
1枚の画像を表示する ‣ testApp.mm #include "testApp.h" void
testApp::setup(){! //iPhone初期設定 ! ofRegisterTouchEvents(this); ! ofxAccelerometer.setup(); ! ofxiPhoneAlerts.addListener(this); ! ofBackground(127,127,127); //画像ファイルの読み込み myImage.loadImage("myImage.png"); } void testApp::update(){ } void testApp::draw(){ //読み込んだ画像ファイルを座標(0, 0)を基準点にして描画 myImage.draw(0, 0); } // [後略]
11.
1枚の画像を表示する ‣ 完成!!
12.
2枚の画像を切り替える ‣ さらに工夫を加えてみる ‣ 画面をタッチすると別の画像に切り替わるようにしてみる 画面をタッチしていない
画面をタッチしてる
13.
2枚の画像を切り替える ‣ Photo Boothでもう一枚画像を準備してみる ‣
例えば、2種類の顔に!! 画面をタッチしてる画面をタッチしていない
14.
2枚の画像を切り替える ‣ プログラムの変更ポイント ‣ ofImageのインスタンスを2つ用意する ‣
image_a と image_b ‣ 現在画面をタッチしているか否かを判定する変数を用意 ‣ bool touched (true / false) ‣ draw() 関数内でタッチ状態を判定して描画する画像を決定 ‣ if ∼ else 文を用いる ‣ 「もし、画面をタッチしていたら imageA を表示、そうで なければ imageB を表示せよ」
15.
2枚の画像を切り替える ‣ testApp.h #pragma once #include
"ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" class testApp : public ofxiPhoneApp { public: void setup(); void update(); void draw(); void exit(); void touchDown(ofTouchEventArgs &touch); void touchMoved(ofTouchEventArgs &touch); void touchUp(ofTouchEventArgs &touch); void touchDoubleTap(ofTouchEventArgs &touch); void lostFocus(); void gotFocus(); void gotMemoryWarning(); void deviceOrientationChanged(int newOrientation); //ofImageクラスのインスタンスを2枚分用意 ofImage image_a; ofImage image_b; //画面をタッチしているか否かを判定 bool touched; };
16.
2枚の画像を切り替える ‣ testApp.mm (1/2) #include
"testApp.h" void testApp::setup(){! //iPhone初期設定 ! ofRegisterTouchEvents(this); ! ofxAccelerometer.setup(); ! ofxiPhoneAlerts.addListener(this); ! ofBackground(127,127,127); //タッチ状態をFalseに touched = false; //画像ファイルを2枚読込み image_a.loadImage("image_a.jpg"); image_b.loadImage("image_b.jpg"); } void testApp::update(){ } void testApp::draw(){ if (touched) { //もしタッチされていたら、image_bを表示 image_b.draw(0, 0); } else { //そうでなければ、image_aを表示 image_b.draw(0, 0); } }
17.
2枚の画像を切り替える ‣ testApp.mm (2
/ 2) // [中略] void testApp::touchDown(ofTouchEventArgs &touch){ //タッチ状態をTrueに touched = true; } void testApp::touchMoved(ofTouchEventArgs &touch){ } void testApp::touchUp(ofTouchEventArgs &touch){ //タッチ状態をFalseに touched = false; } // [後略]
18.
2枚の画像を切り替える ‣ 完成!!
19.
アニメーションを作成 ‣ アニメーションの画像の記録には、沢山のofImageが必要 ‣ ひとつひとつインスタンス化していては大変 ‣
配列を利用すると便利 ‣ 配列 = 変数のロッカー ‣ ロッカーのひとつひとつに、アニメのコマを記録する ‣ 例:x[4] の配列 x[0] x[1] x[2] x[3] .........
20.
アニメーションを作成 ‣ ofImageの配列を生成するには ‣ 最初に全体のコマ数を定義する ‣
例:#define FRAMENUM 12 //読み込む画像の枚数 ‣ 定義した枚数で配列を生成する ‣ ofImage myImage[FRAMENUM];
21.
アニメーションを作成 ‣ アニメーション画像を準備 ‣ コマ撮りアニメーションを作成してみよう!! ‣
すこしづつ動きながら画像をPhotoBoothで撮影する ‣ もしくは、手書きでアニメーションなど
22.
アニメーションを作成 ‣ testApp.h #pragma once #include
"ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" #define FRAMENUM 12 //読み込む画像の枚数 class testApp : public ofxiPhoneApp { public: ! void setup(); ! void update(); ! void draw(); ! void exit(); ! void touchDown(ofTouchEventArgs &touch); ! void touchMoved(ofTouchEventArgs &touch); ! void touchUp(ofTouchEventArgs &touch); ! void touchDoubleTap(ofTouchEventArgs &touch); ! void lostFocus(); ! void gotFocus(); ! void gotMemoryWarning(); ! void deviceOrientationChanged(int newOrientation); ! //ofImageのインスタンスの配列を生成 ! ofImage myImage[FRAMENUM]; ! //現在のフレーム数を記録する変数 ! int currentFrame; };
23.
アニメーションを作成 ‣ testApp.mm (1/2) #include
"testApp.h" void testApp::setup(){! //iPhone初期設定 ! ofRegisterTouchEvents(this); ! ofxAccelerometer.setup(); ! ofxiPhoneAlerts.addListener(this); ! ofBackground(255, 255, 255); ofSetFrameRate(24); //連番がふられた画像を順番に読み込み for (int i = 0; i < FRAMENUM; i++) { //ファイル名を一時的に格納する文字列 char char1[32]; //連番のファイル名を生成 sprintf(char1, "images/myAnim%04d.png", i+1); //画像をofImageのインスタンスの配列に読み込み myImage[i].loadImage(char1); } //再生フレームを0から始める currentFrame = 0; } // [中略]
24.
アニメーションを作成 ‣ testApp.mm (2/2) ‣void
testApp::draw(){ //現在のフレームの画像を表示 myImage[currentFrame].draw(0, 0); //フレーム数をひとつ進める currentFrame++; //もし指定した枚数よりフレーム数が大きくなったら //フレーム数をリセット if (currentFrame > FRAMENUM - 1) { currentFrame = 0; } }
25.
アニメーションを作成 ‣ 完成!!
26.
アニメーション応用 ‣ 配布したアニメーションのテンプレートを利用して、いろいろ 応用が可能 ‣ タッチした位置によってスピードが変化する ‣
タッチした場所で連続してアニメーションする ‣ 手書きアニメーションの味を生かした表現
27.
アニメーション応用 ‣ 参考:Press Tube ‣
http://www.presstube.com/
28.
アニメーション応用 ‣ イラストや写真が得意だけど、プログラムは苦手という人 ‣ 趣向を凝らした、インタラクティブなアニメーションを作成し てみる、という方向性もアリです!!
Baixar agora