iA


Swiftメモ – PlaygroundのスケッチをOS Xのネイティブアプリへ

Swift OS X native app test from Atsushi Tadokoro on Vimeo.

PlaygroundでSceneKitをつかって3Dでいろいろ遊んでいるうちに、このスケッチをOS Xのアプリにしてみたい、という欲求が高まってきた。実際にやってみたら、思いの外簡単だったので、メモとして記録。

まずは、Playgroundでプログラムを作成。この段階で、ライブコーディングで色や大きさ動きなど細かなパラメータの調整を終えておく。まさにスケッチする感覚。

このスケッチを、OS Xのアプリ化したい。最近のXcodeには、便利なテンプレートがいろいろ用意されていて、これを利用していきたい。SceneKitを使用した3Dのプログラムは、“Game”というテンプレートをつかうと簡単にできるみたいなので、活用してみる。

まずは、Xcodeで、メニューから File > New > Project… で新規プロジェクトを作成する。テンプレートを選択する画面から、OS X > Application > Game を選択。

screenshot_250

“Next”ボタンを押して次に進むと、プロジェクトの詳細設定画面になる。ここで、Product Nameなどは適当な名前をつけて、LanguageをSwiftに、Game TechnologyをSceneKitに設定する。

screenshot_254

さらに“Next”ボタンを押すと、Projectを保存する場所を聞いてくるので、適当な場所を選択して保存すると、新規プロジェクトが生成される。

生成されたプロジェクトのファイルリストをみると、いろいろなファイルが自動的に生成されてる。試しにこのままビルドしてみる。ちょっとチープな戦闘機が、くるくる回転するアプリケーションが出来上がる。このアプリを改造して、先程Playgroundで作成したアプリを移植したい。

screenshot_252

ファイルリストの中で、変更するファイルは “GameViewController.swift” のみ。早速開いてみると、以下のような内容。

このコードが、飛行機の3Dモデルを読み込んでSCNSceneで表示しているようだ。ここを、先程のPlaygroundのコードに差し替える。View(SCNView)に関しては、“GameView.swift”で定義されているので、SCNSeneに関する部分のみを移植する。

こんな感じになった。

早速ビルドしてみると、最初のPlaygroundのスケッチが、ネイティブアプリとしてウィンドウで表示された! 表示速度も速い!

screenshot_253

しかし、Swift以降、OS Xのアプリケーション開発のハードルも、だいぶ下がったんじゃなかろうか。Playgroundとあわせて、いろいろ試していきたい。


Swift + Playgraoundメモ 3 – SceneKitで3Dライブコーディング!

注意: Swiftのソースは全てXcode 6 Beta 6で確認しています。それ以前のバージョンでの動作は確認していません。また今後のXcodeのバージョンで動く保証もありませんので、ご了承ください。

Generative 3D with Swift Playground from Atsushi Tadokoro on Vimeo.

Swift + Playgraoundメモ 1 – SpriteKitでアニメーション」、「Swift + Playgraoundメモ 2 – SpriteKitで物理シミュレーション」に続く、Swift + Playgroundシリーズ第3弾。今回は、3DCGに挑戦してみた。

2Dのグラフィクスの表示やアニメーションには、SprikeKitをつかったのだけれど、3Dではその代わりにSceneKitというフレームワークを使うらしい。説明を読むと、OpenGLなどと比べると、より上位のレベルで、シーンの中の物体とその動きを記述できるとのこと。早速、Swift+Playgroundの環境で使ってみたい。

まずは、SpriteKitのときと同様に、Viewを定義して、そこにSceneに追加する。3DのSceneには、SCNSceneを使用する。

ここにまずは背景色と照明(ライティング)の設定をしたい。こんな感じでコードを追加。Playgroundのタイムラインでの表示のためのコードも追加している。

次にカメラを配置する。3DCGは、三次元の情報を二次元平面に投影して、あたかも奥行があるように見せているものなので、どこから物体を見るのかという「視点」の設定が必須となる。

SceneKitでは、まずカメラを生成したあと、それをシーンのノードとして登録して追加するという手順を踏むようだ。こんな感じ。

これで、環境の準備ができた。さっそく3Dの物体を表示してみたい。まずは、シンプルに立方体を置いてみる。立体感がわかるよう配置したあと、ちょっと回転させて斜めから見るようにしている。

これで、既にリアルな物体として表示される。マテリアル(質感)はデフォルトでも既に設定されているようだ。

screenshot_241

次にこのデフォルトのマテリアルから独自なものに変更してみる。

最後にこの立方体にアニメーションを適用してみる。アニメーションにはCABasicAnimationクラスを使用する。いろいろな動きの定義が可能なのだけれど、ここでは、クルクルと回転させる動きにしてみることに。

これで、アニメーションつきの3Dグラフィクスプログラミングの完成!! 簡単!!

screenshot_243

最後にすこし応用的なサンプル。3Dの図形を立方体からトーラスに変更し、for文でくりかえして大量に描画する。さらに回転するアニメーションの速度を乱数で変化させて、いろいろな速度で回転するようにしてみた。

たったこれだけのコードで複雑な3D図形が生成された。楽しい!!

screenshot_244


Swift + Playgraoundメモ 2 – SpriteKitで物理シミュレーション

注意: Swiftのソースは全てXcode 6 Beta 6で確認しています。それ以前のバージョンでの動作は確認していません。また今後のXcodeのバージョンで動く保証もありませんので、ご了承ください。

Swift + Playground phyisics from Atsushi Tadokoro on Vimeo.

前回の「Swift + Playgraoundメモ 1 – SpriteKitでアニメーション」の続き。今回は、物理シミュレーションをやってみようかと。

まず、SKViewでビューを生成してそこのSKSceeのシーンを追加するところまでは、前回の通り。

おそらくゲームなどの用途を想定しているのか、SpriteKitにはあらかじめ物理エンジンが用意されている。Box2Dなどの物理エンジンを使用したことがあれば、さほど違和感なく使える感じ。

Box2Dでもそうだが、まず物理法則が適用される世界(World)を生成して、そこで重力や摩擦などのパラメータを指定する。そこに、物体(Body)を配置して、あとはエンジンの演算に丸投げというのが基本的な使い方。SpriteKitでは、世界(World)のためのクラスとしてSKPhysicsWorld、そして物体(Body)のためにSKPhysicsBodyというクラスをつかう。

SKPhysicsWorldとSKPhysicsBodyは、新規にインスタンスの生成などする必要はなく、あらかじめSKSceneのプロパティとして存在している。例えば、SKSceneのインスタンスがsceneだとすると

  • SKPhysicsWorld : scene.physicsWorld
  • SKPhysicsBody : scene.physicsBody

にパラメータを設定してやれば良い。

さっそく、まずはSKPhysicsWorldを追加。下向きに1の強さの重量を設定している。

ここに、まずは運動させる形(SKShapeNode)を追加する。今回は、四角ではなく丸にしてみる。

これで(200,300)の位置に半径6の円ができあがる。

screenshot_216

いよいよここに物理法則を適用してみたい。やり方は実にシンプルで、作成したShapeを、SKSceneのphysicsBodyにするだけ。

これで、配置した円が重力にひっぱられて下に向かって落ちていくはず。簡単!!

ただし、この円は画面の枠からはみ出してすぐに見えなくなってしまう。これではつまらないので、画面の四隅に壁を設定してみる。こんな感じでOK。

これで、壁でバウンドするようになったはず!

screenshot_217

この方法で、いくらでも物体は追加できる。例えば円を100個に増やしてみる。乱数の生成にはarc4random_uniformという関数を利用。

きちんと、100個の丸が相互に衝突判定している。

screenshot_218

さらに、それぞれの円に物理的なパラメータを設定してみる。ここでは以下のパラメータを設定してみた。

  • friction: 摩擦 → 0.1
  • restitution: 反発力 → 0.99
  • mass: 質量 → 1.0

screenshot_219

これで完成!! 30行ちょっとのコードでここまでできてしまうので、Swift楽しいなあ。しかもライブコーディング。


Swift + Playgraoundメモ 1 – SpriteKitでアニメーション

注意: Swiftのソースは全てXcode 6 Beta 6で確認しています。それ以前のバージョンでの動作は確認していません。また今後のXcodeのバージョンで動く保証もありませんので、ご了承ください。

最近は、XcodeのPlaygroundのようなライブコーディング環境が、これからのプログラミングの姿になっていくのではと勝手に期待しているところもあり、少しずつ勉強していきたいと考えているところ。こうやってブログにメモ的に残すことで自分の知識も整理されるかも、ということで、まだまだ試行錯誤中なのだけれど、現状でわかってきたところなど書いてみる。

Swiftの基本文法は、現状で一番まとまっているのは、やはり本家Appleの資料みたいだ。

現状は、ここ資料を見つつ、あとはStackoverflowなどでググりながら、いろいろ探っている段階。

まずは、SwiftとPlaygroundで、Processing的なアニメーションをつくってみたいなあと思ってちょっと調べてみると、iOSやOS XのSDKには、SpriteKitというのがあって、これを使っていけばSDKの機能を利用しながら効率的にアニメーションが作れそうな感じ。

とりあえず、やってみた。

まずは、Xcodeで新規にPlaygroundプロジェクトを作成。そこに必要なライブラリをimport。SpriteKitとあわせて、Playground用のライブラリXCPlaygroundも入れておく。

ここにまずビュー(View)というのを生成する必要があるみたい。SpriteKitでは、SKViewというクラスで実装されている。Processingでいうところの size() 的な感じで、幅と高さを指定してSKViewを生成する。

これで、もう画面が生成されている。楽ちんだ!

screenshot_211

ビューを生成したら、ここにシーンを追加してあげる必要があるようだ。シーンはSKSceneで定義する。ここで背景の色なども設定可能。背景を黒にして追加してみる。

screenshot_212

これで背景色黒のシーンが生成できた。いよいよ形を描いてみる。形を追加するにはSKSpriteNodeというクラスで形を定義して、最後にシーンにaddChild()すると良いらしい。ちょっとActionScript3風味。

これで青い四角形が画面中央に配置される。文法もさほど難しくない感じ。

screenshot_213

この形をアニメーションしてみたい。SpriteKitに配置したSKSpriteNodeは、SKActionクラスをつかうとあらかじめ用意された動きを簡単に付加できるようだ。試しに四角をぐるぐる回してみる。

まずは、1秒で1回転させてみる。こんな感じ。

ずっと回転させ続けるには、SKActionのrepeatActionForeverというメソッドをつかうと良いみたい。

これで、永遠にぐるぐる回る青い四角形のアニメーションが完成。まだまだ、手探り状態だけれど、なんとなく雰囲気はつかめてきた。

screenshot_215

(たぶん)つづく…


Github製エディター、Atomがすばらしい

screenshot_144

テキストエディター何を使うかという問題、常に議論(炎上)の種になりがちなテーマでいろいろ断言すると反応が怖いのだけれど、ここしばらく使用してみてGithubで開発されたAtomが素晴しいということで、紹介記事を書いてみる。

これまでのエディター遍歴を思い返してみると、最初に習った本格的なテキストエディターがEmacsだったので、かなり長いことEmacs派として過ごしてきた。今でもEmacsキーバインドが使えない環境にはストレス感じる。かな漢字変換もSKKに無理矢理馴染んでみたので、他の変換を使えない体になってしまった。

そういう事情もあり、個人的にテキストエディタを選ぶ基準として、

  • できるだけオリジナルに忠実なEmacsキーバインドが使える
  • SKK系のかな漢字変換が使用可能

また、最近になって構造的な文章を書く際はMarkdownで記述することが多いので

  • Markdownモードがあり、簡単にプレビューできる

という基準が必須となりつつある。

そういった基準を満たすエディターとして、Sublime Textは良くできてると思う。ただし、有料なので大学の授業などで一斉に採用というのもちょっと難しい。あと、Aqua SKKとの相性がちょっと微妙な感じもした。

で、最近登場したAtomに乗り換えてみたのだけれど、最初のうちはちょっと設定が落ちつかず四苦八苦することもあったのだが、ここにきて大分落ち着いてきた。個人的な感想としては、Sublime Textの代替として十分使用可能なんじゃないかと感じてる。

さらに、Sublime Textと比較しても良いかと感じたのは

  • フリーソフトウェア (MIT License)
  • GitHub Markdownとの相性が良い(Github純正なので)
  • Emacsキーバインドをかなり忠実に再現可能
  • パッケージの管理が楽

といったあたりか。

いろいろ設定してみて、個人的に必須かと思ったパッケージはデフォルトで同梱されるパッケージを除くと

ここらへん入れると、だいぶ快適になった。

ちなみにキーマップは

こういう設定で、Xcode風にControl+iで自動インデントをするように。また、Control+jの機能を殺すことで、SKKとのバッティングを防いでみた。

そんな感じでAtom素晴しいので、これからもいろいろ試していきたい!

ちなみに、この投稿の原稿もAtomで作成。Markdownで書いたのを、HTMLに書き出してWordpressにコピペした。らくちん!


デザイン言語総合講座 – クリエイティブ・コーディング

2000年代に入って「クリエイティブ・コーディング」と呼ばれる、アート、デザイン、建築など、いわゆる「クリエイティブ(創造的)」な作品制作のためのプログラミング環境が登場し注目されるようになりました。この講座では、このクリエイティブ・コーディングの成り立ちを紹介し、さらに将来の展望を考えます。


Markdownでスライド作成する、Swipeが素晴しい

Markdownを使用してWebベースのスライドが作成できる「Swipe」というWebサービスが素晴しい。いくつか試しにスライドつくってみたのだけれど、Markdownはアイデアをリアルタイムにガシガシと記述できるので、ストレス無くて良いですね。問題は、このサービスが今後安定して続いてくれるか、というところか。GoogleやGithubといった会社にサービス丸ごと買収されたりしないかな…

先日、研究会用に作成したスライドをEmbedしてみるテスト


ゲストレクチャーのスライド

SFCの中西泰人さんの授業「オブジェクト指向プログラミング」で、ゲストとして30分ほど喋ったので、その際のスライドを掲載。この、Commodore 64での「10 PRINT CHR$(205.5+RND(1)); : GOTO 10」を切り口に、Processing、openFrameworks、Cinderなどについて紹介する流れ、もう少しリファインして持ちネタにしていきたい所存。何も見ないでもコードをスラスラ書けるくらいまでなれば、そこそこ説得力あるのではと…


Roppongi ArtTech Night #1 発表資料

Google Japan主催で開催された、アートとテクノロジーの交流の場「Roppongi ArtTech Night #1」で、トークしました。先日のJSSAの発表と重なる部分も多いのですが、発表資料を公開します!

スライド内で紹介している資料へのリンクです。


ARTSAT1: INVADER – realtime tracker α 公開!!

多摩美と東大による、世界初の芸術衛星「ARTSAT1: INVADER」の打ち上げが成功し、無事周回軌道に乗った。成功を祝して何かできことを、ということで、衛星の位置をリアルタイムで3D表示するWebページ作成した。

WebGLを用いた3Dグラフィクスの表示には、Three.jsを使用。こういうデータを元にした3D表示が非常にシンプルに実装できて、素晴しいライブラリということを改めて実感した。

表示している衛星の周回軌道は、北アメリカ航空宇宙防衛司令部(NORAD)が発行しているTLE(Two Line Element)という、衛星の軌道をテキスト2行で記述したフォーマットをもとに演算している。ちなみに今日現在のINVADERのTLEは下記。

2014-009F 
1 39577U 14009F 14061.38381964 .00092433 00000-0 11001-2 0 154
2 39577 65.0139 50.9298 0006596 319.5829 40.4842 15.60594203 404

この情報はオンラインで公開されている。この情報は今後変更されることもあるので、1日1回自動更新するよう設定した。

このTLEから実際の座標を算出するためのアルゴリズムが考案されている。しかし、内容はかなりゴリゴリの数学。今回用いたSGP4という方法も、論文を参照しても途方に暮れてしまう感じ。

というわけで、どこかにJavascriptで実装されたSGP4のライブラリがないか調べたところ、Isana Kashiwai氏の実装したorb.jsというライブラリを発見。今回はこのライブラリを全面的に使用しています。Isana Kashiwai氏に感謝します。

このバージョンはまだα版的な位置付けで、今後は衛星の状態などにアクセスしたりいろいろ拡張していきたい。

ソースコードは全てGithubに公開したので、興味ある方は覗いてみてください。