Extra

こんなのできると色々楽しいかなというものを列挙しています。
教える内容というより、紹介に近いですが、とりあえず使える形にはしています。


WordCloudとkuromojiを使ったアプリケーション

Alt text

Word cloudはあるテキストデータがあったとき、その中で出てくる言葉を出現頻度によってサイズを大きくしたり、小さくして、空間内に敷き詰めるものです。
私がたまに使わせてもらうウェブ上のword cloud generatorが以下です。
https://www.jasondavies.com/wordcloud/
テキストを変更したり、角度を変更したり、など様々なパラメータがあります。

これをProcessingでも使えるようにしたのがWordCramというライブラリです。
日本語を使う場合は区切ることも必要なので、これはkuromojiというライブラリを使います。
これらを使ってProcessingでWordCloudができるようにするプログラムについては以下のサイトが参考になります。
Word Cloud + kuromoji + Processing で日本語文章をビジュアライズ

1. WordCloudのアルゴリズムの紹介

  1. 日本語の場合、文章を単語ごとに区切る

  2. それぞれの単語が何回出てくるか数える

  3. 大きい単語から(つまり出現度順に)空いている空間に配置していく

    • このとき、文字を囲む最小矩形などではなく、文字の内側の空間まで敷き詰めの対象になっているので、この部分の自力実装が少し難しいですね。

      • これが単純な〇なら階層的Poisson Disc Samplingという手法で実装できます。

    • また、文字に角度をつける場合、配置の際に可能な範囲の角度分、回転しながら置けるかどうか確認する必要があります。

2. Contribution libraryの使用方法

ここで学べるポイントの一つとしては、Contribution libraryの使用方法です。
講義では、Processingのオフィシャルなライブラリを用いることがほとんどだったので、メニューから「ライブラリのインポート」をするだけで簡単に使えました。
それ以外のライブラリのことをContribution libraryと言って、所定の場所にファイルを配置することなどが必要です。
それでもそんなに難しくないのがProcessingのいいところですね。

3. 関連して配置アルゴリズムの紹介

Poisson Disc Sampling(PDS)の場合

同じ大きさの円を(基本的には)重ならないように空間に敷き詰めるものになります。

  1. ランダムに位置を選ぶ

  2. そこから半径R以内に他の点がなければ(半径Rの)点を置き、1に戻る。

  3. もし半径R以内に他の点があれば点を描かずに、1に戻る。

  4. 点を描画できない状態が一定回数以上続いたら、処理を終了する。

階層的Poisson Disc Sampling(HPDS)の場合

HPDSの場合、点を描画できない状態が続いたら、Rを少し小さくして、また処理を繰り返します。
発想はシンプルですね。

  1. ランダムに位置を選ぶ

  2. そこから半径R以内に他の点がなければ(半径Rの)点を置き、1に戻る。

  3. もし半径R以内に他の点があれば点を描かずに、1に戻る。

  4. 点を描画できない状態が一定回数以上続いたら、Rを少し小さくして、1に戻る

  5. Rの下限を決めておき、そのサイズでも点を描画できない状態が続いたら、処理を終了する

高速なHPDSの論文と実装

ただ、場合よっては非常に計算時間がかかるので、高速化手法が提案されています。
以下はSIGGRAPHのSketch(1ページのshort paper的なもの)で発表された研究ですが、既存研究を実装してみるのもとても勉強になると思います。
https://www.cct.lsu.edu/~fharhad/ganbatte/siggraph2007/CD2/content/sketches/0250.pdf
Coding Challengeにも記事がありました↓
https://www.youtube.com/watch?v=flQgnCUxHlw

PDSやHPDSはキャッチーなところでいうと、non-photorealistic rendering等の例がわかりやすいかもしれません。
油絵を描くとき、ストロークの大きいところと小さい細かいところがあります。
写真をちぎり絵風に変換する場合、一枚のちぎった紙の画像を写真内に、配置する画素の色にして、張り付けていくということをよく行います。
この時のちぎった紙の配置と大きさはHPDSで計算できます。

例1

以下は画像設計学科の研究で、少しアレンジした例になります。
例2

その他

あとは簡単な紹介だけです、アルゴリズムは調べてみてください。

BoundingVolumes

AABB

物体の最小矩形などで衝突検出を行う方法です。

AABBのイメージ

OBB

やはり矩形で衝突検出を行う方法ですが、更に矩形領域の傾きを考慮できます。OBB参考サイト

OBB

Convex Hull

凸形状で表すもの。

音声入力

発話をテキスト化し、それを表示します。
方法はいくつかありますし、その中ではお行儀良くない方法かもしれない方法かもしれませんが、簡単です。

テキスト化

OpenProcessingでいくつかプログラムを公開しています。
いずれもオンラインで動作しています。

1.こちらはマイクを使って話すと、その内容が画面に表示されるプログラムです。
https://www.openprocessing.org/sketch/449914
※一度言葉が表示されたら、中央上部分のボタンを押してプログラムをリスタートする必要があります。

2.こちらはマイクを使って話すと、その内容をテキストファイルとしてPCにダウンロードします
https://www.openprocessing.org/sketch/478007
※話過ぎてPCがパンクしないように注意!
※ブラウザがDLを勝手に防止する場合があるので、その場合は許可してあげてください。
※反応しなくなったらリスタートしてください。

2を使ってDLした文章を自分のPCで動くProcessingのプログラムで読み込んで使うことができます。
一度読み込んだテキストファイルは、削除してしまえば、ちょうどよいです。
※ただあまりこのようなやり方は推奨できないですけどね…。

このプログラムでは、windowsでは「ダウンロード」というフォルダにウェブからダウンロードしたものが入るようにデフォルトで設定されています。
Macの場合はしゃべりすぎる前にどこにダウンロードされているかチェックしましょう。 また、適宜、たまりすぎたファイルを消すようにしましょう。

定期的なテキストファイルの読み込みと削除

では、ダウンロードされたテキストをPC上のプログラムで使ってみましょう。
以下はサンプルコードになります。
ファイルがDLされるフォルダの名前は人によって違うので、自分のPCに合わせて編集してください。

import java.io.*;
int timer=0;
FileList fl = new FileList();
void setup() {
size(500, 500);
}
void draw() {
timer++;
if (timer%40==0) {
fl.getListOf("C:/Users/yuki/Downloads");
//ここをファイルがDLされるフォルダの階層名に変更しましょう↑
}
}
public class FileList
{
public void FileList() {
}
public void getListOf(String folder) {
File directory1 = new File(folder);
String[] fileArray = directory1.list();
if (fileArray != null) {
for (int i = fileArray.length-1; i >0; i--) {
if (fileArray[i].indexOf("rec")!=-1) {
//System.out.println(fileArray[i]);
String[] lines = loadStrings(folder+"/"+fileArray[i]);
if (lines!=null)
for (int ii = 0; ii < lines.length; ii++) {
print(lines[ii]);
}
println();
File rec = new File(folder+"/"+fileArray[i]);
rec.delete();
}
}
} else {
System.out.println(directory1.toString() + " は存在しません" );
}
}
}

Twitterの使用

Twitterを使うライブラリ、Twitter4jを使ったサンプルプログラミングを紹介します。
ここでは、アカウント名からそのフォロワーを取ってきて表示するものになっていますが、他にもいろいろできそうです。

Twitterの個人的なキーは自分のものをお使いください。
https://storage.design.kyushu-u.ac.jp/public/LMpAgAJOqcmAKtgBLPlvD3yKkM4P1p46d3ghIOK8Fwtp

Twitter4jの導入は以下を参照してください。
http://www.pentacreation.com/blog/2016/10/161022.html

上記だけだとうまくいかなくて、途中からは以下を参考にした気がします。

ProcessingとTwitterをくっつける
http://tercel-sakuragaoka.blogspot.jp/2012/02/processingtwitter.html

もしかしたら参照サイトが少し古い可能性があるので、その場合は適宜調べてください。

お天気情報の使用

Midi player

人のシルエットとボールのインタラクション