File05. ついでにこれもやっとこう

- 242.qdでお絵書き -

● 前章では242.3dでQuickDraw3Dについて試してみましたが、ついでにQuickDrawオ ブジェクトである242.qdを見てみましょう。QuickDrawオブジェクトといえば、Maxにも、LCDやgraphicsなどがありますので、特に目新しくはないかもしれません。しかし、後のFileで御紹介する(つもりです(笑))の画像合成の素材と考えると、いろいろ使い道もあると思います。LCDやgraphicsを使ったプログラミングに慣れていらっしゃる方は、コマンドの微妙な違いに気をつけていただくとよいでしょう。
01. 242.qdで点を打ってみる
 QuickDrawによる描画の最初は、まず点を打ってみることから始めます。242.qdでは、座標値(x.y)を引数として[point]コマンドを与えることで点が打てます。下の図を見て下さい。

 座標の原点(0,0)は 領域の左上隅がで、yの値は下方向が正の値になります。座標の指定はすべてこのような形になります。普通の「x,yグラフ」とはy方向が逆になってますので注意して下さいね。

図05_01

これを利用して作ったのが、下の簡単な「お絵書き?」パッチです。

図05_02a

 242.ekran04に[mousetrack 1]というコマンドを送ってマウスの位置を出力させ、その座標値を242.qdに与えています。ドットの大きさは[pensize $1]で与えています。242.qdのオフスクリーンのサイズと242.ekran04の表示サイズを、同じ240x180にわざわざ設定しているのは、マウスの位置と描画される位置がズレないようにするためです。
 ドットの色は[fgcolor $1 $2 $3]にRGB値(0〜65535を3つ)与えることで設定しています。バックの色は"fgcolor"の代りに"bgcolor"として同様に指定します。
 RGB値を設定するマルチスライダ(multiSliderオブジェクト)は"displayColor"というサブパッチを経由させて、サンプルの色を表示させています。このサブパッチは、natoのhelpにあったものを少し簡略にしたものです。次の図を見て下さい。

図05_02b

 ここにも1つ242.qdオブジェクトが隠れています(笑)。実は、図05_02で、このサブパッチの左側で色を表示していたのは小さな242.ekran04オブジェクトで、サブパッチにある242.qdが色を表示させていたんですね。
 [fillrect 0 0 160 140]は4つの座標値に囲まれた長方形を[fgcolor $1 $2 $3]で指定した色で塗りつぶすコマンドです。QuickDrawには、このような描画コマンドがいくつかあり、242.qdでも実装されています。

02. 図形の描画
 242.qdには、色々な形の図形を表示するコマンドもあります。直線を描画する [line]や、長方形 [rect]、楕円 [oval]、円弧 [arc]、角丸長方形 [roundrect] などがあり、直線以外の各図形には直線だけのもの(アタマに"frame"がつく)と塗りつぶしたもの("fill"がつく)の2種類があります。下のパッチ図を見て下さい。

 

図05_03

 コマンドの引数は、4つのものと6つのものがあります。4つのものは、それぞれ左上と右下のx,y座標を表しています。この場合も、原点(0,0)は表示領域の左上隅で、y座標は下が正の方向になってます。

03. 文字の描画
 242.qdでは、テキスト(文字)を描画することもできます。[text x座標、y座標]問いうコマンドで描画します。テキストのフォント、サイズ、スタイル(”斜体”、”下線つき”、”ボールド”等)を指定することもできます。こんな感じです。

図05_04

 フォントは、[fontフォント名]で、サイズは[fontsize]に数値の引数をつけて、スタイルは[textface]に引数をつけて指定できます。スタイルの引数は、太字(ボールド)は1、斜体(イタリック)は2、下線付きは4といったように2の累乗の値になっていて、これらの組み合わせで指定(ボールドで下線付きなら1+4 = 5になります)することができます。プログラミングに詳しい方なら、「対応するビットを立てている」といえば解りやすいかも知れませんね。
 テキストの色は、図形の場合と同様、描画する前に[fgcolor R値 B値 G値]で指定します。

04. ペン位置を指定して描画
 これまでの描画コマンドは、コマンドと一緒に位置を引数として指定するものでしたが、あらかじめペン位置を指定しておいて、そのペン位置に描画するようなコマンドもあります。

図05_05

 [text2]、[point2]、[illpolyagon2] などがそうです。あらかじめ位置を指定するために引数が少ないだけで、基本的には同じように使えます。

05. お絵書きパッチ(その2)
 242.qdの描画については、だいたいこんなところなのですが、サンプルをいくつか挙げておきましょう。[point]の例で、超簡略お絵書きパッチ?(笑)を載せましたが、ここではもう少し複雑な例を見てみましょう。「お絵書き」目的には実用になるようなものではありませんが 他の処理(サウンド処理とか、MIDIとか)をユーザがコントロールする時の表示とかには使えるかも?。
 実際に描く場合には、図形の左上位置でマウスをクリックし、そのまま右下位置までドラッグします。図形は、中央のメニューで指定できるようになっています。

図05_06

 [point]の時と同じように、[mousetrack 1]コマンドを242.ekranに送って、マウス位置を取得しています。ここでは、「マウスをクリックした所」とドラッグしてから「マウスボタンを離した所」を引数として取り出しています。いろいろ試してみたところ、242.ekran04の座標位置の出力はマウスを少しでも動かさないと行われないので、クリックしたところ(実際には動き始めた所)の値が出力されると図の右側の[pack s 0 0 0 0]の2つめと3つめの引数(実際には2つの項目のリスト)として格納されます。このとき、この値自身をトリガとしてgateを閉めてしまいます。
 [t b l]というオブジェクト(正確には"trigger"というMaxオブジェクトですが、"t"と省略して使えます。bとlはそれぞれbang、リストとして出力するための引数です。)でトリガのタイミングを調整しています。"trigger"は結構多用してますね。4つめと5つめの引数(リスト)は常に送られ続けていますから、マウスが動いていくとそれにつれて新しい値が格納され続けます。上の方にある[mousefilter]は、マウスボタンを離した時に反応してbangを出すMaxオブジェクトです。これを利用して、マウスボタンが離されたときに、選択されている図形を描画するようなコマンドを送り("gate 5"のところですね)描画します。(packは第1引数を受け取った時、またはbangを左インレットに受け取った時にリストを出力しますので、それまでに受け取っていた他の引数といっしょに、この時はじめて出力します。)
 描画と同時に、最初に自分自身をトリガとして閉じられた右上の[gate]をオープンして次の描画に備えます。
 「消しゴムモード」は背景色で描画するため、図形を消しているように見えると思います。背景色の値をあらかじめ図の中程にある[$1 $2 $3]というメッセージボックスで取得しておきモードがオンになると[fgcolor]として送り出します。オフになると、描画色を指定しているマルチスライダにbangを送って、再度、描画色の値による[fgcolor]を送って色を戻します。

06. 関数で描く
 CGの定番(笑)、関数を使って描画してみたのが次のサンプルパッチです。ここではリマソン(過牛線)(赤の部分はカージオイド(心臓形))と呼ばれる図形を描いています。

図05_07a

 実際に描画データを作っているのはdrawfuncというサブパッチです。下の図を見て下さい。

図05_07b

 counterオブジェクトは整数を出力しますので、これを0.01倍(floatにキャスト(intから型変換)されます)して-πからπまでの値を0.01刻みで出力するようにしています。
 x、yの値の計算はexprオブジェクトで行っています。描画のためにはこれを適当にスケールし整数化して、原点の位置やy軸の正方向を調整する必要があります。計算結果に50を掛けているのは、サイズを調整するためです。また、原点の位置を調整するために、xには180をプラスし(原点を右へ180移動したことになりますね)、yからは120を引いて-1を掛けて(向きを逆にして、120下へ移動することになります)います。結果は、ここでは点ではなく小さな円(pensize 5)として描画しました。

07. サウンドレベルのグラフ
 関数による描画を利用して、サウンドのレベルをグラフ表示してみたのが、次のパッチです。パッチ図は内臓マイクからのサウンドを表示しているところです。
 

図05_08a

 パッチ図を見て下さい。まずマイクからサウンドが入力されると、左右のチャンネルを足して2で割って値を-1〜+1にします。このままではシグナルですから、snapshot~を使ってfloatに変換します。レベルを表したいので絶対値をとるためにabsオブジェクトを使っています。
 これを表示サイズに合わせてスケールし、座標値を計算させています。またy軸の表示サイズの初期値は320x240です。
 座標軸、目盛り表示のために、下10ピクセルと左30ピクセルを使用しますので、実際のグラフは290x230の範囲に描くことになります。座標値は0から始まりますから、0〜289と0〜229の値を使うことになります。(本当は、軸の線の幅などもちゃんと考慮すべきですが、ここでは手抜きしています。
 [line]コマンドを使いますので、引数は4つ(x,yペアを2組)です。xの値はcounterを使ってシリアルに出力していますので1を足した値と共に使います。最後の値は0(座標値では30)として使います。(selectオブジェクトを使って、メッセージ30を送っています。)
 問題はyの値です。ここでは、BucketというMaxオブジェクトを使ってみました。Bucket(バケツ(^^;))はバケツリレーのように、最初に入力した値をアウトレット間を移動するように出力していきます。つまり、まず値a1が入力されると左アウトレットからa1が出力され、次に値a2が入力されると、左アウトレットからa2、ひとつ右寄りのアウトレットからa1が出力されます。アウトレットの数は引数で指定できます。
 ここではアウトレットは2つにし、[R2L]というメッセージを送って通常と逆(右->左)へ出力が移動していくようにしています。こうすることで、1つ後のyの値とペアにして出力しようというワケです。yの値はスケールしたあと-1を掛けて、描画サイズ(縦)を足しています。こうすれば0のときに最も大きな座標値(最も下に描画)、最大入力のときに最も小さい座標値(最も上に描画)となって、通常のグラフの表示と一致します。

 サプパッチdrawaxisの中は次のように(図05_07b)なっています。またさらにその中にあるサブパッチinitaxisはその下(図05_07c)にあります。drawaxisはx軸、y軸と目盛りの値、補助目盛り線を引きます。補助目盛り線は点線にしたいので、繰り返し処理で点を打つようにしてあります。
 また、initaxisは描画色、フォントサイズ、グラフのペンサイズを初期化します。必要に応じてこれらを変更する場合にも使います。

図05_08b

図05_08c

 このサンプルは、アプリ版もおいておきますので、よろしかったら試してみて下さい。

08. まとめ
 ここで御紹介したのは、242.qdの基本的な機能です。いわばQuickDrawの説明といったところでしょうか。しかし、これらは1つの素材として考えることができます。たとえば、他の画像と合成したり、操作のインターフェイスとして使ったり等いろいろ可能性はあると思います。
 最後に、242.qdの代表的な機能をまとめたサンプルパッチを載せておきます。

図05_09

back