Processing.jsでおうちハック

株式会社ソニーコンピュータサイエンス研究所
Processing.jsでおうちハック
大和田茂
ソニーCSL

プログラミング環境の色々
Visual Rule Text
Scratch
MaxMSP
IFTTT
MyThings
AndroidStudio
Visual Studio

Processingとは？
Casey Reas & Benjamin Fry (2001, MIT)
要はJavaだが超簡単に使えて、
便利な機能（ライブラリ）とサン
プルプログラムがたくさん付け
足されたもの

Processing.jsとは？
• ブラウザから使えるもの
• 同じプログラムが動かせるが、差異もある
• .jsでは使えないもの
– ファイル入出力
– 三次元
– クラス (class) Etc..

HEMS Galleryとは？
• Processing.jsで電力データへのアクセスや家
電制御を可能にしたもの
• 作ったプログラムを簡単にWebでシェアできる
• まだβ版です

http://lifedesign-app.org/

家はデザインを必要としている！

なぜプログラムを学ぶのか？
• なんかみんなやってる
• 仕事で使う
• 作りたいものがある

そしてプログラマーは
これからもカッコいい
千葉市大森小学校６年の粘土細工課題「将来の自分」

では早速

まず、HEMS Galleryの使い方 (1)
• Facebookグループ「生活デザインアプリコンテス
ト」に参加申請を行う
• 開発者登録されるのを待つ
– 事務局で手作業でやります
• http://g.lifedesign-app.org/ をブラウザで開く
– ChromeとFirefoxでしか動作確認していません

その２
• 右上の青いボタンでFacebookにログイン
• 上に出現する緑の「開発者モード」ボタンを押す
• 赤い「＋新しいアプリを作成」ボタンを押す。
– 適当なアプリ名を入力して（Testとか）Createボタンを押す
• エディット画面とエミュレータ画面が出るはず。
– エディット画面内のテキストエディタにはデフォルトのソースコー
ドが入っているので、とりあえずいきなり「Run」ボタンで実行

Processingのサンプルを入れて
楽しんでみる
https://processing.org/examples/

プログラムの要素
• プログラムはだいたい「関数」と「変数」から
なっている
• 関数の例 println(“Hello”) ;
• 変数の例 var x ;

関数の例
println ( "Hello!" ) ;

関数の例
↓関数名

関数の例
↓引数
（関数に与える
追加情報。文字列
は”で囲む）

関数の例
↑カッコで引数を挟む
（引数がないものもあるが
カッコは省略できない）
↓引数
（関数に与える
追加情報。文字列
は”で囲む）

関数の例
↓最後に
セミコロン
すごく忘れやすいです！

関数の例
※全て半角にします。
プログラミングでは、どうしても全角が必要な場合を除き
半角だけで構成します。

関数を並べて絵を描いてみる
• Processingの座標系は、
左上が原点 (0,0)
x増加
y増加
size(200,200); // キャンパスサイズ
ellipse( 100,100,50,50 ) ; // 楕円を描く
※「様々な関数の呼び出し例」を参照のこと

問題
• 鎖みたいな絵を描いてください。

答えの例
size(300,50); // 描画領域のサイズを決める
strokeWeight(5) ;
stroke( 0,255 ) ;
fill( 255,0 ) ; // 塗りつぶしの色を変える。Red,Green,Blue,不透明度の順
// 最大値は255。
ellipse( 30,25,50,30 ) ;
ellipse( 70,25,50,30 ) ;
ellipse(110,25,50,30 ) ;
ellipse(150,25,50,30 ) ;
ellipse(190,25,50,30 ) ;
ellipse(230,25,50,30 ) ;
ellipse(270,25,50,30 ) ;

次は変数
• いろいろな値を格納できる箱
• 使う前にvar 変数名; という形での宣言が必要。
• 変数に値を入れる「代入」には「=」を用いる
var X , Y ;
X = “Hello” ;
Y = “ World” ;
println(X+Y); // Hello World
var X , Y ;
X = 3 ;
Y = 4 ;
println(X+Y); // 7
※本家Processingではvarは使いません。入れられるものの種類によってintとかStringとか区別します。
しかし、Processing.jsでは何でも使えてしまうため、敢えて単一のキーワードとしました。

最初から値が決まっている変数
• width 描画領域の幅
• height 描画領域の高さ
• PI π
他にもマウスの位置や押されているキーボード上のキーなどいろいろ
（後で必要に応じて話します）
ellipse( width/2 , height/2 ,50,50 ) ;
いつも描画領域の中央に直径50の円を描く

問題
• さっきの鎖の座標の一部を変数にして、その
変数の値を変えるだけで鎖全体の位置が動
くようなプログラムを書いてください

答えの例
size(300,50);
strokeWeight(5) ;
stroke( 0,255 ) ;
fill( 255,0 ) ;
ellipse( 30,25,50,30 ) ;
ellipse( 70,25,50,30 ) ;
ellipse(110,25,50,30 ) ;
ellipse(150,25,50,30 ) ;
ellipse(190,25,50,30 ) ;
ellipse(230,25,50,30 ) ;
ellipse(270,25,50,30 ) ;
size(300,50);
strokeWeight(5) ;
stroke( 0,255 ) ;
fill( 255,0 ) ;
var y = 25 ; // ここを変えると全体が
//上下に動く
ellipse( 30,y,50,30 ) ;
ellipse( 70,y,50,30 ) ;
ellipse(110,y,50,30 ) ;
ellipse(150,y,50,30 ) ;
ellipse(190,y,50,30 ) ;
ellipse(230,y,50,30 ) ;
ellipse(270,y,50,30 ) ;

変数と関数の合わせ技でhueを動かす
hueLamp1.set( “on”, 0 , 1.0 , 1.0 ) ;
だけでhueが赤く光ります！
•機器一覧からHueLampデバイスを足す。
•操作するhueの名前を選ぶ。

HueLampのset関数の引数の意味
hueLamp1.set("on", 0 , 1.0 , 1.0 ) ;

hueLamp1.set("on", 0 , 1.0 , 1.0 ) ;
↑“on”または”off”。Offの時は
他の引数は不要。

hueLamp1.set("on", 0 , 1.0 , 1.0 ) ;
↑ 色味を表すhue値。
0～360で、循環している

hueLamp1.set("on", 0 , 1.0 , 1.0 ) ;
↑
色の飽和度。大きいほど色が濃くなり、小さ
いほど白黒に近くなる。0.0～1.0の間の値。

hueLamp1.set("on", 0 , 1.0 , 1.0 ) ;
↑
明るさ。０～１の間の値になる。

hueLamp1.set("on", 0 , 1.0 , 1.0 ) ;
http://colorizer.org/
もご参考に

休憩

関数を自分で作る
void loveme( who ){
println( who + “ loves me!” ) ;
}

void loveme( who ){
}
当面は、関数定義はvoidで
↓ 始めると思っててください

void loveme( who ){
}
作る関数の名前。自由に決められますが
↓ スペースは入れないでください。

void loveme( who ){
}
引数。何が来るかわからないので、
変数で受けることにします。
↓ 名前は任意です。

void loveme( who ){
}
定義の時も、引数は
↓ カッコで囲みます。

void loveme( who ){
}
↑作る関数の処理本体です。
引数で渡ってくるwhoを使って何かします。

void loveme( who ){
}
この関数は、引数に” loves me”
を加えて表示します。
loveme(“megumi”) ; // megumi loves me!
loveme( “クリステル” ); // クリステル loves me!
loveme( “No one “ ) ; // No one loves me!

問題
• 画面の中心に、引数で指定された直径の円
を描く関数 centerCircle を作ってください。

答えの例
void centerCircle( diameter ){
ellipse( width/2 , height/2 , diameter , diameter );
}

関数を作ると特別な動作をするもの
• setupとdrawという関数を作ると、
特別な動作をするようになる。
• setupはプログラム開始時に一回
だけ実行される
• drawは何度も繰り返し実行される
• Processingならではの機能
void setup(){
println( “setup” ) ;
}
void draw(){
println( “draw” ) ;
}

これを使うと、絵を動かせるようになる
var r = 0 ;
void draw(){
ellipse( 50+20*cos(r) , 50+20*sin(r) , 20 , 20 ) ;
r = r + 0.2 ;
}
※sinやcosはラジアン単位の角度を引数に取る関数。
このように、関数が値として使えるものもある。

rが大きくなりすぎたらリセット
var r = 0 ;
void draw(){
r = r + 0.2 ;
if( r > 2 * PI ){
r = r – 2 * PI ;
}
} ※sinやcosはラジアン単位の角度を引数に取る関数。
このように、関数が値として使えるものもある。

Ifとは？（条件分岐）
if( ){
}
条件
条件が満たされ
たときに実行され
るもの
if( ){
} else {
}
条件
たときに実行され
るもの
なかったときに
実行されるもの

draw()はどれくらい呼ばれているのか？
• デフォルトでは秒間60回らしい
• frameRate関数を呼ぶと、この数を変更できる。
void setup(){
frameRate(1); // 毎秒１コマ
}
var r = 0 ;
void draw(){ // 毎秒一回だけ呼ばれる
r = r + 1 ;
}

問題
• hueの色を毎秒一回、自動的に変えるプログ
ラムを書いてください。
hueLamp1.set("on",129 ,1,1 ) ;
void setup(){
}
var r = 0 ;
void draw(){ // 毎秒一回だけ呼ばれる
r = r + 1 ;
}
192.168.10.211

答えの例
void setup(){
}
var h = 0 ;
void draw(){
hueLamp1.set("on", h , 1.0 , 1.0 ) ;
h = h + 60 ;
if( h >= 360 ){ h = h – 360 ; }
}

画面の大きさが変わった時に呼ばれる関数
void windowResized(w,h){
size(w,h); // ここでsize関数を呼べば
} // 全画面描画領域にできる
windowResized関数というのがある。
引数として、画面の幅と高さが入る。

最後に、Kadecotという機器
• 個別の機器ではなく、総体を制御しようとする
試み
• hue, saturation, lux (ルクス）
• power, powerHistory, powerHistoryYesterday

試み
↑現在の電力使用量
（ワット単位）

試み
↑今日の累積電力使用量
（キロワット時単位）

試み
↑昨日の累積電力使用量
（キロワット時単位）

試み
この二つの値は、３０分間隔の値が一日分格納
されている ⇒ 「配列」

配列とは？
• たくさんの値をまとめて一つの変数に入れら
れるようにしたもの
• [1,2,3] のように表現する
var x = [ 2,4,6,8,10 ] ; // 5要素からなる配列をxに格納
println( x[2] ) ; // 一つだけ取り出されて、6が表示される

配列とは？
• たくさんの値をまとめて一つの変数に入れら
れるようにしたもの
• [1,2,3] のように表現する
var x = [ 2,4,6,8,10 ] ; // 5要素からなる配列をxに格納
println( x[2] ) ; // 一つだけ取り出されて、6が表示される
なぜ６が表示されるのか？？

配列の「添え字」は０から数える
var x = [ 2 , 4 , 6 , 8 , 10 ] ;
println( x[2] ) ; // 6が表示される
ちなみに、配列の要素数はx.length で調べられます。
x.lengthは５になります。
x[0] x[1] x[2] x[3] x[4]

問題
• 「何でもモールス信号変換」のサービスを
使ってあなたの名前を色パターンに変換し、
hueで表示するようにしてください。
http://morse.ariafloat.com/
例えば「赤」「青」「緑」に割り当てるとよいと思います。
赤のhue : 0
青のhue : 240
緑のhue : 120

答えの例
void setup(){ frameRate(1) ; } // 秒間１コマ
var r = 0 , g = 120 , b = 240 ; // 色とhueを対応づけ
var s = [g,g,r,g,r,b,g,r,g,g,b,r,r,b,g,r,g,g,r,b] ; // 「しげる」
var i = 0 ; // 次に表示する色の添え字
void draw(){
hueLamp1.set("on", s[i] , 1.0 , 1.0 ) ;
i=i+1 ;
if( i >= s.length ){ i = 0 ; }
}

では最後に、「繰り返し」を学びます。
void setup(){ frameRate(1) ; } // 秒間１コマ
var r = 0 , g = 120 , b = 240 ; // 色とhueを対応づけ
var s = [g,g,r,g,r,b,g,r,g,g,b,r,r,b,g,r,g,g,r,b] ; // 「しげる」
var i = 0 ; // 次に表示する色の添え字
void draw(){
hueLamp1.set("on", s[i] , 1.0 , 1.0 ) ;
i=i+1 ;
if( i >= s.length ){ i = 0 ; }
}

では最後に、「繰り返し」を学びます。
while( ){
}
条件
条件が満たされて
いる限り何度も
for( ; ; ){
}
条件
最初に
一度だけ
実行
毎回
最後に
実行
While文 For文

While文の例
// 累積電力値を順々に表示するプログラム
var i = 0 ;
while( i < kadecot1.powerHistory.length ){
println(kadecot1.powerHistory[i] );
i=i+1 ;
}

While文の例
var i = 0 ;
i=i+1 ;
}
ループ実行条件

While文の例
var i = 0 ;
i=i+1 ;
} 繰り返し実行の本体

While文の例
var i = 0 ;
i=i+1 ;
} もしこれを忘れると、プログラムは止まらなくなる

For文でも同じことができます
while( ){
}
条件
for( ; ; ){
}
条件
最初に
一度だけ
実行
毎回
最後に
実行
While文 For文

for( var i=0 ; i < kadecot1.powerHistory.length ; ++i){
}

}
最初に一回だけ実行

}
ループ実行条件

}
毎回ループ内実行後に実行

} 繰り返し実行される本体

}
whileを使うかforを使うかは好き好きですが、iをひと
つづつ増やしていくようなものには、for文の方がiの
処理を一か所にまとめられるのでコンパクトです。

累積電力値をグラフにしてみましょう
void setup(){
size(480,100) ;
}
void draw(){
for( var i=1;i<kadecot1.powerHistory.length;++i ){
var powerValue = kadecot1.powerHistory[i] - kadecot1.powerHistory[i-1] ;
line( i * 10 , 100 , i * 10 , 100 - 300 * powerValue ) ;
}
}

最後の課題
• 前ページのグラフをフルスクリーンにしてみ
てください
• その他、いろいろな演出を加えてみてください

最後に、家電操作の難しいところ
• 誰もが同じ家電機器を持っているわけではないので、
可搬性が問題になります。
• 家電機器のネットワーク機能は一般に強くないので、
連続送信すると予期しない動作をすることがあります。
• それ以前に、命令が届かなかったり返答が来ないこと
もよくあります。優しく扱ってあげてください。

本日はここまでです
http://lifedesign-app.org/
https://www.facebook.com/groups/lifedesignapp/
今後も継続サポートします！！

Thank you
ご参加ありがとうございました！

コネクトリーラボのhueの名前
Powder
Entrance a
Entrance b
Entrance c
Entrance d
Entrance e
Entrance f
Kitchen a
Kitchen b
Kitchen c
Living c
Living b
Living a
Dining a
Dining b
Bed left
Bed right
LightStrips 1
※今は違っているかもしれません

Processing.jsでおうちハック

More Related Content

What's hot

Viewers also liked

Similar to Processing.jsでおうちハック

More from sonycsl

Recently uploaded

Processing.jsでおうちハック