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でおうちハック

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

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

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

More from sonycsl

More from sonycsl (20)

Recently uploaded

Recently uploaded (10)

Processing.jsでおうちハック