yoppa.org

38歳になりました

本日、38歳になりました。もう立派な中年。

今教えている大学1年生、場合によっては20歳の年齢差があると思うとクラクラする。もし20歳で子供がいたら(いないけど)自分の息子or娘の年齢ということか。ずいぶんと歳をとったものだ。

油断してるともう少しで不惑ってやつになってしまう。すごくありふれた言い方だけど、まだ人生惑いまくってる。まあ、いろいろ変化があるほうが面白いので、あまり落ち着きすぎないように、とはいえあんまり今後の人生が過酷なものにならないよう、バランス良くやっていければと思う。

今夜は「西田ひかる」ばりにお誕生会。この例えも古い。

変数と繰り返し

変数

変数とは?

  • 一時的に値（文字、文字列、数字など）を記憶しておく場所
  • データを入れておく「箱」のようなもの

データ型

  • 値の種類を「データ型」という

Processingでよく用いられるデータ型

  • int：整数 (-1, 0, 1, 2, 3….)
  • float：少数 (-0.01, 3.14, 21.314)
  • boolean：ブール値、「真」か「偽」か、(true, false)
  • char：1文字分のデータ(a, b, c, d…)
  • color：色の情報を保存

変数の使いかた

  • 宣言：使用する変数の名前の箱を準備する
int hoge;
  • 代入：変数の箱に値を入れる
hoge = 0;
  • 演算：変数の値を計算する
hoge = hoge + 1;

変数の使用例

//変数の宣言
int diameter, x, y;

//初期設定
colorMode(HSB,360,100,100,100);
size(300,300);
background(0);
fill(210,100,100,50);
noStroke();

//変数へ値の代入
diameter = 180; 
x = 60;
y = 150;

//円1
ellipse(x,y,diameter,diameter);

//右に移動
x = x+60;

//円2
ellipse(x,y,diameter,diameter); 

//右に移動
x = x+60;

//円3
ellipse(x,y,diameter,diameter); 

//右に移動
x = x+60;

//円4
ellipse(x,y,diameter,diameter);

変数の使用例：その2

//変数の宣言
int diameter,top,left;

//初期設定
size(300,300);
colorMode(HSB,360,100,100,100);
background(0,0,0,100);
noStroke();
fill(210,100,100,20);
diameter = 300;
top = 150;
left = 150;

//同心円を描いて行く
ellipse(top,left,diameter,diameter);
diameter = diameter - 40;
ellipse(top,left,diameter,diameter);
diameter = diameter - 40;
ellipse(top,left,diameter,diameter);
diameter = diameter - 40;
ellipse(top,left,diameter,diameter);
diameter = diameter - 40;
ellipse(top,left,diameter,diameter);
diameter = diameter - 40;
ellipse(top,left,diameter,diameter);
diameter = diameter - 40;
ellipse(top,left,diameter,diameter);
diameter = diameter - 40;

繰り返し

  • さっきのプログラムに注目
  • 途中から同じ命令のくりかえしになっていないだろうか?
//同心円を描いて行く
ellipse(top,left,ellipse_size, ellipse_size);
ellipse_size = ellipse_size - 40;
ellipse(top,left,ellipse_size, ellipse_size);
ellipse_size = ellipse_size - 40;
ellipse(top,left,ellipse_size, ellipse_size);
ellipse_size = ellipse_size - 40;
....
  • 繰り返しの部分を何度も書かずに一気に指定したい
ellipse(top,left,ellipse_size, ellipse_size);
ellipse_size = ellipse_size - 40;
  • これを10回くりかえし

繰り返し – for文

  • 繰り返しをするには「for文」を使用する
  • for文の書きかた
for (初期化式; 継続条件式; 再初期化式) {
    文;
}
  • 初期化式：初期化の際の条件式
  • 継続条件式：繰り返しを継続する条件式
  • 再初期化式：繰り返されるたびに実行される式

for分を用いた、繰り返しの例 1

// 100回「+」の文字を出力する

int i;

for (i=0; i<100; i=i+1){
	print("+");
}

for分を用いた、繰り返しの例 2

  • 変数 i をfor分の中で使用してみる
/*
 0から99までの数を出力する
 for文の繰り返しの条件式の中の、変数iを利用する
 */

int i;

for (i=0; i<100; i=i+1){
    print(i + ", ");
}

同心円をくりかえしを用いて描画

//変数の宣言
int diameter,top,left,i;

//初期条件の設定
size(300,300);
colorMode(HSB,360,100,100,100);
background(0,0,0,100);
noStroke();
fill(210,100,100,10);

//円のパラメータを初期化
diameter = 300;
top = 150;
left = 150;

//同心円を描いていく
for(i=0; i<16; i++){
    ellipse(top,left,diameter,diameter);
    diameter = diameter - 20;
}

虹色のグラデーション

//変数の宣言
int i;

//初期設定
size(300,300);
colorMode(HSB, 360, 100, 100);
noStroke();

//色相を変化させながら四角を描いていく
for(i=0; i<30; i++){
    fill(i*10,80,100);
    rect(i*10,0,10,300);
}

乱数：ランダムな値を出力する

  • 例：0から100の乱数を生成
random(100);
  • 例：100から1000の乱数を生成
random(100, 1000);

ランダムに色を塗る

//ランダムに色を塗る

//変数の宣言
int i;

//初期設定
size(300,300);
colorMode(HSB, 360, 100, 100);
noStroke();

//ランダムに色を塗る
for(i=0; i<300; i++){
    fill(random(360),random(100),random(100));
    rect(i*1,0,1,300);
}

似たような色相で

//似たような色相で色を塗る

//変数の宣言
int i;

//初期設定
size(300,300);
colorMode(HSB, 360, 100, 100);
noStroke();

//似たような色相で色を塗る
for(i=0; i<300; i++){
    fill(random(200,220),random(100),random(100));
    rect(i*1,0,1,300);
}

似たような明度と彩度で

//似たような明度と彩度で色を塗る

//変数の宣言
int i;

//初期設定
size(300,300);
colorMode(HSB, 360, 100, 100);
noStroke();

//似たような明度と彩度で色を塗る
for(i=0; i<300; i++){
    fill(random(360),60,90);
    rect(i*1,0,1,300);
}

たくさん円を描く

//たくさん円を描く

//変数の宣言
int i;

//初期設定
size(300,300);
background(0);
colorMode(HSB, 360, 100, 100,100);
noStroke();

//たくさんの円を描く
for(i=0; i<100; i++){
    float diameter;
    fill(random(200,240),random(50,100),random(50,100), 50);
    diameter = random(20,80);
    ellipse(random(300),random(300),diameter,diameter);
}

たくさん四角形を描く

//たくさんの四角形を描く

//変数の宣言
int i;

//初期設定
size(300,300);
background(0);
colorMode(HSB, 360, 100, 100,100);
rectMode(CENTER);
noStroke();

//たくさんの四角形を描く
for(i=0; i<100; i++){
    fill(random(0,40),random(50,100),random(50,100), 50);
    rect(random(300),random(300),random(5,100),random(5,100));
}

次回までの課題

  • くりかえしを使用したスケッチの作成
  • 連休明けの授業で提出
  • 以下の場所にアップロードしておくこと
  • http://www.cuc.ac.jp/~[ログイン名]/proga/assignment2/

さらに高度なイージングの表現

テンポの5つの表現

  • DVD「ノーマン・マクラレン作品コレクション」パイオニアLDC、より「ノーマン・マクラレンのアニメーション講座 3」を視聴
  • 前回までに登場した3つの表現 – 等速、加速、減速
  • あと2つの表現の手法が登場
  • ゼロ(静止) – 映像の中で静止を入れることによる効果
  • 不規則な動き – ランダム(規則性のない)な動き
  • 5つの動きを組み合せることによる、動きの表情の表現
  • アニメーションによる、「命」「意味」「正確」「魂」

モーションエディタの詳細

  • 先週の続き
  • カスタムのイージングをマスターする
  • 動きとそのイージングの曲線の対応を分析する
  • 先週とりあげた様々な動きを細かく分析
  • 強いパンチ
https://yoppa.org/wp-content/uploads/2010/04/02_violent_punch.swf,400,300

  • ソフトなタッチ
https://yoppa.org/wp-content/uploads/2010/04/03_touch.swf,400,300

  • プッシュ
https://yoppa.org/wp-content/uploads/2010/04/04_push.swf,400,300

複数の動きを組み合せる

  • 衝突
https://yoppa.org/wp-content/uploads/2010/04/05_collision.swf,400,300
  • あらかじめ動きの区切りに、タイムライン上でキーフレームを入れておくのがポイント


タイムラインの構造


レイヤー1 – 衝突する小さい円


レイヤー2の後半 – 衝突されて反動で後ろに下がる大きな円

様々な動きを組み合せてみる

  • 加速、減速を組み合せて、2つの物体の関係性や感情を表現してみる

    • https://yoppa.org/wp-content/uploads/2010/04/sequence.swf,400,300

    連休明けまでの課題

    • 2つの物体による、アニメーション表現
    • 単純な形態を2つ(円や四角形、三角形など)をシンボルに
    • 物体の動きだけで、感情や意味を表現する
    • 映像の5つの動き(等速、加速、減速、静止、ランダム)を活用して
    • シンボルの移動だけでなく、変形、回転、色の変更などを自由に使用して

    課題の提出方法

    • パブリッシュして、以下の場所にアップロードすること
    • 詳細は授業の中で解説します

    サンプリング＆プレイバック

    サンプリングについて

    サンプリグ (標本化)とは

    • 時間的に連続した信号を一定の間隔をおいて測定することにより、離散的な（連続でない）データとして収集すること
    • 時間的に連続した信号 = アナログ信号
    • 離散的な信号 = デジタル信号


    信号のサンプリング(標本化) (wikipediaより)

    音響における、サンプリング・プレイバック

    • オーディオ信号をデジタル・レコーディングして、再生すること
    • サンプリング – アナログ信号をデジタル信号に→AD変換
    • プレイバック – デジタル信号をアナログ信号に→DA変換

    コンピュータで音響を処理する際の情報の流れ

    • マイクで音を収録、物理振動を電気信号に
    • サンプリング周波数の半分以上の周波数の波形は折り返し雑音となってしまう
    • ローパスフィルタ(アンチエイリアシングフィルタ)で、余計な高周波成分をカット
    • アナログからデジタルに変換 (AD変換)
    • メモリに保存
    • 保存したメモリー内の信号を様々な手法で加工、処理 ← この部分が創作の主な部分
    • デジタルからアナログに変換 (DA変換)
    • サンプリングのした信号のままでは、余計な高周波成分が含まれている(量子化ノイズ)
    • ローパスフィルタ(平準化フィルタ)で、余計な高周波成分をカット
    • アンプ(amplifier)で信号を増幅
    • スピーカーから音を物理振動へ変換

    サンプリング周波数と量子化ビット数

    • サンプリング周波数 – 1秒間にいくつのサンプルを使用してサンプリングするか、単位はHz
    • 量子化ビットレイト – AD変換の際に信号を何段階の数値で表現するか、単位はbit


    サンプリング周波数と量子化ビット数

    主なメディアのサンプリング周波数と量子化ビット数

    • CD – サンプリング周波数：44,100Hz、量子化ビット数：16bit
    • DV(ビデオ) – サンプリング周波数：48,000Hz、量子化ビット数：16bit
    • DVD-Video – サンプリング周波数：48,000Hz/96,000Hz、量子化ビット数：16bit/24bit
    • コンピュータ(Mac, win) – 設定やオーディオインタフェイスの性能により異なる
    • Macの場合は「Audio MIDI 設定」で現在の設定を確認可能


    Audio MIDI 設定

    ナイキストの定理 (標本化定理)

    • 情報理論分野における重要な定理
    • 原信号に含まれる最大周波数成分をfとすると2fよりも高い周波数fsで標本化した信号は、低域通過（ローパス）フィルターで高域成分を除去することによって原信号を完全に復元することができる
    • つまり、復元したい周波数の上限の2倍のサンプリング周波数でサンプリングすることで、完全に元の音声を再現できることができる
    • CDのサンプリング周波数は、44,100Hzに設定されている。これは人間の耳が20Hzから20,000Hzまでしか聞くことができないという性質から導きだされている


    サンプリング周波数の1/2以上の周波数の波形は再現できない (wikipediaより)

    Max/MSPでサンプリング&プレイバック

    ディスクベース v.s. メモリベース

    • ディスクベースのサンプリング
    • ハードディクス上のサウンドデータを直接再生
    • プログラミングが楽←→自由度が低い
    • 長時間のサウンドもへっちゃら
    • メモリベースのサンプリング
    • ハードディスク上のサウンドデータをメインメモリに読み込んでから再生する
    • 自由度が高い←→プログラミングが大変
    • 長時間のサウンドを扱うとメモリを大量に消費してしまう

    ディスクベースのサンプリング・プレイバック

    • sfrecord~
    • ハードディスクへサウンドを録音する
    • 第１引数はチャンネル数
    • sfplay~
    • ハードディスクからサウンドを再生する
    • 第１引数はチャンネル数

    サウンドファイルの再生

    • sfplay~ サウンドファイルを再生する
    • メッセージ “open” を入力すると、サウンドファイル選択画面に
    • トグルボタンで、start / stop
    • “speed 値” で再生スピードを変化させられる

    サウンドファイルへ録音

    • sfrecord~ サウンドファイルを録音しファイルに保存
    • 録音に際しては、手順が重要
    • sfrecrod~に”open”を入れて、サウンドファイルを保存
    • “adc~” をonにすると録音準備状態になる
    • トグルスイッチをonにすると録音が開始する

    メモリベースのサンプリング

    • メインメモリ上に指定した容量の容器を用意する必要がある
    • “buffer~” オブジェクトがこの容器の相当する
    • buffer~
    • サンプリングのためのバッファーを確保するためのオブジェクト
    • buffer~ [バッファー名] [バッファーサイズ] [チャンネル数]
    • 下の例の場合
    • バッファー名：mybuf
    • サイズ：10000ms
    • チャンネル数：2


    buffer~ オブジェクト

    “buffer~” に録音 (サンプリング) する

    • record~ オブジェクトを使用する
    • record~ バッファー名
    • 例：オーディオ入力を mybuf という名前のバッファーに録音する

    “buffer~” に録音したサンプルの中身を表示する

    • waveform~ オブジェクトを使用する
    • 「set バッファー名」というメッセージを入れると内容を表示する
    • buffer~ に「read」というメッセージを入れるとオーディオファイルを読み込んでメモリに取り込むことができる

    • buffer~, recod~, waveform~ を組合せることで、リアルタイムに録音した音をメモリに保存し、その内容を波形として確認することができる

    メモリーベースのプレイバック

    • groove~を利用すると、高度なプレイバックが実現できる
    • 再生範囲の指定、スピード、ループ など

    メモリーベースのプレイバック：応用

    • 2つの buffer~ を並列して使用
    • buffer~ の名前に注意 (同じ名前は使ってはいけない)

    • 再生位置をランダムに変化させる

    • sah~ と組合せる
    • sah~：サンプル＆ホールド：一定の間隔に信号を切り刻んで変化させる装置

    フィルタと組み合わせる

    来週までの課題

    Fine Collection of Curious Sound Objectsを参考に、録音、再生、音響合成を使用して、簡単なインタラクションによって、音を発生する「楽器 (ソフトウェア版)」を作成する。

    サンプルファイルのダウンロード

    解説で触れた全てのファイルはダウンロード可能です。以下のリンクからダウンロードしてください。

    アプリケーションの開発(2)：iPhone/iPod touch実機でアプリを動かす

    デバイスでアプリを動かす

    • 先週までは、シミュレータのみの確認だったが、実機でも確認できるようにしてみる
    • 実機で確認するためには、いくつか手続きが必要
    • iTune Storeでアプリを販売するのは、さらに手続き必要 → 今後の課題

    iPhoneデベロッパープログラムへの登録

    • ADC(Apple Developper Center)には既に各自で登録済みのはず
    • ADC登録情報を送付済みのメンバーには、iddのユニバーシティプログラムから招待メールが来ているはず
    • 招待メール内のリンクから登録Webページにアクセス
    • 登録が完了すると、IDDのiPhoneデベロッパーユニバーシティプログラムのチーム「idd@tamabi」のメンバーになる
    • iPhone Dev Centerにアクセス
    • 画面右の「iPhone Provisioning Portal」のメニューにアクセス – 登録情報を管理するページに移行


    iPhone Provisioning Portal

    証明書(Certificate)について

    • iPhoneを開発するには、正規のiPhone開発者であるという証明書(Certificate)が必要
    • iPhone Developper Program では公開鍵、秘密鍵方式で認証している
    • 証明書は開発するマシンにインストールされる、キーチェーンアクセスでインストールされた証明書を確認できる

    証明書要求の作成 (自分のマシンで開発する場合)

    • アプリケーションから「ユーティリティ」→「キーチェーンアクセス」を起動
    • キーチェーンアクセスのメニューから「キーチェーンアクセス」→「証明書アシスタント」→「認証局に証明書を要求…」をクリック
    • Apple IDに登録されているメールアドレスを「ユーザーのメールアドレス」に、自分の名前（英字）を「コモンネーム」
      に入力
    • 「ディスクに保存」を選択して「鍵ペア情報を指定」にチェックを入れた状態で「続ける」をクリック
    • ファイルを保存するダイアログが表示される、適当な場所に保存
    • 鍵ペア情報の項目では，鍵のサイズが「2048ビット」、アルゴリズムが「RSA」になっていることを確認して「続ける」をクリック


    認証局へ証明書の要求


    証明書アシスタントに必要項目を記入


    鍵ペア情報の設定

    設定ファイルの作成とダウンロード (自分のマシンで開発する場合)

    • iPhone Dev Centerにidd@tamabiのメンバーとしてアクセス
    • 画面右にある「iPhone Provisioning Portal」にアクセス
    • 左側メニューから「Certificates」を選択
    • 「Request Certificate」をクリックして，次の画面で証明書要求のファイルを選択し、「Submit」をクリック
    • 完了するとリストに追加されるはず、「Approve」をクリックしてしばらく待つ
    • しばらく経ってからページを再読み込み
    • 先ほどのリストに「Download」のボタンが表示される、クリックして証明書をダウンロード
    • リストの下にある「WWDR intermediate certificate」もダウンロード
    • ダウンロードした2つのファイルをそれぞれダブルクリックで開き、「証明書の追加」ダイアログでOKをクリック
    • キーチェーンアクセスの分類「証明書」で、追加した証明書を確認


    Certificateのリクエスト画面


    証明書要求ファイルのアップロード


    証明書がダウンロード可能になった状態


    キーチェーンアクセスに登録された、証明書と秘密鍵

    デバイスの登録 (田所作業)

    • 開発用端末(iPhone / iPod Touch) の登録は田所が一括して行います
    • 「iPhone Provisioning Portal」左側メニューから「Devices」を選択
    • 自分の開発端末が登録されているかを確認


    登録されたデバイスのリスト

    プロビジョニングのインストール

    • Provisioning Profile – 登録された開発端末と開発者を結びつけるファイル
    • iTamabiのプロジェクト用に、iTamabiというProvisioning Profileが既に作成されている
    • 「iPhone Provisioning Portal」左側メニューから「Provisioing」を選択
    • リストから「iTamabi」のProvisioningの「Download」ボタンを押してダウンロード
    • Xcodeのメニューから「ウインドウ」→「オーガナイザ」を開く
    • Provisioningの項目にプロビジョニングのファイルをドラッグアンドドロップ
    • これで全ての手続きは完了!!


    Provisioningのダウンロード画面


    XCodeのオーガナイザに追加されたProvisioning

    ビルドと実行

    これで、iPhone/iPod Touchの実機に書き出す準備が完了しました。早速先週作成したiProcessingのプロジェクトを書き出して、実機で動作する様子をみてみましょう。

    iProcessingのプロジェクトを実機で動かしてみる

    • プロジェクトの設定をProvisioningにあわせて変更する
    • 変更する場所は3箇所
    • 「グループとファイル」のリストから[プロジェクトのアイコン]→「Resouces」→「info.plist」を選択
    • メニュバーの「エディタ」を選択、もしくはダブルクリックして内容を表示
    • 「Bundle identifer」のValueを変更
    • iTamabiの場合は「6W5N7VYNE9.${PRODUCT_NAME:identifier}」に


    info.plistの編集

    • 「グループとファイル」から一番上のプロジェクトのアイコンを選択した状態で、メニューバーの「情報」をクリック
    • 「コード署名ID」→「Any iPhone OS Device」の設定を「Don’t Code Sign」から登録したProvisioning Profileにする
    • iTamabiの場合は「iPhone Developper: [登録したDevelopper名]」になるはず


    コード署名IDの設定

    • 「グループとファイル」から「ターゲット」→ [実行ファイル名] を選択して、メニューバーの「情報」をクリック
    • 「コード署名ID」→「Any iPhone OS Device」の設定を「Don’t Code Sign」から登録したProvisioning Profileにする
    • iTamabiの場合は「iPhone Developper: [登録したDevelopper名]」になるはず
    • アクティブSDKの設定を「iPhone デバイス 3.1.3」を選択
    • 「ビルドと実行」をクリックしてビルド
    • 自動的にプログラムが実機に転送され、実行されるはず


    アクティブSDKの設定

    ライブはいいね

    昨晩は、superdeluxeでサタデーイブニングポストのレコ発ライブをみた。考えてみると、CDやネット配信の時代になっても「レコ発」って言葉は生きてるんだな。「CD発」って語呂が悪いからかもしれない。

    サタデーイブニングポスト、以前池尻のIIDのカフェでのライブ以来だったのだけれど、今回のライブもとても良かった。

    あと、対バンの「在日ファンク」っていうバンドがめちゃめちゃかっこ良かった。ボーカルのハマケンさんがJBのように華麗なステップを決めながら日本語でファンクを歌う。「環八ファンク」とか東京の道に詳しいともっと面白いんだろうなあ。「恋の山手線」が道路になってファンクになった感じ。

    飲んだくれてないで、こうやって、ふらっとライブに行くのも良い週末の過ごしかたかも。

    ひさしぶりにラン

    ここしばらく風邪気味だったので走っていなかったのだけれど、ようやく調子良くなってきたので久し振りにランニング。休養を十分にとったせいか、すこぶる快調。気持ち良く1時間走った。

    • 9.14 Km
    • 60.13 min
    • 738 Kcal

    イージング – アニメーションに表情をつける

    加速と減速について

    DVD「ノーマン・マクラレン作品コレクション」パイオニアLDC、より「ノーマン・マクラレンのアニメーション講座 2」を視聴

    • アニメーションの要素は、テンポの他にあと5つの動きに分類できる
    • 第2回ではその中の2つを紹介
    • その1：等速運動
    • 加速する動き
    • 加速の割合による動きの違い
    • 加速の割合によるスペクトラム
    • その2：減速する動き
    • 減速も加速と同様にその割合により動きが変化する
    • 加速〜等速〜減速と、動きは一連のスペクトラムで表現できる
    • 加速減速を利用することによる様々な表現
    • 重量(重い、軽い)、パンチ(強さの表現)、ソフトなタッチ、重力、弾力、遠近感

    モーショントィーンの高度な活用

    Adobeが提供する映像プログラムAdobeTVの映像を視聴

    • モーション　トゥイーンの作成:PART1 (13:51)

    • モーショントゥイーン作成のおさらい
    • 以前のバージョンとの比較(参考)
    • アニメーションパスの操作
    • キーフレームの表示について
    • カラーの変化
    • シンボルのドラッグによる動きの変更
    • ダイレクト選択ツールを使用したモーションパスの調整
    • アニメーション全体の長さの変更
    • シンボルの変更
    • モーションエディタについて
    • モーションエディタの画面の操作方法
    • イージングの設定

    イージングを利用した表現

    モーションエディタとイージングを駆使して、様々なニュアンスの表現にチャレンジ!

    • バウンド
    https://yoppa.org/wp-content/uploads/2010/04/01_bounce.swf,400,300
    • バウンドによる重量の表現
    https://yoppa.org/wp-content/uploads/2010/04/01_bounce1.swf,400,300
    • 強いパンチ
    https://yoppa.org/wp-content/uploads/2010/04/02_violent_punch.swf,400,300
    • ソフトなタッチ
    https://yoppa.org/wp-content/uploads/2010/04/03_touch.swf,400,300
    • プッシュ
    https://yoppa.org/wp-content/uploads/2010/04/04_push.swf,400,300
    • 衝突して跳ね飛ばされる物体
    https://yoppa.org/wp-content/uploads/2010/04/05_collision.swf,400,300

    サンプルファイルのダウンロード

    今回の授業ので使用したサンプルは下記からダウンロードしてください

    色について

    コンピュータの画面の復習

    • コンピュータの画面を拡大していくと…
    • 縦横に並んだ点の集合 → ピクセル (Pixel)
    • 一つのピクセルは、赤、緑、青の三原色から成り立っている


    液晶画面のピクセル

    コンピュータで絵を描くということ

    • コンピュータ画面は、縦横沢山のピクセルから構成された巨大なエクセルの表のようなもの
    • 例：1024 x 768 の液晶画面
    • 横に1024列縦に768行ならんだ巨大な表
    • それぞれのセルにR,G,B,A(アルファ値)が格納されている


    RGBAプレーン

    色の指定

    • 色を指定するには?
    • R(赤) G(緑) B(青)の三原色で指定する
    • 加法混色 (光の三原色であることに注意) ←→ 色料の三原色


    光と色料の三原色

    色の階調

    • R : 0 〜 255 → 2進数だと：11111111 = 8bit
    • G : 0 〜 255 → 2進数だと：11111111 = 8bit
    • B : 0 〜 255 → 2進数だと：11111111 = 8bit

    どのくらいの色を再現できるのか?

    • 256(R) x 256(G) x 256(B) = 16,777,216 (24bit)
    • これに加えて透明度を255階調加えたものが、32bitカラー。最近のPCのほとんどは、32bitカラーを表現可能。
    • 24ビットカラー (24-bit color)、および32ビットカラー (32-bit color) は「トゥルーカラー」(Truecolor) と呼ばれる

    色の指定(復習)

    3つの色の属性

    • 背景色 background関数
    • bacground(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);
    • 線に色をつける stroke関数
    • stroke(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);
    • 塗りの色をつける fill関数
    • fill(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);
    • 線を描きたくないとき
    • noStroke();
    • 塗り潰しの色を付けたくないとき
    • noFill();
    • 例
    size(400,300);
background(255);

strokeWeight(12);
smooth();
noFill();

stroke(0,133,199);
ellipse(70,120,106,106);

stroke(244,195,0);
ellipse(135,173,106,106);

stroke(0);
ellipse(200,120,106,106);

stroke(0,159,61);
ellipse(265,173,106,106);

stroke(233,0,36);
ellipse(330,120,106,106);


    オリンピック!!

    HSBによる色の指定

    • RGB以外の色の指定方法
    • HSB色空間、HSV色空間とも言う
    • 色相 (Hue)：色の種類
    • 彩度 (Saturation)：色の鮮かさ
    • 明度 (Brightness, Value)：色の明かるさ
    • プログラミングしながら色を指定する場合は、HSBの方が直感的に望みの色を指定し易いことも多い
    • HSBモデルのあり方が人間が色を知覚する方法と類似している
    • HSB色空間の視覚イメージ
    • 円錐のイメージ
    • 色相：外環の角度、彩度：中心点からの距離、明度：高さ


    錐体のHSB色空間

    HSB (HSV) 色空間への切替方法

    • colorMode関数を使用する、それぞれのパラメータの範囲も同時に指定
    • 例：色相：360階調(°), 彩度：100階調(％), 明度：100階調(％)

    colorMode(HSB, 360, 100, 100);

    演習：色彩のハーモニー

    色を美しく配置する演習

    • 正方形(600 x 600)のキャンバスを縦に3つ、横に3つ、合計9つの正方形に分割し、それぞれを別の色で塗り分けてみる
    • 自分のなかでバランスが取れていると思える配色・配置に
    • 配色ができたらタイトルを付けてみる

    例1

    size(300,300);
colorMode(HSB,360,100,100);
noStroke();

//1行目
fill(210,89,64);
rect(0,0,100,100);
fill(2,77,80);
rect(100,0,100,100);
fill(232,13,47);
rect(200,0,100,100);

//2行目
fill(183,68,62);
rect(0,100,100,100);
fill(31,98,85);
rect(100,100,100,100);
fill(256,52,43);
rect(200,100,100,100);

//3行目
fill(169,68,29);
rect(0,200,100,100);
fill(193,98,55);
rect(100,200,100,100);
fill(250,8,28);
rect(200,200,100,100);


    マーブルチョコ?

    例2

    size(300,300);
colorMode(HSB,360,100,100);
noStroke();

//1行目
fill(36,42,100);
rect(0,0,100,100);
fill(72,34,100);
rect(100,0,100,100);
fill(60,30,70);
rect(200,0,100,100);

//2行目
fill(170,30,80);
rect(0,100,100,100);
fill(160,30,70);
rect(100,100,100,100);
fill(350,20,100);
rect(200,100,100,100);

//3行目
fill(240,10,70);
rect(0,200,100,100);
fill(240,4,80);
rect(100,200,100,100);
fill(0,10,70);
rect(200,200,100,100);


    パステル

    配色のヒント1

    • HSBの要素を一つだけを連続的に変化させる

    彩度の変化

    size(300,300);
colorMode(HSB,360,100,100);
noStroke();

//1行目
fill(20,100,100);
rect(0,0,100,100);
fill(20,70,100);
rect(100,0,100,100);
fill(20,40,100);
rect(200,0,100,100);

//2行目
fill(120,100,100);
rect(0,100,100,100);
fill(120,70,100);
rect(100,100,100,100);
fill(120,40,100);
rect(200,100,100,100);

//3行目
fill(200,100,100);
rect(0,200,100,100);
fill(200,70,100);
rect(100,200,100,100);
fill(200,40,100);
rect(200,200,100,100);


    彩度の連続的な変化

    明度の変化

    size(300,300);
colorMode(HSB,360,100,100);
noStroke();

//1行目
fill(20,100,100);
rect(0,0,100,100);
fill(20,100,70);
rect(100,0,100,100);
fill(20,100,40);
rect(200,0,100,100);

//2行目
fill(120,100,100);
rect(0,100,100,100);
fill(120,100,70);
rect(100,100,100,100);
fill(120,100,40);
rect(200,100,100,100);

//3行目
fill(200,100,100);
rect(0,200,100,100);
fill(200,100,70);
rect(100,200,100,100);
fill(200,100,40);
rect(200,200,100,100);


    明度の連続的な変化

    色相の変化

    size(300,300);
colorMode(HSB,360,100,100);
noStroke();

//1行目
fill(0,70,100);
rect(0,0,100,100);
fill(20,70,100);
rect(100,0,100,100);
fill(40,70,100);
rect(200,0,100,100);

//2行目
fill(60,70,100);
rect(0,100,100,100);
fill(80,70,100);
rect(100,100,100,100);
fill(100,70,100);
rect(200,100,100,100);

//3行目
fill(120,70,100);
rect(0,200,100,100);
fill(140,70,100);
rect(100,200,100,100);
fill(160,70,100);
rect(200,200,100,100);


    色相の連続的な変化

    配色のヒント2

    • 写真から色をピックアップする
    • 有名な絵画からピックアップする
    • 配色の綺麗なWebサイトから色をピックアップする


    「モナリザ」レオナルド・ダビンチ


    「睡蓮」モネ

    次回授業までの課題

    • 自分自身の観点から、美しいと思う配色を作成する
    • 300x300pixelの画面を9分割した正方形に配色すること
    • 作成の方法は自由 (イメージからピックアップ、HSBの数値を工夫するなど)
    • 作成した配色は、エクスポートして、アプレットを以下にアップロードすること
    • http://www.cuc.ac.jp/~学籍番号/proga/assignment1/

    映像の視聴

    DVD「colorcalm by Design」

    • Art Barcodes – 映像×音楽：イルマ・ブーム×マイケル･ナイマン
    • Food Coloring – 映像×音楽：ジョン前田×坂本龍一
    • Colour Wheel – 映像×音楽：ピーター・サヴィル×ニュー・オーダー／テラノヴァ
    • Blue to Red Elegia – 映像×音楽：ピーター・サヴィル×ニュー･オーダー


    「Art Barcodes」より

    参考：Art Barcodesを自動生成してくれるWebサイト

    Max/MSP入門2 – 様々な音響合成、サンプリング&プレイバック導入

    サンプルファイルのダウンロード

    解説で触れた全てのファイルはダウンロード可能です。以下のリンクからダウンロードしてください。

    課題「4つ以上のオシレータを使用した楽器」のミニ講評回

    • 課題をB-labのファイルサーバにアップ
    • ひとりずつ、作成したパッチの簡単なデモ+解説をお願いします

    パッチを便利にする工夫

    GUI機能

    • Numberboxをマウスでドラッグして数値を変更することも可能だが、UIの使い易さとしては若干不親切
    • Max/MSPには、便利なGUIパーツが多数用意されている
    • 数値を設定 – diarl、slider、multiSlider
    • シグナルのゲイン(音量)の設定 – gain~
    • 鍵盤 – keybord
    • 複数の値を設定 – multiSlider
    • (x,y)平面にグラフを描いて、その値を記録 – function

    GUI機能の使用例


    dial sliderでオシレータの周波数を設定、gain~で音量を設定


    keybordで音程を入力、functionでエンベロープ(音の時間的変化)を設定


    multisliderで複数のオシレータの周波数と音量をコントロール

    パラメータの記憶、preset

    • パフォーマンスの前に、大量のパラメータを設定していくのは大変
    • preset を使用することで、ナンバーボックスや slider や dial などの値を記憶することができる
    • パラメータを記憶させたくないオブジェクトには、preset の第3アウトレットの出力を入力する
    • shift + クリックで値を記憶、クリックで記憶した値に設定


    multislider の例に preset 機能を付加

    cycle~ 以外のオシレータ

    • rect~ – 矩形波
    • saw~ – ノコギリ波
    • try~ – 三角波
    • noise~ – ホワイトノイズ

    シグナルのふりわけ

    • selector~


    いろいろな波形のオシレータを切り替えて再生

    左から、sin波、矩形波(パルス)、ノコギリ波、三角波

    send と receive

    • パッチケーブルなしにメッセージをやりとりする
    • 送信側「s hoo」受信側「r hoo」※hooの部分は任意に名前をつける
    • シグナルの場合は、「send~ hoo」「receive~ hoo」


    send と receive

    サブパッチを使用する

    • 同じようなオブジェクトのブロックがくりかえし用いられている場合、サブパッチ化したほうがすっきりとまとまる
    • 「p patchname」というオブジェクトを作成し、ダブルクリックすると中にもうひとつパッチが出現する
    • サブパッチへの入力は「inlet」、サブパッチから出力は「outlet」


    エンベロープ付きのオシレータをサブパッチ化する


    サブパッチ「partial」

    プレゼンテーションモード

    • プレゼンテーションモード – 選択したオブジェクトだけを画面上に残して、余計な部分は隠してしまうことができる
    • パッチをunlockして編集している状態で、オブジェクトを選択し、[option] + クリックでメニューを表示して、その中から”Add to Presentation” を選択
    • 画面下のPresentation Modeボタンを押すと、登録したオブジェクト以外は表示されなくなる
    • この状態で、表示されたオブジェクトを、自分の好きな場所に再配置することも可能
    • より洗練されたGUIを構築可能

    エンベロープ付きのオシレータをサブパッチ化したものを、プレゼンテーションモード化

    いろいろな音響合成の手法

    加算合成

    • 音の足し算による合成
    • すべての周期のある波形は理論的にsin波とcos波の組み合わせで表現することができる → フーリエ級数展開
    • 歴史は古い – パイプオルガン、ハモンドオルガン
    • 倍音成分を多く含んだ複雑な音色は合成が困難
    • サブパッチの例で作成した cycle~ を足しあわせるサンプルが、まさに加算合成


    パイプオルガン – 加算合成を利用した楽器


    加算合成の例

    減算合成：

    • 音の引き算による合成
    • 倍音成分をたくさん含んだ音(ノコギリ波、パルス波など)もしくはノイズを、フィルタで削っていく
    • アナログシンセサイザーの多くは、減算合成を使用
    • 比較的に、直感的な音作りが可能


    Moogシンセサイザ – 減算合成方式を使用


    減算合成の例

    変調合成1：音量の変調 – AM (Amplitude Modulation)、RM (Ring Modulation)

    • 変調 – 元になる信号のパラメータを別のオシレータをつかって変化させる
    • 信号の振幅(= 音量)をオシレーターで変化させる – RM変調、AM変調
    • 変調させるオシレータの振幅の範囲が、-1.0〜1.0の場合 – RM変調
    • 変調させるオシレータの振幅の範囲が、0.0〜1.0の場合 – AM変調

    RM変調合成の例


    AM変調合成の例

    変調合成2：周波数の変調 – FM (Frequency Modulation)

    • 信号の周波数を別のオシレータで変調する音響合成方式
    • ジョン・チョウニングを中心としてスタンフォード大学のCCRMA（Center for Computer Research in Music and Acoustics）で開発
    • ヤマハがライセンスを受け実用化 (1975)
    • Yamaha DX7 (1983) が80年代の音楽シーンを席巻
    • わずかなパラメータで非常に複雑な倍音成分をもった音響を生成することが可能


    YAMAHA DX7


    FM変調合成の例1 – シンプルなFM


    FM変調合成の例2 – エンベロープ付きFM


    サブパッチ「simplefm」キャリアとモジュレータの比率からFM合成する

    サンプリング&プレイバック導入

    課題「サンプリング&プレイバックを使用したライブパフォーマンス」

    • adc~ record~ buffer~ waveform~ groove~ を使用したサンプルパッチを配布
    • adc~ – オーディオ信号を入力する
    • record~ – 入力した信号をbuffer~に記録する
    • buffer~ – 入力したオーディオを格納する場所、[read]メッセージを使用してサウンドファイルを読みこむことも可能
    • waveform~ – buffer~ に格納された音を波形表示する、表示した波形の一部を選択する
    • groove~ – buffer~ に格納された音を様々な手法で再生することができる、ループ、ピッチの変更、ランダムに読み出しなど
    • サンプルパッチを改造して自分専用のライブパフォーマンス楽器を作成する


    サンプリング&プレイバックのサンプル