ProcessingのSliderおよびControlP5に関するメモ

Processingでスライダーをつくろう

今日もProcessingについて書いていきたいと思います。
今回はProcessingでスライダーをつくりたいと思います。

参考にしたサイトはこちら

はじめはrect()で矩形作って…とか考えてたんですが、Processingのライブラリ使えば簡単に作れるんですね。調べてよかった。
というわけで、ControlP5というライブラリをインストールしました。

で、こちらのコードを実行してみました。動きました。やったー。

ところがまたもやリファレンスが見つからず、ようやっと見つけたけど英語だったのでまたまとめておきます。
原文はこちら。あと、Control5ライブラリのサイトはこちら

Sliderクラスのコンストラクタ

Slider("スライダーの名前",最小値,最大値,初期値,X座標,Y座標,幅,高さ)

名前はString、最小値・最大値・初期値はfloat、X座標・Y座標、幅、高さはintです。
また、名前のみを指定することもできます。


Sliderクラスのメソッド(一部抜粋)

float getMax()

スライダーの最大値を返します。戻り値はfloatです。


float getMin()

スライダーの最小値を返します。戻り値はfloatです。


float getValue()

スライダーの値を返します。戻り値はfloatです。


float getValuePosition()

スライダーの位置を返します。戻り値はfloatです。


int getTriggerEvent()

スライダーのイベント発生のタイミングがいつに設定されているか取得します。
押したときならSlider.PRESSED、離したときならSlider.RELEASEが返ります。戻り値はintでそれぞれ2,1です。


Slider setValue(float)

スライダーの値を設定します。引数はfloatです。


Slider setWidth(int)

スライダーの幅を設定します。引数はintです。


Slider setHeight(int)

スライダーの高さを設定します。引数はintです。


Slider setMax(float)

スライダーの最大値を設定します。引数はfloatです。


Slider setMin(float)

スライダーの最小値を設定します。引数はfloatです。


Slider setRange(float,float)

スライダーの最大値と最小値を設定します。引数はfloatです。


Slider setSize(float,float)

スライダーの幅と高さを設定します。引数はfloatです。


int setTriggerEvent()

スライダーのイベント発生のタイミングを設定します。
引数はintで、押したときならSlider.PRESSED、離したときならSlider.RELEASEです。


Slider updateInternalEvents(processing.core.PApplet theApplet)

スライダーの値を更新します。引数はthisです。
マウス、キーボードイベントと組み合わせて使うと効果的です(取得ずれを直します)。


Slider shulle()

スライダーの値をランダムに変更します。


その他、覚えておくとちょっと便利な親クラス(Controller)のメソッド

lock()

ユーザ操作を不可にします。

boolean isMouseOver()

オンマウスしているかどうか調べます。戻り値はbooleanです。

boolean isMousePressed

マウスが押されているかどうか調べます。戻り値はbooleanです。


そのうち増えるかもしれません。
2015/07/01 ちょっと増えました。

ProcessingのMovieに関するメモ

PrcessingのMovieについて調べてたんですが、なかなかリファレンスみたいなのが見つからなかったので忘備録として残しておきます。

Movie

AppleのQuickTime形式で動画を保存し、再生するためのデータ型です。
再生する動画はエラーなしでロードするために、スケッチ(プロジェクト)の中のdataディレクトリ、またはネットワーク上でアクセス可能な場所に配置する必要があります。
パラメータとしてfilenameをもちます。

Movieがもつメソッド一覧

frameRate()

1秒間に読み込まれるフレームの数を指定します。引数はfloatです。


speed()

動画の再生速度を変更します。
引数が2のときは倍速、0.5の時は0.5倍速です。
負の値を入力すると逆再生になります。逆再生のまま開始点に到達するとエラーを吐きます。
引数はfloatです。


duration()

動画の長さを秒で返します。動画が1分20秒であれば80.0が返ってきます。
正確に長さを取得するためにはplay()のあとに呼び出す必要があります。
戻り値はfloatです。


time()

動画の再生位置を秒で返します。
戻り値はfloatです。


jump()

動画内の特定の場所にジャンプします。引数はfloatの秒数です。


available()

新しい動画のフレームが読み取り可能である場合にtrueを返します。
戻り値はbooleanです。


play()

動画を1回再生し、最後のフレームで停止します。


loop()

動画を繰り返し再生します。


noLoop()

動画のループ再生を停止します。


pause()

動画を一時停止します。


stop()

動画を停止します。


read()

現在のフレームを読み込みます。

Processingで動画を再生したりなんやかんやする

【2017/01/27追記】このコードは現在うまく動作しないようです。ちなみにこの当時の環境はWindows7+Processing2.2.1でした。原因は調査中です。

今日はProcessingという言語を使って動画を再生してみたいと思います。

インストールやなんかは調べれば出てくると思います。
今回はインストールがすでに終わってる状態から始めていきます。

Processingは書いたらすぐコンパイルができるのがよいところです。
ちょっと書いてみましょう。



起動するとこんなエディタが現れます。
ここにコードを書いていきます。

println("Hello World!");
println("I'm Mokichi!!");


実行します。左上の右向きの三角マークを押しましょう。



下部のコンソールに文章が表示されました。



と同時にこんなもんが現れました。
Processingはどちらかといえばグラフィック?表示とかそんな方面に強いです。
視覚的にわかりやすいものを作りやすい環境なのです。
こいつはそんな視覚的なものを配置していくためのフィールドです。

そこでさっきのプログラムをこんな風に書き換えてみます。


text("Hello World!\nI'm mokichi!!", 15, 50);




さっきのちっさいウィンドウの中に文字が現れました。
こんな風にProcessingは簡単にフィールドに文字や画像を配置することができます。

さて、そろそろ本題の動画再生の方に入りたいと思います。

Processingで動画を扱うには、動画専門のライブラリが必要です。

import processing.video.*;


これで動画が扱えるようになります。

動画を再生するためにこんなプログラムを書いてみました。
こちらを参考にしています。


import processing.video.*;

Movie lectureMovie;

void setup(){
size(900,450);
lectureMovie = new Movie(this, "tiger.mp4");
lectureMovie.loop();
}
void draw(){
image(lectureMovie,0,0,900,450);
}


まず、lectureMovieという名前のMovie型の変数を用意します。

次にsetup()の中で、
size()でフィールド全体の横の長さ、縦の長さを指定、
lectureMovieにおなじみtiger.mp4というファイル名の動画を読み込み、
lectureMovieをloop()で連続再生モードに設定します。

そしてdraw()の中で、lectureMovieをフィールドに表示させます。

ここでひとつ注意点があります。
作ったプログラムを保存すると、デフォルト設定のままでは
ライブラリ-ドキュメントの中のProcessingフォルダの中に、プログラム名と同じ名前のフォルダが作成され、その中に保存されています。
今回はplay1という名前で保存しています。
プログラムが使用するデータは、このplay1の中に自分で「data」という名前のフォルダを作りそこに入れておく必要があります。



イメージはこんな感じです。

それでは実行してみましょう。



はい、動画が再生されました。

が、このままでは虎が歩いてはこっちを見て歩いてはこっちを見て…ってのが延々と繰り返されるだけですね。これではちょっとつまらない。
そこで、動画を一時停止したりできるようにしたいと思います。




import processing.video.*;

Movie lectureMovie;
boolean isPaused;

void setup(){
size(900,450);
lectureMovie = new Movie(this, "tiger.mp4");
lectureMovie.loop();
isPaused = false;
}
void draw(){
image(lectureMovie,0,0,900,450);
}

void movieEvent(Movie m){
m.read();
}
void mousePressed(){
if(isPaused == false){
lectureMovie.pause();
isPaused = true;
}
else if(isPaused == true){
lectureMovie.play();
isPaused = false;
}
}


先ほどのコードに少し手を加えました。
まず、isPausedというboolean型の変数を導入しました。
booleanってのはture/falseの2種類の値しか持ちません。つまり、イエスかノーかどちらかという制御に向いているということです。
ここでは、「一時停止している状態」をture、「動画が再生されている状態」をfalseとしたいと思います。

再生開始時は動画は再生されている状態になりますから、isPausedはfalseになります。

movieEvent()というのは、動画を制御するための関数です(おそらく…まだ勉強中です)。

mousePressed()は、マウスが押されたときに動作します。
ここで、動画が再生中なら一時停止、一時停止中なら再生開始という処理を指定します。

それでは、実行してみましょう。
静止画だとわかりませんが、マウスのクリックで動画が一時停止したり動き出したりするはずです。
これらを組み合わせていくことで、動画をいろいろ制御しながら再生することができます。

それでは、今日はこの辺りで。

はじめてのリペイント1

おひさしぶりです。
いろいろと落ち着いてきたので、かねてより手を出したかった趣味にようやく手を出すことができました。



フィギュアのリペイントです!
まだパテ盛りとかはできないけどいずれは……(パテは買ってみた)

ガチャガチャとか結構被って持ってるので、どうせならいろいろやってみたかった。
というわけで、はじめてのリペイント(再塗装)やってみました。

以前中古ホビーショップで一袋300円で売ってた玩具セットの中の、仮面ライダーZXさんをリペイントしてみます。実験台にしてごめんよ……。

塗装前の写真を撮り忘れるという失態をやらかしたので、参考までにこちらを。



わぁ写真がすごくでっかい。

使用する塗料はこちら。



MR.HOBBYという会社の、MR.COLORという塗料です。
シンナー系?なので締め切った部屋で使うと危険です。
自分も結構クラックラきて慌てて扇風機回しました。気を付けましょう。

右側にある透明なボトルは、うすめ液といいます。
水性塗料ではないので、筆を洗うときは水ではなくこのうすめ液を使います。
油彩の時、筆を油で洗ったり絵具を油で溶かしたりするようなものです。

今回は、メタリックブルー(76)、メタルブラック(78)、ゴールド(9)を使います。()の数字は品番です。
というか、別のものを塗ろうとしてたので他の色はまだありません。

塗料、うすめ液ともに揮発性です。ほっとくと常温でどんどん蒸発します。使わないときはこまめに蓋を閉めましょう。

では、塗っていきます。
手持ちの色が色なので、ZXさんのスーツの赤色→メタリックブルー、黒色→メタルブラック、銀色→ゴールドで塗ってみました。



多少のはみだしは塗り重ねればいいかなーとメタリックブルーを塗ります。思えばこれがもう最初の油断だった。



脚も同様に塗っていきます。

が、順調にメタリックブルー→メタルブラックと塗り進め、ゴールドへと差し掛かった途端突然難易度が上がります。

瓶の中で金色がすげぇ沈殿してる……!
振ったらなんとかなりましたが、他の2色に比べおそろしく沈殿しているのですぐ色が薄く、というか、うすめ液のようになってしまう。そして、うすめ液のごとく下地のメタリックブルーが溶け出す溶け出す。なにこれ液体金属?塗った塗料の中で金粉が流動してるんだが……!
しかし、沈殿をうまく掬えた時の発色は感動するくらい良い!!!
でももう絶対全面金色やりたくないです。やるなら最初に塗ります。アクセントに入れるなら最後でもいいかもしれないけど……。

ちなみに、メタリックブルー、ブラックはわりとすぐ乾いて重ね塗りできました。
ゴールドはちょい遅かったです。

ということで、なんとか不器用を発揮しつつ手持ちの色は塗り終えた。まぁ金色がはみ出したところは今度直すとしよう(そろそろ頭が痛くなってきた)。
よし、2PカラーのZXさんが完成に一歩近付い……、









これは……!!













ほぼシンケンゴールドじゃねぇか!!!

というわけで(´・ω・`)しつつ、今度またブルーの塗り直しと細かい部分の塗装します。
ついでに、ガシャポンライダーアドバンスの仮面ライダー鎧武・カチドキアームズのリペイントもしてみました。6人いるんで。



殺人現場みたいになってますね。っていうか写真下手くそやな……。
こちらは原作の色に忠実に、より発色よくしていきたいと思います。メタリックオレンジなんて塗料あるのかなぁ……。

以上、はじめてのリペイント1でした。
それでは、今回はこの辺りで。

コマンドプロンプト上でffmpegとawkを使って動画の長さを文字列で取得する

前回に引き続き、バッチファイル作りに取り組んでいます。

今回は、動画の長さを取得するバッチファイルを作っていこうと思います。

久しぶりのtiger.mp4をサンプル動画ファイルとして使っていきます。

まず、ffmepgで動画の長さを調べるには、

ffmpeg -i tiger.mp4


コマンドで当該箇所を探すんでした。
が、めんどくさいのでプログラムにやってもらいましょう。
参考にしたのは、こちら

ffmpeg -i [動画ファイル] 2>&1 | grep Duration | awk '{print $2}' | tr -d ,


これはLinuxのコマンドっぽいので、コマンドプロンプトで使えるように修正します。


文字列検索
Linux:grep → Windows:find

Windowsの場合、検索文字列は" "で囲まないとダメなようです。

awkコマンド
Linux:awk → Windows:awk

MacとLinuxには標準搭載ですが、Windowsには入ってませんでした。
ので、インストールしました。
参考:awkインストール

さらに、こちらも'{ }'を"{ }"に変更しないとダメみたいです。変更します。

ここで問題が。
Linuxのtr(文字検索)にあたるものがコマンドプロンプトで見つからない。
awkもやってみたけどよくわからない。
うーん、とりあえず消して実行。

ffmpeg -i tiger.mp4 2>&1 | find "Duration" | awk "{print $2}"


コマンドプロンプトがエラーで埋まったのでclsコマンドで一回クリア。
からの実行。



カンマが残ってるので、awkのコマンドsubstrを使って文字数を指定して切り出しました。



かなりやっつけ感あります。もっとかしこいやり方がきっとあるはず。

最終的なコマンドは

ffmpeg -i tiger.mp4 2>&1 | find "Duration" | awk "{print substr($2,0,11)}"


というわけで動画の長さを知ることができました。やったね。

バッチファイルも作ってみました。



動きました。やったね。

さて、次からはバッチファイルのお勉強をせねばなりません。
手さぐり感にあふれている。

ということで、今回はこの辺りで。