Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Processing.jsでおうちハック

5,686 views

Published on

生活デザインアプリコンテスト向けのサポートイベント向けに作った、プログラミング導入用スライドです。
http://lifedesign-app.org/

Published in: Technology
  • Be the first to comment

Processing.jsでおうちハック

  1. 1. 株式会社ソニーコンピュータサイエンス研究所 Processing.jsでおうちハック 大和田 茂 ソニーCSL
  2. 2. 株式会社ソニーコンピュータサイエンス研究所 プログラミング環境の色々 Visual Rule Text Scratch MaxMSP IFTTT MyThings AndroidStudio Visual Studio
  3. 3. 株式会社ソニーコンピュータサイエンス研究所 Processingとは? Casey Reas & Benjamin Fry (2001, MIT) 要はJavaだが超簡単に使えて、 便利な機能(ライブラリ)とサン プルプログラムがたくさん付け 足されたもの
  4. 4. 株式会社ソニーコンピュータサイエンス研究所 Processing.jsとは? • ブラウザから使えるもの • 同じプログラムが動かせるが、差異もある • .jsでは使えないもの – ファイル入出力 – 三次元 – クラス (class) Etc..
  5. 5. 株式会社ソニーコンピュータサイエンス研究所 HEMS Galleryとは? • Processing.jsで電力データへのアクセスや家 電制御を可能にしたもの • 作ったプログラムを簡単にWebでシェアできる • まだβ版です
  6. 6. 株式会社ソニーコンピュータサイエンス研究所 http://lifedesign-app.org/
  7. 7. 株式会社ソニーコンピュータサイエンス研究所 家はデザインを必要としている!
  8. 8. 株式会社ソニーコンピュータサイエンス研究所 なぜプログラムを学ぶのか? • なんかみんなやってる • 仕事で使う • 作りたいものがある
  9. 9. 株式会社ソニーコンピュータサイエンス研究所 そしてプログラマーは これからもカッコいい 千葉市大森小学校6年の粘土細工課題「将来の自分」
  10. 10. 株式会社ソニーコンピュータサイエンス研究所 では早速
  11. 11. 株式会社ソニーコンピュータサイエンス研究所 まず、HEMS Galleryの使い方 (1) • Facebookグループ「生活デザインアプリコンテス ト」に参加申請を行う • 開発者登録されるのを待つ – 事務局で手作業でやります • http://g.lifedesign-app.org/ をブラウザで開く – ChromeとFirefoxでしか動作確認していません
  12. 12. 株式会社ソニーコンピュータサイエンス研究所 その2 • 右上の青いボタンでFacebookにログイン • 上に出現する緑の「開発者モード」ボタンを押す • 赤い「+新しいアプリを作成」ボタンを押す。 – 適当なアプリ名を入力して(Testとか)Createボタンを押す • エディット画面とエミュレータ画面が出るはず。 – エディット画面内のテキストエディタにはデフォルトのソースコー ドが入っているので、とりあえずいきなり「Run」ボタンで実行
  13. 13. 株式会社ソニーコンピュータサイエンス研究所 Processingのサンプルを入れて 楽しんでみる https://processing.org/examples/
  14. 14. 株式会社ソニーコンピュータサイエンス研究所 プログラムの要素 • プログラムはだいたい「関数」と「変数」から なっている • 関数の例 println(“Hello”) ; • 変数の例 var x ;
  15. 15. 株式会社ソニーコンピュータサイエンス研究所 関数の例 println ( "Hello!" ) ;
  16. 16. 株式会社ソニーコンピュータサイエンス研究所 関数の例 println ( "Hello!" ) ; ↓関数名
  17. 17. 株式会社ソニーコンピュータサイエンス研究所 関数の例 println ( "Hello!" ) ; ↓引数 (関数に与える 追加情報。文字列 は”で囲む)
  18. 18. 株式会社ソニーコンピュータサイエンス研究所 関数の例 println ( "Hello!" ) ; ↑カッコで引数を挟む (引数がないものもあるが カッコは省略できない) ↓引数 (関数に与える 追加情報。文字列 は”で囲む)
  19. 19. 株式会社ソニーコンピュータサイエンス研究所 関数の例 println ( "Hello!" ) ; ↓最後に セミコロン すごく忘れやすいです!
  20. 20. 株式会社ソニーコンピュータサイエンス研究所 関数の例 println ( "Hello!" ) ; ※全て半角にします。 プログラミングでは、どうしても全角が必要な場合を除き 半角だけで構成します。
  21. 21. 株式会社ソニーコンピュータサイエンス研究所 関数を並べて絵を描いてみる • Processingの座標系は、 左上が原点 (0,0) x増加 y増加 size(200,200); // キャンパスサイズ ellipse( 100,100,50,50 ) ; // 楕円を描く ※「様々な関数の呼び出し例」を参照のこと
  22. 22. 株式会社ソニーコンピュータサイエンス研究所 問題 • 鎖みたいな絵を描いてください。
  23. 23. 株式会社ソニーコンピュータサイエンス研究所 答えの例 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 ) ;
  24. 24. 株式会社ソニーコンピュータサイエンス研究所 次は変数 • いろいろな値を格納できる箱 • 使う前に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では何でも使えてしまうため、敢えて単一のキーワードとしました。
  25. 25. 株式会社ソニーコンピュータサイエンス研究所 最初から値が決まっている変数 • width 描画領域の幅 • height 描画領域の高さ • PI π 他にもマウスの位置や押されているキーボード上のキーなどいろいろ (後で必要に応じて話します) ellipse( width/2 , height/2 ,50,50 ) ; いつも描画領域の中央に直径50の円を描く
  26. 26. 株式会社ソニーコンピュータサイエンス研究所 問題 • さっきの鎖の座標の一部を変数にして、その 変数の値を変えるだけで鎖全体の位置が動 くようなプログラムを書いてください
  27. 27. 株式会社ソニーコンピュータサイエンス研究所 答えの例 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 ) ;
  28. 28. 株式会社ソニーコンピュータサイエンス研究所 変数と関数の合わせ技でhueを動かす hueLamp1.set( “on”, 0 , 1.0 , 1.0 ) ; だけでhueが赤く光ります! •機器一覧からHueLampデバイスを足す。 •操作するhueの名前を選ぶ。
  29. 29. 株式会社ソニーコンピュータサイエンス研究所 HueLampのset関数の引数の意味 hueLamp1.set("on", 0 , 1.0 , 1.0 ) ;
  30. 30. 株式会社ソニーコンピュータサイエンス研究所 HueLampのset関数の引数の意味 hueLamp1.set("on", 0 , 1.0 , 1.0 ) ; ↑“on”または”off”。Offの時は 他の引数は不要。
  31. 31. 株式会社ソニーコンピュータサイエンス研究所 HueLampのset関数の引数の意味 hueLamp1.set("on", 0 , 1.0 , 1.0 ) ; ↑ 色味を表すhue値。 0~360で、循環している
  32. 32. 株式会社ソニーコンピュータサイエンス研究所 HueLampのset関数の引数の意味 hueLamp1.set("on", 0 , 1.0 , 1.0 ) ; ↑ 色の飽和度。大きいほど色が濃くなり、小さ いほど白黒に近くなる。0.0~1.0の間の値。
  33. 33. 株式会社ソニーコンピュータサイエンス研究所 HueLampのset関数の引数の意味 hueLamp1.set("on", 0 , 1.0 , 1.0 ) ; ↑ 明るさ。0~1の間の値になる。
  34. 34. 株式会社ソニーコンピュータサイエンス研究所 HueLampのset関数の引数の意味 hueLamp1.set("on", 0 , 1.0 , 1.0 ) ; http://colorizer.org/ もご参考に
  35. 35. 株式会社ソニーコンピュータサイエンス研究所 休憩
  36. 36. 株式会社ソニーコンピュータサイエンス研究所 関数を自分で作る void loveme( who ){ println( who + “ loves me!” ) ; }
  37. 37. 株式会社ソニーコンピュータサイエンス研究所 関数を自分で作る void loveme( who ){ println( who + “ loves me!” ) ; } 当面は、関数定義はvoidで ↓ 始めると思っててください
  38. 38. 株式会社ソニーコンピュータサイエンス研究所 関数を自分で作る void loveme( who ){ println( who + “ loves me!” ) ; } 作る関数の名前。自由に決められますが ↓ スペースは入れないでください。
  39. 39. 株式会社ソニーコンピュータサイエンス研究所 関数を自分で作る void loveme( who ){ println( who + “ loves me!” ) ; } 引数。何が来るかわからないので、 変数で受けることにします。 ↓ 名前は任意です。
  40. 40. 株式会社ソニーコンピュータサイエンス研究所 関数を自分で作る void loveme( who ){ println( who + “ loves me!” ) ; } 定義の時も、引数は ↓ カッコで囲みます。
  41. 41. 株式会社ソニーコンピュータサイエンス研究所 関数を自分で作る void loveme( who ){ println( who + “ loves me!” ) ; } ↑作る関数の処理本体です。 引数で渡ってくるwhoを使って何かします。
  42. 42. 株式会社ソニーコンピュータサイエンス研究所 関数を自分で作る void loveme( who ){ println( who + “ loves me!” ) ; } この関数は、引数に” loves me” を加えて表示します。 loveme(“megumi”) ; // megumi loves me! loveme( “クリステル” ); // クリステル loves me! loveme( “No one “ ) ; // No one loves me!
  43. 43. 株式会社ソニーコンピュータサイエンス研究所 問題 • 画面の中心に、引数で指定された直径の円 を描く関数 centerCircle を作ってください。
  44. 44. 株式会社ソニーコンピュータサイエンス研究所 答えの例 void centerCircle( diameter ){ ellipse( width/2 , height/2 , diameter , diameter ); }
  45. 45. 株式会社ソニーコンピュータサイエンス研究所 関数を作ると特別な動作をするもの • setupとdrawという関数を作ると、 特別な動作をするようになる。 • setupはプログラム開始時に一回 だけ実行される • drawは何度も繰り返し実行される • Processingならではの機能 void setup(){ println( “setup” ) ; } void draw(){ println( “draw” ) ; }
  46. 46. 株式会社ソニーコンピュータサイエンス研究所 これを使うと、絵を動かせるようになる var r = 0 ; void draw(){ ellipse( 50+20*cos(r) , 50+20*sin(r) , 20 , 20 ) ; r = r + 0.2 ; } ※sinやcosはラジアン単位の角度を引数に取る関数。 このように、関数が値として使えるものもある。
  47. 47. 株式会社ソニーコンピュータサイエンス研究所 rが大きくなりすぎたらリセット var r = 0 ; void draw(){ ellipse( 50+20*cos(r) , 50+20*sin(r) , 20 , 20 ) ; r = r + 0.2 ; if( r > 2 * PI ){ r = r – 2 * PI ; } } ※sinやcosはラジアン単位の角度を引数に取る関数。 このように、関数が値として使えるものもある。
  48. 48. 株式会社ソニーコンピュータサイエンス研究所 Ifとは?(条件分岐) if( ){ } 条件 条件が満たされ たときに実行され るもの if( ){ } else { } 条件 条件が満たされ たときに実行され るもの 条件が満たされ なかったときに 実行されるもの
  49. 49. 株式会社ソニーコンピュータサイエンス研究所 draw()はどれくらい呼ばれているのか? • デフォルトでは秒間60回らしい • frameRate関数を呼ぶと、この数を変更できる。 void setup(){ frameRate(1); // 毎秒1コマ } var r = 0 ; void draw(){ // 毎秒一回だけ呼ばれる ellipse( 50+20*cos(r) , 50+20*sin(r) , 20 , 20 ) ; r = r + 1 ; }
  50. 50. 株式会社ソニーコンピュータサイエンス研究所 問題 • hueの色を毎秒一回、自動的に変えるプログ ラムを書いてください。 hueLamp1.set("on",129 ,1,1 ) ; void setup(){ frameRate(1); // 毎秒1コマ } var r = 0 ; void draw(){ // 毎秒一回だけ呼ばれる ellipse( 50+20*cos(r) , 50+20*sin(r) , 20 , 20 ) ; r = r + 1 ; } 192.168.10.211
  51. 51. 株式会社ソニーコンピュータサイエンス研究所 答えの例 void setup(){ frameRate(1); // 毎秒1コマ } var h = 0 ; void draw(){ hueLamp1.set("on", h , 1.0 , 1.0 ) ; h = h + 60 ; if( h >= 360 ){ h = h – 360 ; } }
  52. 52. 株式会社ソニーコンピュータサイエンス研究所 画面の大きさが変わった時に呼ばれる関数 void windowResized(w,h){ size(w,h); // ここでsize関数を呼べば } // 全画面描画領域にできる windowResized関数というのがある。 引数として、画面の幅と高さが入る。
  53. 53. 株式会社ソニーコンピュータサイエンス研究所 休憩
  54. 54. 株式会社ソニーコンピュータサイエンス研究所 最後に、Kadecotという機器 • 個別の機器ではなく、総体を制御しようとする 試み • hue, saturation, lux (ルクス) • power, powerHistory, powerHistoryYesterday
  55. 55. 株式会社ソニーコンピュータサイエンス研究所 最後に、Kadecotという機器 • 個別の機器ではなく、総体を制御しようとする 試み • hue, saturation, lux (ルクス) • power, powerHistory, powerHistoryYesterday ↑現在の電力使用量 (ワット単位)
  56. 56. 株式会社ソニーコンピュータサイエンス研究所 最後に、Kadecotという機器 • 個別の機器ではなく、総体を制御しようとする 試み • hue, saturation, lux (ルクス) • power, powerHistory, powerHistoryYesterday ↑今日の累積電力使用量 (キロワット時単位)
  57. 57. 株式会社ソニーコンピュータサイエンス研究所 最後に、Kadecotという機器 • 個別の機器ではなく、総体を制御しようとする 試み • hue, saturation, lux (ルクス) • power, powerHistory, powerHistoryYesterday ↑昨日の累積電力使用量 (キロワット時単位)
  58. 58. 株式会社ソニーコンピュータサイエンス研究所 最後に、Kadecotという機器 • 個別の機器ではなく、総体を制御しようとする 試み • hue, saturation, lux (ルクス) • power, powerHistory, powerHistoryYesterday この二つの値は、30分間隔の値が一日分格納 されている ⇒ 「配列」
  59. 59. 株式会社ソニーコンピュータサイエンス研究所 配列とは? • たくさんの値をまとめて一つの変数に入れら れるようにしたもの • [1,2,3] のように表現する var x = [ 2,4,6,8,10 ] ; // 5要素からなる配列をxに格納 println( x[2] ) ; // 一つだけ取り出されて、6が表示される
  60. 60. 株式会社ソニーコンピュータサイエンス研究所 配列とは? • たくさんの値をまとめて一つの変数に入れら れるようにしたもの • [1,2,3] のように表現する var x = [ 2,4,6,8,10 ] ; // 5要素からなる配列をxに格納 println( x[2] ) ; // 一つだけ取り出されて、6が表示される なぜ6が表示されるのか??
  61. 61. 株式会社ソニーコンピュータサイエンス研究所 配列の「添え字」は0から数える var x = [ 2 , 4 , 6 , 8 , 10 ] ; println( x[2] ) ; // 6が表示される ちなみに、配列の要素数はx.length で調べられます。 x.lengthは5になります。 x[0] x[1] x[2] x[3] x[4]
  62. 62. 株式会社ソニーコンピュータサイエンス研究所 問題 • 「何でもモールス信号変換」のサービスを 使ってあなたの名前を色パターンに変換し、 hueで表示するようにしてください。 http://morse.ariafloat.com/ 例えば「赤」「青」「緑」に割り当てるとよいと思います。 赤のhue : 0 青のhue : 240 緑のhue : 120
  63. 63. 株式会社ソニーコンピュータサイエンス研究所 答えの例 void setup(){ frameRate(1) ; } // 秒間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 ; } }
  64. 64. 株式会社ソニーコンピュータサイエンス研究所 では最後に、「繰り返し」を学びます。 void setup(){ frameRate(1) ; } // 秒間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 ; } }
  65. 65. 株式会社ソニーコンピュータサイエンス研究所 では最後に、「繰り返し」を学びます。 while( ){ } 条件 条件が満たされて いる限り何度も 実行されるもの for( ; ; ){ } 条件 最初に 一度だけ 実行 毎回 最後に 実行 条件が満たされて いる限り何度も 実行されるもの While文 For文
  66. 66. 株式会社ソニーコンピュータサイエンス研究所 では最後に、「繰り返し」を学びます。 while( ){ } 条件 条件が満たされて いる限り何度も 実行されるもの for( ; ; ){ } 条件 最初に 一度だけ 実行 毎回 最後に 実行 条件が満たされて いる限り何度も 実行されるもの While文 For文
  67. 67. 株式会社ソニーコンピュータサイエンス研究所 While文の例 // 累積電力値を順々に表示するプログラム var i = 0 ; while( i < kadecot1.powerHistory.length ){ println(kadecot1.powerHistory[i] ); i=i+1 ; }
  68. 68. 株式会社ソニーコンピュータサイエンス研究所 While文の例 // 累積電力値を順々に表示するプログラム var i = 0 ; while( i < kadecot1.powerHistory.length ){ println(kadecot1.powerHistory[i] ); i=i+1 ; } ループ実行条件
  69. 69. 株式会社ソニーコンピュータサイエンス研究所 While文の例 // 累積電力値を順々に表示するプログラム var i = 0 ; while( i < kadecot1.powerHistory.length ){ println(kadecot1.powerHistory[i] ); i=i+1 ; } 繰り返し実行の本体
  70. 70. 株式会社ソニーコンピュータサイエンス研究所 While文の例 // 累積電力値を順々に表示するプログラム var i = 0 ; while( i < kadecot1.powerHistory.length ){ println(kadecot1.powerHistory[i] ); i=i+1 ; } もしこれを忘れると、プログラムは止まらなくなる
  71. 71. 株式会社ソニーコンピュータサイエンス研究所 For文でも同じことができます while( ){ } 条件 条件が満たされて いる限り何度も 実行されるもの for( ; ; ){ } 条件 最初に 一度だけ 実行 毎回 最後に 実行 条件が満たされて いる限り何度も 実行されるもの While文 For文
  72. 72. 株式会社ソニーコンピュータサイエンス研究所 For文でも同じことができます // 累積電力値を順々に表示するプログラム for( var i=0 ; i < kadecot1.powerHistory.length ; ++i){ println(kadecot1.powerHistory[i] ); }
  73. 73. 株式会社ソニーコンピュータサイエンス研究所 For文でも同じことができます // 累積電力値を順々に表示するプログラム for( var i=0 ; i < kadecot1.powerHistory.length ; ++i){ println(kadecot1.powerHistory[i] ); } 最初に一回だけ実行
  74. 74. 株式会社ソニーコンピュータサイエンス研究所 For文でも同じことができます // 累積電力値を順々に表示するプログラム for( var i=0 ; i < kadecot1.powerHistory.length ; ++i){ println(kadecot1.powerHistory[i] ); } ループ実行条件
  75. 75. 株式会社ソニーコンピュータサイエンス研究所 For文でも同じことができます // 累積電力値を順々に表示するプログラム for( var i=0 ; i < kadecot1.powerHistory.length ; ++i){ println(kadecot1.powerHistory[i] ); } 毎回ループ内実行後に実行
  76. 76. 株式会社ソニーコンピュータサイエンス研究所 For文でも同じことができます // 累積電力値を順々に表示するプログラム for( var i=0 ; i < kadecot1.powerHistory.length ; ++i){ println(kadecot1.powerHistory[i] ); } 繰り返し実行される本体
  77. 77. 株式会社ソニーコンピュータサイエンス研究所 For文でも同じことができます // 累積電力値を順々に表示するプログラム for( var i=0 ; i < kadecot1.powerHistory.length ; ++i){ println(kadecot1.powerHistory[i] ); } whileを使うかforを使うかは好き好きですが、iをひと つづつ増やしていくようなものには、for文の方がiの 処理を一か所にまとめられるのでコンパクトです。
  78. 78. 株式会社ソニーコンピュータサイエンス研究所 累積電力値をグラフにしてみましょう 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 ) ; } }
  79. 79. 株式会社ソニーコンピュータサイエンス研究所 最後の課題 • 前ページのグラフをフルスクリーンにしてみ てください • その他、いろいろな演出を加えてみてください
  80. 80. 株式会社ソニーコンピュータサイエンス研究所 最後に、家電操作の難しいところ • 誰もが同じ家電機器を持っているわけではないので、 可搬性が問題になります。 • 家電機器のネットワーク機能は一般に強くないので、 連続送信すると予期しない動作をすることがあります。 • それ以前に、命令が届かなかったり返答が来ないこと もよくあります。優しく扱ってあげてください。
  81. 81. 株式会社ソニーコンピュータサイエンス研究所 本日はここまでです http://lifedesign-app.org/ https://www.facebook.com/groups/lifedesignapp/ 今後も継続サポートします!!
  82. 82. 株式会社ソニーコンピュータサイエンス研究所 Thank you ご参加ありがとうございました!
  83. 83. 株式会社ソニーコンピュータサイエンス研究所 コネクトリーラボの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 ※今は違っているかもしれません

×