PraxisLIVEで遊ぶために必要な「超基礎」だけをサクっとまとめてみた!【制作・操作方法 編】

投稿日:2020-01-25



ナカジ(@cp_nakajun)です。

前回の「インターフェース(UI)編」に引き続き

PraxisLIVEで遊ぶために必要な「超基礎」だけをサクっとまとめてみた!【インターフェース(UI)編】



今回はPraxisLIVEを使っていく【制作・操作方法 編】です。

UI編にプラスアルファな感じで操作方法を紹介していきます。

PraxisLIVEの使い方

今回はExampleをリネームして改造する方法ではなく新規にプロジェクトを作っていきます。
まず、PraxisLIVEを起動します。

新規プロジェクトを作る

  1. ツールバー「New Project」をクリック
  2. Praxis Coreカテゴリーから「Praxis Core Project(default)」を選択
  3. Project Locationを設定
  4. プロジェクトエリアにProjectが出来上がる

上記の流れでプロジェクトを準備します。

以下のスクリーンショットで流れを確認してください。

1.ツールバーの1「New Project」をクリック。


2.Praxis Core Project(default)」を選択


3.プロジェクトの名前などを決定します。


4.プロジェクトエリアにProjectが出来て以下のようになってます。


ルートコンポーネントを追加する

次に映像や音を組み立てていく(パッチングする)ファイルを用意するのですが

どうやらPraxisLIVEではこれをルートコンポーネントと呼ぶようです。

先に書くとビデオ系のvideo.pxrや、オーディオ系のaudio.pxrになるのですが、この中にそれぞれパッチングやコード記述をしていきます。

ルートコンポーネントを追加する方法は

  1. プロジェクトエリアの先に作ったプロジェクト名を右クリック
  2. 「New」から追加するコンポーネントを選択

です。

今回は「Video Patch…」を選択します。


そうするとこのルートファイルの「Root ID」の設定画面になります。


とりあえずはそのまま「Finish」ボタンを押して作成してください。

※現段階では必要ないですがPraxis LIVEは「ルートIDが衝突しない限り、複数のプロジェクトを同時に処理することができます。」です。

「Finish」ボタンを押すと無事にvideo.pxrができエディットエリアに「screen」コンポーネントが出来上がります。


「screen」コンポーネントは映像を別ウインドウで出力するコンポーネントです。

PraxisLIVE パッチングで作る

PraxisLIVEのパッチングをご紹介するために、簡単な「画像を読み込んで別ウインドウに出力」する流れをやります。



コンポーネントの追加は右側のパレットエリアから任意のものエディットエリアにドラック&ドロップするパレットエリアで右クリックし[add]から選ぶことで追加することができます。

今回はパレットエリアから>[still]と選択しドラック&ドロップしてください。

そうするとそのコンポーネントのIDを決めるよう求められるので今回は「image」とします。


これでエディットエリアに「image」という名(ID)のコンポーネントが現れます。


※僕最初、この画像表示の「still」コンポーネントを見つけるのに苦労したんですよ~。Exampleに「image」ってあるのにパレットエリアになくて…

パッチング(結線)は単純に[still]のoutをドラックして[screen]のinにドロップです。


線を消すには線の上で右クリックし「Delete」です。


画像の選択はコンポーネントのプロパティーで行います。

  • 画面右側のPropertiesタブ(エリア)
  • コンポーネントの名前の上で右クリックして「Edit…」別ウィンドウで表示

プロパティーを表示するには上記の2つの方法があります。







実行するにはツールバーではなく、エディットエリアの実行ボタンを押します。(video.pxr編集タブにある)


そうすると無事に選択した画像が別ウィンドウで表示されると思います。

カスタムコンポーネント作成(コードで記述)

続いてはコードを記述してオリジナルのコンポーネントを作ります。

Processingのスキルを活用していけるところです。

先と同様にエディットエリアにパレットエリアから>[custom]をドラック&ドロップします。

エディットエリアにおいたコンポーネントの名前の上で右クリックし今度は「Edit code」を選択します。


そうするとタブでコードエディターが開きます。


すでに見覚えのあるコードが記述されていると思います。

今回はdraw()関数にrectangle描画の記述をします。

あとは先に書いたように[screen]にパッチングし実行すると以下のように描画されます。


今回はここまで

長い記事にお付き合いいただきありがとうございました。

学習にオススメ


・【NFTアート × Python】全くの初心者でもできるジェネラティブNFTの作成から出品まで icon

・【P5.js】プログラミングと数学(物理)を使って遊んでみよう【初心者向け】【わかりやすさ重視】 icon

・改訂版プログラミングで科学を学ぼう! icon

・【JS】ガチで学びたい人のためのJavaScriptメカニズム icon





おすすめのクリエイティブ・コーディング関連カテゴリー


ウェブツール

機能はシンプルなものですが、p5.jsやTone.jsで描画したり音が出たりするので遊んでみてください。
・【Midi Number Tools】:MIDIナンバーから音名と周波数を判定します
・【Delay Time Calculator】:テンポに応じた音符の長さを判定します