LiveCode ノート

音楽ファイルでドローイングを描く 16

音楽ファイルからドローイングを作成するアプリを作っています。前ページでも書いたように、開発の大体の方向はありますが、最終的な形を現在考えている訳ではありません。制作ノートと思って読んでください。「Study 01」は省いて「Study 02」から書き出します。AnimationEngine5はLiveCode10では動かないので、LiveCode 9.6.6で開発しています。
Study 01 ビデオに興味があれば

Study 02

MP3ファイルをプレイヤー・オブジェクトに設定

前にD&Dでプレイヤーにファイルを設定する方法をやっていますが、ここではボタンからファイルを選んで設定する方法をとりました。

ボタン「setMusicFile」

on mouseUp
   answer file ""
   put "" into fld "tBinary"
   set itemdel to "/"
   put the last item of it into fld "tMusicName"
   set cursor to watch
   lock screen
   -- ファイル名「Illusion of the Statue_5s.mp3」
   set the filename of player 1 to it
   put "" into fld "tBinary"
   -- fld "tBinary"にバイナリの文字列を入れる
   put url("binfile:"& the filename of player "tPlayer") into fld "tBinary"
   -- バイナリ文字列の総キャラクター数　97472 
   put the length of fld "tBinary" into fld "tNumCharsBinary"
end mouseUp

これで音楽ファイル「Illusion of the Statue_5s.mp3」が、左にあるフィールドに入りました。これはわざわざ見せる必要はありませんが、この段階で理解しやすいようにフィールドに入れました。私が作った曲「Illusion of the Statue」の５秒間をサンプルに使っています。元々はMIDIで作った曲でしたが、変換アプリを使ってMP3としたものです。 始めの文字列はMP3ファイルのヘッダーのようですが、どこまでがそれか私には現在判断できません。

この段階でフィールドに入っているバイナリーの文字列が、果たして元のMP3ファイルに戻るのか確認しておきます。フィールド名を「tBinary」としていますから、下のスクリプトを入れたボタンで元のMP3に戻るはずです。そのためのボタンは「Study2」のビデオには作っていません。

on mouseUp
   ask file "Please name the mp3 file:"
   if char -1 to -4 of it <> ".mp3" then
      put ".mp3" after it
   end if
   put fld "tBinary" into url("binfile:"& it ) 
end mouseUp

もとの音楽ファイルと同じと確認できます。最終的に描いたドローイングから、もう一度始めのMP3ファイルに戻す作業をするかと思いますから、そのための準備でもあります。

わずか5秒のファイルに「97472chars」のバイナリーが入っています。一つ一つのキャラクターでドローイングを描いてゆくと膨大な画数になってしまうので、3文字づつをまとめてXYZの座標に当てはめるドローイングとします。そのためにAnimationEngineの3Dドローイングを使用します。

LiveCodeのバイナリー文字を10進数に変換するシンタックス

charToNum(character)

バイナリーのキャラクターは0から255までの数字（10進数）に変換できます。「LiveCode 07 バイナリを10進数に」にあります。3Dとすることででドローイングのポイント数を３分の１に縮小します。

ボタン「Binary Data to 3D Points」

on mouseUp
   put fld "tBinary" into tData
   -- 作った3Dポイントのリストをカードの
   -- 	カスタム・プロパティ「cMusicPoints」として格納しておく
   set the cMusicPoints of this card to makePoints(tData) 
   -- 「cMusicPoints」の行数が3Dポイントの数　32491 
   put num of lines of the cMusicPoints of this card \
   		into fld "numOf3DPoints"
end mouseUp

-- 3D座標に変換するファンクション
private function makePoints @pData
   set the cursor to watch
   repeat with i=1 to the num of chars of pData step 3
      if char i of pData is empty then exit repeat
      put charToNum(char i  of pData) into X1
      put charToNum(char i  + 1 of pData) into Y2
      put charToNum(char i  + 2 of pData) into Z3
      put X1 & comma & Y2 & comma & Z3 & cr after zahyo
   end repeat
   return zahyo
end makePoints

カスタム・プロパティ「cMusicPoints」にある3Dポイントは32491あるので、これを全て一つのドローイングにしてしまうと、線の重なりでドローイングではなく大きな塊になってしまいますから、もう少し適当なサイズに分散させてドローイングのポイントとすることにしました。

とりあえずテストとして30個のドローイングを描くことにします。32491の3Dポイントを1100づつのポイントに分散させると30個のドローイングを描くことになります。最後は591の3Dポイントです。

このスクリプトも特にこう言う形にする必要はないのですが、スタディでの視覚上の確認です。
ボタン「Line 1 to 1100 of 3D Points」

on mouseUp
   put fld "numOf3DPoints" & " div 1100 = " & fld "numOf3DPoints" div 1100 \
   		into fld "howManyTimes"
   put "mod " & fld "numOf3DPoints" mod 1100 into fld "tMod"
   put line 1 to 1100 of the cMusicPoints of this card into fld "1100Lines"
   set the c3DPoints of grc "threeD" of grp "3D" to line 1 to 1100 of \
   		the cMusicPoints of this card
end mouseUp

これで下準備ができたので、ドローイングを描きます。3D座標を２次元に描くには少しAnimationEngineについて知っていなければいけません。基本的には私の書いた「アニメエンジン日本語ノート」の「ae3dconverttoscreen」を読んでください。「アニメエンジン日本語ノート」ではシンプルに3D座標を２次元に描く方法が書いてあります。

現在作業しているメイン・スタック「nav」のサブスタックにAnimationEngineを設定しなくてはいけません。AnimationEngineを開いたらメッセージ・ボックスから

set the mainStack of stack "animationEngine" to "nav"

を送ります。このスタックをオープンした時にAnimationEngineが使えるように

スタック「nav」にスクリプトを書きます

on openStack
   start using stack "animationEngine"
end openStack

今やっている3Dドローイングでは、ポイントが増えるに従って線を伸ばして、視覚上のアングルも変化させるアニメーションにします。

カードに入れるスクリプト

-- グローバル
global gMovePointOptionID, gAngleY 

-- アングルYを変えながら3Dドローイングを描いてゆく
command move3D gAngleY
   lock screen
   -- 60ミリセコンド条件が満たすまでこの「コマンド move3D」を繰り返す
   send move3D to me in 60 milliseconds
   -- 60ミリセコンドのループをキャンセルするID 
   put the result into gMovePointOptionID
   
   -- 現在カスタム・プロパティc3DPointsに書き込まれているポイント・データ
   put the c3DPoints of grc "threeD" of grp "3D" &cr into t3dPoints
   put 0 into tAngleX
   -- 現在のスクロール・バー「angleY」のアングルYの数値
   put the thumbPos of sb "angleY" of grp "3D" into gAngleY
   put 0 into tAngleZ
   
   -- ドローイングを描く「threeD」の下にあるカラーのグラフィック「base3D」
   set the loc of grc "base3D" of grp "3D" to  \ 
   		item 1 of the loc of sb "angleY" of grp "3D", \
   			item 2 of the loc of grc "threeD" of grp "3D" 
   
   -- カスタム・プロパティc3DPointsに書き込まれているポイント・データを描く
   -- 「Moving 3D View」からは、Yアングルが変化するごとにポイント数が増える
   repeat for each line tLine in t3dPoints
      if tLine = "" then
         put return after output
         next repeat
      end if
      -- animationEngineのスクリプト
      put rotateIsoPoint(item 1 of tLine,item 2 of tLine,\
            item 3 of tLine,tAngleX,gAngleY,tAngleZ) into theLine2
      put ae3dconverttoscreen(theLine2,the loc of grc "base3D" of \
      	grp "3D",3000 ) & return after output
   end repeat
   set the points of grc "threeD" of grp "3D" to char 1 to -2 of output
    
   set the loc of grc "threeD" of grp "3D" \
   		to the loc of grc "base3D" of grp "3D"
   set the rect of grc "base3D" to the rect of grc "threeD"
   unlock screen
end move3D

-- コマンド「move3D」を終了させる
command cancelID
   cancel gMovePointOptionID
   repeat for each line tLine in the pendingMessages
      if "gMovePointOptionID" is among the items of the pendingMessages then
         cancel (item 1 of the pendingMessages) 
      end if
   end repeat
end cancelID

グループ「3D」の中には、「sb"angleY」「grc"base3D"」「fld"Label Field"」「fld"lineCounter"」「grc"threeD"」があります。


この中で「sb"angleY」だけ、カードに書いたコマンド「command move3D」を使ったスクリプトが書かれています。

スクロール・バー「angleY」に入れるスクリプト

global gGrpName

on mouseDown
   put the short name of the owner of the me into gGrpName
   move3D 
end mouseDown

on mouseUp
   cancelID
end mouseUp

実はこの中のグローバル「gGrpName」は現在必要ありませんが、ドローイングされるグラフィック（グループ「3D」) が増えて来た時、そのターゲットを指定する際に必要となります。

最後にボタン「Moving 3D View」のスクリプト

global gGrpName

on mouseUp
   if the cMusicPoints of this cd is "" then 
      -- 音楽ファイルがセットされていない
      beep
      exit to top
   end if
   -- 空白のドローイングから始める
   set the c3DPoints of grc "threeD" to ""
   --  ドローイングする3Dポイント
   put fld "1100Lines" into t1100Lines
   put number of lines of t1100Lines into tAllLines
   -- アングルYを0から始める
   put 0 into tAngleY
   
   repeat with i= 1 to tAllLines
      put i into fld "lineCounter"
      
      -- 作業を中止をしなくてはいけない時のためマウス・ダウンしたらスクリプトから拔ける
      if the mouse is down then exit to top  
      
      set the c3DPoints of grc "threeD" to the c3DPoints of grc "threeD" & line i of t1100Lines &cr 
      set the thumbpos of sb "angleY" to tAngleY
      put the short name of the owner of grc "threeD" into gGrpName
      
      -- 描画するコマンド
      move3D 
      cancelID
      
      -- Yアングルを1度変える
      add 1 to tAngleY
      if tAngleY >= 360 then put 0 into tAngleY
      
   end repeat
   put tAllLines into fld "lineCounter"
end mouseUp

次の予定はフルスクリーンで別ウインドウを開き、複数のドローイング・グループを作る。

文章の暗号化・復号化

次はまだない

---

アーチスト：小島健治 / Artist: Kenji Kojima