プッシュスイッチ (Push Switch)

説明：

電子回路でも重要な部品の１つ、プッシュスイッチ（押しボタン）です。押した後の動作が異なる３種類のスイッチを作ってみました。

基板に直付けする「タクトスイッチ」はモーメンタリスイッチの一種です。

動作：

左(緑)：モーメンタリSW [(ON)-OFF, SPST Momentary]

中(赤)：オルタネイトSW [ON-ON, SPST Alternate]

右(黄)：オルタネイトSW（ロック式）[ON-ON, SPST Alternate, Hold]

見所：

オルタネイト動作（押すたびに ON/OFF を切り替える）はカウンタで実装。出力のMOD 2 をとることで1,0 に変換している。

UI 表現としては、「スイッチ以外のところで押す、あるいは離す」を無効にしている点に注目。ドラッグ＆ドロップのMode 4 の応用です。

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

ドラッグ＆ドロップ (Drag and Drop)

説明：

QC にはUI (User Interface) 用のPatch がありません。ボタンなどが必要な場合は、 Xcode & Interface Builder を使って、Cocoa アプリケーションとして仕上げるのが、本来の使い方になります。

本blog はUI の勉強を兼ねて、QC のPatch を組み合わせて、UI 部品を作っていくことにします。手始めにDrag & Drop を実装します。

動作：

・画像をDrag & Drop することができます。（Mode 1 以外）

・カーソル(↑)キー でモードを切り替え

見所：

Mode 1 はマウスに合わせて画像が動きます。Drag & Drop ではありません。

Mode 2 はマウスをクリックしている間のみ、マウスに合わせて動きます。簡易Drag & Drop です。

Mode 3 はマウスをクリックした場所と、画像との距離を保ったまま、動きます。

Mode 4 は画像の上でクリックしたのみ、Mode 3 の動作をします。

解説：

UI は領域判定や、クリックの順序など、細かい挙動を詰めていくほど、自然な動きになります。例えば、Mode 3 では画像の外でクリックしても、Drag & Drop できてしまいます。

Mode 4 では領域上でドラッグを「開始」したかどうかを判定しています。「領域上にいるか」だけの判定だけでは、画像の外でドラッグを開始し、画像の上にカーソルが来た場合、画像を押してしまいます。

オブジェクトが１つの場合はこれで完成ですが、複数のオブジェクトが有る場合は、それぞれの重なりを判定する必要があります。また、画像の透明部分を判定すると、より自然になります。

判定部分をJavascript で書けばもう少し簡単になると思うので、UI 部品シリーズは次回からJavascript Patchを使う予定です。

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

時間のコントロール 発展編 (Time Control Part.3)

説明：

前回はLFO の位相をコントロールして、時間波形を表示しました。他のパッチでも同様のことが出来ます。

動作：

・オシロスコープの動作は前回と同様。

・今回追加したオレンジ、緑、水色のラインは「Osillo Scope with SG マクロ」の内部で指定する。

見所：

「Osillo Scope with SG マクロ」の内部を見てください。

Math Patch の「a * (1/b)」、「a * sin(360*10*b)/b」と、「Timelines (y = f(x) )」が追加された線のY 座標になります。

Timelines パッチは時間のコントロール(初回)で解説しました。時間に対応する出力をベジェ曲線で設定することができます。これを、任意信号発生器 (Arbitrary Waveform Generator) と見なすことができます。

この線のみ、左端が(t=0) です。その他は中央が(t =0) になるようにオフセットしています。

もう一つ、Mathematical Expression パッチで、横軸 x に対する関数 f(x)を書くことが出来ます。

例では小学校でやった反比例 (y = 1/x)と、情報系で基本となるSinc 関数 (y = sinc(x) = sin(x)/x) を表示しています。

どちらも0 に収束していく（が、0にはならない）様子が観察出来ます。

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

時間のコントロール 応用編 (Time Control Part.2)

説明：

前回は、Patch Time のコントロールができることを説明しました。これを利用して、LFO Patch の動きをみることができる、オシロスコープを作ってみました。

動作：

・カーソルキー(↑)でスタートストップ、リセット

・「Oscillo Scope with SG」マクロのパラメータで表示する信号を調整

- SG(Signal Generator) の設定として、波形(Type), 色(Color), 周波数(Cycles), 振幅(Amplitude), デューティ比(PWM Ratio)

- Y Offset は信号にDCを載せるのではなく、表示位置の変更（Sig_1x2 の信号に影響しない）

- Sig_1 to Sig_2 Phase は表示位置の変更でなはく、信号の位相を変える（Sig_1x2 の信号に影響する）

・波形が移動する速度(Speed Factor)、横軸の点の数(Iterations) を設定可能

・Sig_1x2 信号を x-y プロットにすることが可能

X-Y プロット

見所：

まずはパラメータを調整して、信号波形や周波数を変えてみてください。LFO の波形を視覚的にみることができます。 PWM やRandom など容易に理解出来ます。

青い線は信号同士をMath パッチで掛け合わせたものです。こちらも、Math の演算を視覚的に見ることができます。かけ算(Multiply) はAM 変調になります。

解説：

波形の一点、例えば左端に注目すると、上下に振動しています。これが、LFO から出力される値です。（Speed Factor を1にすると、実際の周波数になります。）

LFO は発信器なので、同じ出力を周期的に繰り返します。一周期の中での位置を位相と呼び、角度や時間で表します。

「Oscillo Scope with SG」はIterator で構成しています。繰り返しの際、LFO の位相と、プロット位置をずらすことによって、横軸を時間とした波形表示を可能にしています。

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

時間のコントロール (Time Control)

説明：

Quartz Composer における、時間の概念とそのコントロール方法について説明します。QC で作業をしていると、一時停止ボタンが欲しくなりませんか？[STOP] を押すと全ての表示が消えてしまいます。

時間によって動きを変化させるときは、LFO (Low Frequency Oscillator) や、Stop Watch、Interpolation などのパッチを使います。これらはPatch Time という時間で管理されています。

通常は[Run] を開始してからの経過時間となりますが、Timebase という項目（各パッチを右クリック）で、参照する時間を変えることができます。

Timelines というパッチもあります。これはPatch Time の時間変化を、線で描くことができるパッチです。Timeline はInspector →Settings で設定します。「Option+Click」でコントロールポイントの追加、「Control+Drag」で接線の傾きを調整します。

動作：

・３つのボールがLFO (周期 3 sec のSin 波)によって上下します。

・↑キー：スタート、ストップ

・↓キー：リセット

見所：

中央（黄）はコンポジション全体のPatch Time によって動いています。（通常の動作）

左右は 「Controllable Patch Time マクロ」によって、Patch Time のスタート、ストップ、リセットを行うことができます。さらに、右側（赤）はTimelines パッチで駆動されています。

皆さんが作ったコンポジション全体を１つのマクロにして、そのマクロのTimebase を、「Controllable Patch Time マクロ」に接続すれば、一時停止が可能になります。

「Controllable Patch Time マクロ」は、Stop Watch Patch をカーソルキーでコントロールできるようにしたものです。

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

キーエンコーダ (Binary encoder)

説明：

本blog の１番目に「電卓」があるのですが、中身（キー入力〜演算〜出力）はJavaScript です。これを論理回路で置き換えるべく、要素技術を作っています。

動作：

キーボードの1-9, 0, a-f .(dot) に 反応します。

見所：

0-F の16進数に対応する2進数4 bit を出力します。真理値表通りのシンプルなロジックです。0と入力無しを区別するためのKey Down 信号も出しています。

真理値表：

7seg LED と同じです。（Hex to Binary の部分）

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

時計 (Clock)

説明：

２ヶ月ほど前に自分が作った時計(非公開)を作り直してみました。まだQC を始めたばかりで、無駄にJavaScript を使っていました。JavaScript を排して、秒針に残像効果をつけてみました。

動作：

アナログ×デジタルの時計です。

短針、長針、秒針のかわりに数字が回ります。

周囲を秒針に相当する画像がスムーズに回ります。

見所：

無理矢理ですが、音が出ます。（実用性は…?）

「残像」はイメージしたものを作ることはできたのですが、もっと上手いやり方がありそうです。今後レベルアップしたら、また作り直したいです。

Javascript のMath.Sin() と、Mathematical Expression のsin() は引数の単位が違うのですね。前者が (rad) で後者が(deg) でした。

option -クリックで ZIPファイル をダウンロード

ダイナミック点灯制御 (Dynamic LED Control)

説明：

7 セグ LED を使って複数桁の数字を表示します。QC の場合はコピー＆ペーストで簡単に増やすことができます。しかし、実際の電子工作では、部品数は少ない方が助かります。

ダイナミック点灯は目の残像を利用し、各桁を切り替えながら順番に表示する手法です。実際は消灯時間があるため、光量が落ちますが、ちらつきはわかりません。(→実機はこちら)

QCにおいては、全く実用性はありません。やってみたかっただけです。

動作：

・上部　通常の表示

・下部　ダイナミック点灯制御の表示

見所：

7 seg LED マクロを若干変更。色を変えられるようにした。

下のLED はウインドウサイズに合わせてスケーリングするようにした。

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

7セグLED (7-segment LED)

説明：

バーLED まで来たら、次は当然7セグです。7セグは7つ（小数点を入れて8つ）のLED を組み合わせて、数字を作ります。

7セグが主流だった当時はBCD を入力して、a-g の7 つのLED のOn-Off を出力する、専用のドライバIC もありました。

検索でこのページに来る方が多いようなので、、実機も始めます。

動作：

・カウンターをMOD 演算で0-9、0-15 の繰り返しにする。

・0-9 は左上で表示。0-15 (0-9,A,B,C,D,E,F) は中央で表示。

見所：

7 seg LED を真面目に再現しています。比較用に不真面目なものを、左上に置いています。これは0-9 の画像を切り替えているだけ。

7 seg driver マクロはBCD 入力のドライバーIC を論理回路で再現しています。論理回路は真理値表を（簡単化等せずに）素直に置き換えました。

ドライバーと、LED の両方に、一時的に消灯するDisable, Off 入力を設けました。

真理値表：

リンク先はPDF

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

論理ゲート (Logic Gate)

説明：

論理回路を構成する、基本要素がゲートです。「QC で論理回路を組んでみたい」というのが、本blog の始まりです。

これを使いこなせるかどうかで、QCの使い方が大きく変わるのではないでしょうか？

動作：

各ゲートの入出力パターンを表示します。1秒毎に入出力の状態が変化します。

上段：2入力(AND, OR, XOR, NOT, NAND, NOR, NXOR)

下段：3入力(AND, OR, XOR)

見所：

論理ゲートは Logic Patch です。

QC で真理値表（入出力表）を描こうと思いましたが、2入力で4状態、3入力で8状態、ゲートが7種類。線をつなぐだけでも大変です。

よって、状態は時間で変化させ、4状態(2入力時)、8状態(3入力時)毎にゲートを変化させるようにしました。その部分はSwitcher というマクロに入っています。

入出力の状態はLED で表示しています。

真理値表：

リンク先はPDF

option -クリックで QTZ をダウンロード