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 について

3,391 views

Published on

OSC福岡のセミナーで発表した資料です。
詳しくは以下の記事をご覧ください。

オープンソースカンファレンス2014福岡 に参加しました : だらっと学習帳
http://blog.livedoor.jp/reona396/archives/55026799.html

Published in: Technology
  • Be the first to comment

プログラミング初心者さん歓迎! アートでデザインなプログラミング言語 Processing について

  1. 1. Processingについて @reona396
  2. 2.  @reona396  情報電気電子工学専攻 修士1年  Processingについて研究中  ブログ:だらっと学習帳 http://blog.livedoor.jp/reona396/  BNN新社「[普及版]ジェネラティブ・アート」 日本語版編集協力 2
  3. 3.  プログラミング初心者の方へ  Processingとはどのようなものか  どうしてProcessingがオススメなのか  プログラミング経験者の方へ  近年のProcessingの進化  プログラミング教育とProcessing 3
  4. 4. そもそもProcessingとは 4
  5. 5.  Javaベースのプログラミング言語および環境  コンピュータグラフィック作成に特化  もちろんオープンソース&無料! 5
  6. 6. 6
  7. 7. PDE (Processing Develop Environment) スケッチ 7
  8. 8. エディタ PDE (Processing Develop Environment) 実行ボタン & 停止ボタン コンソール モードチェンジボタン (Java,JavaScript,Android…) 8
  9. 9. PDEのモードチェンジボタンから変更可能  Javaモード : 通常モード、実行ファイル作成  JavaScriptモード :Webへの公開  Androidモード : Androidアプリ作成  Tweakモード : スケッチの気軽な編集 9
  10. 10. 1. Processing.org からProcessingの zipファイルをダウンロード 2. zipファイルを展開 3. PDEを起動 4. コードを書く 5. 実行ボタンを押す 10
  11. 11. Processingで何が作れるのか 11
  12. 12. “Magnetosphere” iTunes 公式ビジュアライザ 引用元 絵心がなくても簡単に絵が描けるProcessing - @IT 12
  13. 13. メジャーリーグにおける 勝率ランキングと チーム運営費の比較 引用元 書籍「ビジュアライジング・データ」13
  14. 14. アメリカの郵便番号対応地図 14引用元 書籍「ビジュアライジング・データ」
  15. 15. アメリカの郵便番号対応地図 15引用元 書籍「ビジュアライジング・データ」
  16. 16. 16
  17. 17. 17
  18. 18.  ArduinoはProcessingベース  センサーデータをProcessingでグラフ化等 18
  19. 19.  PDEに「Android」モード搭載  ProcessingのスケッチをAndroid上で動作可能 19
  20. 20. Processingがオススメな理由 20
  21. 21.  文法が簡単  環境を整えるのが簡単  プログラムの結果がすぐにわかる  プログラムの結果が楽しくわかる  応用が利く  充実の制作サポート  Tweakモード  デバッグとコード補完  OpenProcessing 21
  22. 22.  文法が簡単  環境を整えるのが簡単  プログラムの結果がすぐにわかる  プログラムの結果が楽しくわかる  応用が利く  充実の制作サポート  Tweakモード  デバッグとコード補完  OpenProcessing 22
  23. 23. 例 : 以下の条件をProcessingとJavaで描く  大きさは200×200  背景は白  (x,y) = (100,100) の位置に黒いドットを描く 23
  24. 24. 引用元 ProcessingとJavaの関係 – Expressive Programming |Yasushi NoguchiClass size(200, 200); background(255); // Draw a dot point(100, 100); Processingの場合 24
  25. 25. import java.applet.Applet; import java.awt.Graphics; import java.awt.Color; public class GraphicsTest extends Applet{ public void paint(Graphics g){ g.setColor(Color.white); g.fillRect(0, 0, 200, 200); g.setColor(Color.black); g.drawLine(100, 100, 100, 100); } } Javaの場合 25 引用元 ProcessingとJavaの関係 – Expressive Programming |Yasushi NoguchiClass
  26. 26.  文法が簡単  環境を整えるのが簡単  プログラムの結果がすぐにわかる  プログラムの結果が楽しくわかる  応用が利く  充実の制作サポート  Tweakモード  デバッグとコード補完  OpenProcessing 26
  27. 27. エディタは アレじゃないと… まずは コンパイラを…初心者を悩ませる壁 27
  28. 28. 初心者を悩ませる壁 実際に「プログラミング」を始めるまでが 長い!! 28
  29. 29. 29 1. Processing.org からProcessingの zipファイルをダウンロード 2. zipファイルを展開 3. PDEを起動 4. コードを書く 5. 実行ボタンを押す Processingならこの5ステップだけ!
  30. 30.  文法が簡単  環境を整えるのが簡単  プログラムの結果がすぐにわかる  プログラムの結果が楽しくわかる  応用が利く  充実の制作サポート  Tweakモード  デバッグとコード補完  OpenProcessing 30
  31. 31.  プログラムを書いて実行ボタンを押すだけ  エラーもコンソールに出力 31
  32. 32.  文法が簡単  環境を整えるのが簡単  プログラムの結果がすぐにわかる  プログラムの結果が楽しくわかる  応用が利く  充実の制作サポート  Tweakモード  デバッグとコード補完  OpenProcessing 32
  33. 33. 従来のプログラミングの演習  四則演算の結果を出力  数字のソート 33
  34. 34. 従来のプログラミングの演習  四則演算の結果を出力  数字のソート 本当はゲームを 作りたいのに… なんか退屈… これでアプリとか 作れるのかな… 34
  35. 35. Processingを利用したプログラミング演習  単純なお絵描き  ゲーム作り  Webに展示して品評会  Androidアプリへの応用 35
  36. 36. Processingを利用したプログラミング演習  単純なお絵描き  ゲーム作り  Webに展示して品評会  Androidアプリへの応用 36 モチベーションを保ったまま 学習に取り組める
  37. 37.  文法が簡単  環境を整えるのが簡単  プログラムの結果がすぐにわかる  プログラムの結果が楽しくわかる  応用が利く  充実の制作サポート  Tweakモード  デバッグとコード補完  OpenProcessing 37
  38. 38.  ProcessingはJavaベース →それほどクセは強くない  JavaScriptモードやPythonモード等 他言語との連携の充実化  アプリケーション作成など実践につながる 38
  39. 39.  文法が簡単  環境を整えるのが簡単  プログラムの結果がすぐにわかる  プログラムの結果が楽しくわかる  応用が利く  充実の制作サポート  Tweakモード  デバッグとコード補完  OpenProcessing 39
  40. 40.  スケッチを実行しながらプログラムを編集  変数、色を結果を見ながら変更可能  他の人がつくったプログラムの解析に便利 40
  41. 41. 41
  42. 42.  文法が簡単  環境を整えるのが簡単  プログラムの結果がすぐにわかる  プログラムの結果が楽しくわかる  応用が利く  充実の制作サポート  Tweakモード  デバッグとコード補完  OpenProcessing 42
  43. 43.  デバッグ機能が搭載されたことで リアルタイムにエラーを検出  コード補完機能による入力補助 43
  44. 44.  文法が簡単  環境を整えるのが簡単  プログラムの結果がすぐにわかる  プログラムの結果が楽しくわかる  応用が利く  充実の制作サポート  Tweakモード  デバッグとコード補完  OpenProcessing 44
  45. 45.  Processingの作品投稿・共有サイト  多くのProcessingユーザが利用  コード閲覧やコメント機能等 45
  46. 46. 実際に授業をしてみて 46
  47. 47.  学部二年生向け「プログラミング演習」  本来はC言語によるアルゴリズムの実装の学習  毎回冒頭でProcessingの情報を提供  毎回のアルゴリズム実装の課題はC言語で出題  学期末課題としてProcessingで自由に作品制作  学部一年生向け「情報リテラシー実習」  本来はLinuxの操作に関する授業  学期末にプログラミング入門として導入 47
  48. 48.  二年生の授業  C言語より興味を持って接してもらえた  意欲的な学生は本格的なゲームを制作  一年生の授業  「このしくみはゲームではこういう所に 利用されています」で注目度が上がった  導入、Processingの独自文法の解説、 プログラミングの基礎が90分に収まった  自分でプログラムを改造して 積極的にしくみを試している学生も多数 48
  49. 49. まとめ 49
  50. 50.  プログラミング初心者の方へ  Processingとはどのようなものか  どうしてProcessingがオススメなのか  プログラミング経験者の方へ  近年のProcessingの進化  プログラミング教育とProcessing 50
  51. 51. ご意見、ご感想はこちらへお願いします Twitter : @reona396 ご覧いただきありがとうございました! 解説記事もぜひご覧ください! オープンソースカンファレンス2014福岡 に 参加しました : だらっと学習帳 51

×