yoppa.org

Tumblrを使う4 – Webサイトを構成する、固定ページとタグ

ここまでやってきた内容で、自分のオリジナルのデザイン（テーマ）でTumblrのサイトを作成できるようになりました。しかし、時系列に投稿が堆積されていくBlog的なサイトは作成できるようになったものの、固定されたページや構造をもった「Webサイト」としてTumblrを活用するには、さらに工夫が必要です。今回はWebサイトとしてTumblrを活用するための方法として、固定ページの作成とタグによる投稿の分類について解説していきます。

スライド資料

スライド資料は下記のリンクから閲覧してください。

Live Coding – note 01: ManifestoDraft

ライブコーデイング(Live Coding)に関して調べものや考えたことを、メモとしてブログに残していこうかと。まず始めに、TOPLAPのライブコーディングのマニフェストを、ざっくり訳してみた。あくまで自分用のメモなので、日本語としてちょっと不自然な直訳で、かつニュアンスがちょっと間違っているかもしれないので、原文も併記。

全体を通して、TOPLAPの考える、Live Codingのあるべき姿が感じられて面白い。道具としてコードを書くのではなく、心や思想を表現する手段としてのコードといった感じ。また、コードを隠すな、バックアップするなというあたりに潔癖さを感じた。

マニフェスト草稿

http://toplap.org/wiki/ManifestoDraft を翻訳

以下のことを要望する:

  • 演奏者の思考に、人間という楽器全体に到達できるようにせよ。
  • オブスキュランティズム (衒学趣味) は危険だ。スクリーンを見せろ。
  • プログラムは、自身を書き換えることのできる楽器である。
  • プログラムは超越的であるべきで、人工言語はその手段だ。
  • コードは聞こえているように見えるべきだ、基礎となるアルゴリズムはその視覚的な出力結果と同じように見えるべきだ。
  • ライブコーディングは道具ではない。アルゴリズムは思想だが、チェーンソーは道具だ。アルゴリズムが時としてチェーンソーより認識が難しいのはそのためだ。

我々は連続するインタラクションの深淵さを認めている。しかし、それに加えて以下のものを求める:

  • アルゴリズムの洞察
  • 心の機智の表現豊かで印象的な表出としての、アルゴリズムの熟練した即興
  • バックアップしない

我々は以下のように考えている:

  • オーディエンスはコードの全てを正しく理解させる必要はない。それは、ギターのパフォーマンスを見ている聴衆がギターの弾き方の詳細を知る必要がないのと同じことだ。
  • ライブコーディングは、タイピング操作の巧妙さと素晴しさを表現する印象的なディスプレイを伴なう
  • パフォーマンスは連続したインタラクション、パフォーマーのアートワークの空間の操作、ジェスチャー、表現の詳細に対する率直さを含む。
  • 伝統的な器楽による楽曲における、触覚的なタイミングの逸脱による表現は、コードには必要ない。なぜ過去を模倣するのか? コードを書いて思考を表現することは、それ自身がニュアンスや慣習の開拓になることは疑いようもない。

原文 (ManifestoDraft)

We demand:

  • Give us access to the performer’s mind, to the whole human instrument.
  • Obscurantism is dangerous. Show us your screens.
  • Programs are instruments that can change themselves
  • The program is to be transcended – Artificial language is the way.
  • Code should be seen as well as heard, underlying algorithms viewed as well as their visual outcome.
  • Live coding is not about tools. Algorithms are thoughts. Chainsaws are tools. That’s why algorithms are sometimes harder to notice than chainsaws.

We recognise continuums of interaction and profundity, but prefer:

  • Insight into algorithms
  • The skillful extemporisation of algorithm as an expressive/impressive display of mental dexterity
  • No backup (minidisc, DVD, safety net computer)

We acknowledge that:

  • It is not necessary for a lay audience to understand the code to appreciate it, much as it is not necessary to know how to play guitar in order to appreciate watching a guitar performance.
    Live coding may be accompanied by an impressive display of manual dexterity and the glorification of the typing interface.
  • Performance involves continuums of interaction, covering perhaps the scope of controls with respect to the parameter space of the artwork, or gestural content, particularly directness of expressive detail.
  • Whilst the traditional haptic rate timing deviations of expressivity in instrumental music are not approximated in code, why repeat the past? No doubt the writing of code and expression of thought will develop its own nuances and customs.

openFrameworks 複数のシーンの管理・切替え、ofxStateMachine

時間の経過でシーンを切り替えたい、ユーザーとのインタラションによっていくつもの画面を用意したいなど、openFrameworksで作品をつくる際に、1つのアプリケーションの中で複数の場面を切り替える必要が出てくる場合があります。そうした際にofAppクラスの中に全ての場面を詰め込もうとすると、各操作での条件分岐などが複雑になり、扱いが大変となります。

今回は、大量の場面を効率的に取り扱う方法について考えていきます。今回は、こうした複数のシーンを管理する方法を2種類紹介します。1つ目は、ofBaseApp (ofAppの元となっているクラス) を継承したBaseSceneというクラスを作成して、ofAppからBaseSceneの配列を管理することでシーンを切り替える方法です。2つ目は、Addonを利用する方法です。ofxStateMachineを利用すると複数の状態(State)とその遷移を、とてもスマートに実装可能です。

スライド資料

サンプルプログラム

プログラムのサンプル、スライドなどの資料は、Githubのリポジトリからダウンロードしてください。

第11回: Sonic piでサウンドプログラミング2 – ランダムとプログラム構造

今回も前回に引き続き、Sonic Piを使用してサウンドンプログラミングに挑戦します。前回までは、プログラムは1行ずつ上の行から順番に実行されるという単純な構造でした。また指定したパラメータも固定のものでした。今回は、ここに、より本格的なプログラム構造を適用していきます。まず始めに「乱数 (random)」を使って毎回違った数値を音程やリズムなどのパラメータに適用する方法について解説します。Sonic Piには、様々なランダムの機能が組込まれており、その違いを理解していくようにします。

次に、ループや指定した回数の繰り返し、複数のスレッド(処理の流れ)を扱う方法など、プログラムの構造をつくるための機能を解説します。

最後に、ここまでの内容の実践編として、Steve Reichの”Piano Phase”のような、「位相のずれ (Phase Shifting)」による作品制作に挑戦します!

スライド資料

サンプルプログラム

講義でとりあげたSonic Piのプログラムは以下を参照してください。

Tumblrを使う３ カスタムHTMLテーマの作成

今回も引き続き、Tumblrのテーマのカスタマイズについて解説していきます。今回は、前回のテーマのカスタマイズよりもさらに高度な方法として、Thumblrの「edit HTML」の機能を使用して、自分独自のテーマをまっさらな状態から作成する方法について取りあげていきます。

スライド資料

スライド資料は下記のリンクから閲覧してください。

カスタムテーマ、テンプレート

カスタムテーマの基本テンプレートは、下記からダウンロードしてください。

サンプルコード

Tumblr基本テンプレート(HTMLのみ)

< !DOCTYPE html>


  
  {Title}


  
  
{Title}


  
  {block:Description}
  
{Description}

  {/block:Description}

  
  Archive

  
  

    {block:Posts}

    
    {block:Text}
    

      {block:Title}
      
{Title}

      {/block:Title}
      {Body}
    

    {/block:Text}

    
    {block:Photo}
    

      {PhotoAlt}
      {block:Caption}
      
{Caption}

      {/block:Caption}
    

    {/block:Photo}

    
    {block:Panorama}
    

      {LinkOpenTag}
      {PhotoAlt}
      {LinkCloseTag}{block:Caption}
      
{Caption}

      {/block:Caption}
    

    {/block:Panorama}

    
    {block:Photoset}
    

      {Photoset-500}{block:Caption}
      
{Caption}

      {/block:Caption}
    

    {/block:Photoset}

    
    {block:Quote}
    

      "{Quote}"
      {block:Source}
      
{Source}

      {/block:Source}
    

    {/block:Quote}

    
    {block:Link}
    

      {Name}
      {block:Description}
      
{Description}

      {/block:Description}
    

    {/block:Link}

    
    {block:Chat}
    

      {block:Title}
      
{Title}

      {/block:Title}
      
    
        {block:Lines}
        
  • 
          {block:Label}
          {Label}
          {/block:Label}{Line}
        
    • 
        {/block:Lines}
      

    

    {/block:Chat}

    
    {block:Video}
    

      {Video-500}{block:Caption}
      
{Caption}

      {/block:Caption}
    

    {/block:Video}

    
    {block:Audio}
    

      {AudioEmbed}{block:Caption}
      
{Caption}

      {/block:Caption}
    

    {/block:Audio}

    {/block:Posts}

Tumblrテーマサンプル(HTML+CSS)

< !DOCTYPE html>


  {Title}
  
  
  {block:Description}
  
  {/block:Description}
  


  
  
{Title}


  
  {block:Description}
  
{Description}

  {/block:Description}

  
  Archive

  
  

    {block:Posts}

    
    {block:Text}
    

      {block:Title}
      
{Title}

      {/block:Title}
      {Body}
    

    {/block:Text}

    
    {block:Photo}
    

      {PhotoAlt}
      {block:Caption}
      
{Caption}

      {/block:Caption}
    

    {/block:Photo}

    
    {block:Panorama}
    

      {LinkOpenTag}
      {PhotoAlt}
      {LinkCloseTag}{block:Caption}
      
{Caption}

      {/block:Caption}
    

    {/block:Panorama}

    
    {block:Photoset}
    

      {Photoset-500}{block:Caption}
      
{Caption}

      {/block:Caption}
    

    {/block:Photoset}

    
    {block:Quote}
    

      "{Quote}"
      {block:Source}
      
{Source}

      {/block:Source}
    

    {/block:Quote}

    
    {block:Link}
    

      {Name}
      {block:Description}
      
{Description}

      {/block:Description}
    

    {/block:Link}

    
    {block:Chat}
    

      {block:Title}
      
{Title}

      {/block:Title}
      
    
        {block:Lines}
        
  • 
          {block:Label}
          {Label}
          {/block:Label}{Line}
        
    • 
        {/block:Lines}
      

    

    {/block:Chat}

    
    {block:Video}
    

      {Video-500}{block:Caption}
      
{Caption}

      {/block:Caption}
    

    {/block:Video}

    
    {block:Audio}
    

      {AudioEmbed}{block:Caption}
      
{Caption}

      {/block:Caption}
    

    {/block:Audio}

    {/block:Posts}

openFrameworks – センサーを使う: ofxKinect、ofxOpenNI、ofxLeapMotion

今回は、Addonを使用したopenFrameworksの実践編として、様々なセンサーを使用していきます。

最近になって、元々はゲームのためのコントローラーとして開発されたKinectを筆頭に、手の骨格やジェスチャーを認識可能なLeap Motionなど、10年前くらいであれば数十万〜数百万円していたような高度なセンサーデバイスがとても安価に使用できるようになりました。また、こうしたセンサーは仕様が比較的オープンに設計されているので、ゲームだけでなく様々なプログラムに応用可能となっています。

今回は、こうした技術の中から、Kinectの深度情報を取得するofxKinect。さらにKinectで取得した深度情報から人体の骨格やジェスチャーを認識可能なofxOpenNI、Leap Motionを使用して手の骨格やジェスチャーを取得可能な、ofxLeapMotionをとりあげて、そのセットアップから使用法について解説します。

スライド資料

サンプルプログラム

プログラムのサンプル、スライドなどの資料は、Githubのリポジトリからダウンロードしてください。

第10回: Sonic piでサウンドプログラミング入門

「メディア芸術の基礎」の前半では、主にProcessingを用いたビジュアルプログラミングを行ってきました。後半はまた新たな内容をとりあげていきます。

後半の講義では、音響や音楽をプログラミングを用いて処理し表現を行います。サウンドを扱うための開発環境として「Sonic Pi」を使用します。Sonic piは、教育現場でのプログラミングや音楽の授業をサポートするように設計された、ライブコーディング可能な無料のサウンドプログラミング開発環境です。「カノンからダブステップまで」というキャッチフレーズに代表されるように、古典〜現代の音楽を作曲できる、Mac OS XやWindows、さらにはRaspberry Piでも動かすことが可能で、柔軟なプログラミングが可能です。

今回は、Sonic Piの入門として、インストールから操作方法、そしてプログラミングの基本を学んでいきます。

スライド資料

Tumblrを使う – テーマをカスタマイズする

今回も引き続きTumblrを使用したWebサイト制作について解説していきます。Tumblrでは「テーマ」を選択することで誰でも簡単にデザインを変更することが可能です。さらに多くのテーマは色やフォントなど様々なページ内のデザイン要素をカスタマイズしていく機能が提供されています。テーマをカスタマイズすることで自分の好みにあわせたページを作っていくことができるようになります。今回はこのテーマのカスタマイズ方法についてとりあげていきます。

スライド資料

授業のスライドは、下記から参照してください。

openFrameworks – 映像を使ったインタラクション ofxOpenCv、ofxCv, ofxFaceTracker

今回は、Addonの利用の初回として、ofxOpenCvとofxCvを扱います。メディアアート作品では、カメラから取得した映像を用いてインタラクションを行う事例が沢山存在しています。映像を使ったインタラクションは、特別なセンサーを使用することなく、また鑑賞者に直接接触することなく高度なインタラクションが可能となり、多くの可能性を秘めた手法です。また、近年では映像の中から物体を認識したり、映像の中の微妙な差分や動きを検出したりといった、コンピュータ・ビジョン（Computer Vision = CV）の技術が発展し、高度な映像解析が活用できるようになりました。今回は、こうしたCVの技術の中でもオープンソースで多くの利用実績のあるOpenCVというCVのためのライブラリをopenFrameworksで活用する方法について紹介していきます。

さらに、OpenCVを活用した応用例として、フェイストラッキングの技術を使っていろいろ実験していきます。フェイストラッキングとは、カメラから入力した映像の中から人間の顔を検知して、その傾きや大きさ、さらには目や鼻、口、眉といった顔のそれぞれのパーツの位置や大きさを立体的に検知することのできる、画像解析の技術です。この技術を利用して、顔の表情でプログラムをコントロールしたり、自分の顔に他人の顔を合成したりと様々な応用が可能となります。今回は、このフェイストラッキングに必要な環境設定とビルドの方法を解説した上で、その応用方法について考えていきます。

スライド資料

サンプルプログラム

プログラムのサンプル、スライドなどの資料は、Githubのリポジトリからダウンロードしてください。

第9回: Processingでオブジェクト指向プログラミング 2 – クラスの継承

前回に引き続き、Processingにおけるオブジェクト指向プログラミング(OOP)の方法について解説していきます。今回はOOPの重要な概念の一つである「継承 (インヘリタンス) 」について考えていきます。継承とは、既存クラスの機能構造を共有する新たなクラス(サブクラス)を派生させることです。サブクラスからは親となるクラスのプロパティやメソッドをそのまま引き継ぐことが可能です。この継承の仕組みを効果的に活用することで、既存のクラスを再利用しながらそこに新たな機能を加えていくということが可能となります。

スライド資料

サンプルプログラム