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.

プログラム初級講座 - メディア芸術をはじめよう

8,306 views

Published on

  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2u6xbL5 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

プログラム初級講座 - メディア芸術をはじめよう

  1. 1. プログラム初級講座 -メディア芸術をはじめよう 2014年2月16日 第17回メディア芸術祭ワークショップ
  2. 2. プログラミングを始めよう!
  3. 3. コードが書けると、楽しい!!
  4. 4. コードが書けると、かっこいい!!
  5. 5. メディア芸術とプログラミング ‣ code.orgプロジェクト (http://code.org/)
  6. 6. メディア芸術とプログラミング ‣ コードアカデミー (http://www.codecademy.com/ja)
  7. 7. メディア芸術とプログラミング ‣ コードアカデミー高等学校 (http://code.ac.jp/)
  8. 8. プログラミングを始めよう! ‣ ワークショップの内容 ‣ 「プログラム初級講座-メディア芸術をはじめよう」 ! ‣ Raspberry Pi (ラズベリー・パイ) という小さなコンピュータをつかっ て、プログラムを体験!!
  9. 9. プログラミングを始めよう! ‣ 手元に置いてある箱を、開けてみましょう!!
  10. 10. Raspberry Pi (ラズベリー・パイ) 登場!
  11. 11. Raspberry Pi
  12. 12. 小さい、安い、シンプル、 かわいい、そこそこ速い!!
  13. 13. 今一番熱いコンピュータ!
  14. 14. 改造して、楽しむ!!
  15. 15. Raspberry Pi = 自分の楽器 改造して自分だけのものに
  16. 16. Raspberry Pi を使ってみよう!
  17. 17. Raspberry Pi を使ってみよう! ‣ 図を参考にしながら、順番に設定していきます。
  18. 18. SDカードを挿入
  19. 19. ディスプレイに接続 (HDMI)
  20. 20. マウスとキーボードを接続
  21. 21. ネットワークケーブルを接続
  22. 22. 電源ケーブルを接続 (Power ON!)
  23. 23. 準備完了 いよいよ、システム起動!
  24. 24. システム起動! ‣ しばらく、起動画面が表示される (いろいろ設定中…)
  25. 25. システム起動! ‣ 設定が完了すると、自動的に起動する (はず) ! ‣ 今回のワークショップのためのスペシャルバージョン!
  26. 26. Linux ‣ Raspberry Pi の中身は? ‣ → Linux (リナックス)
  27. 27. Linux ‣ リーナス・トーバルズを中心にコミュニティで開発 (1991 ∼) ‣ オープンソースのOS
  28. 28. Linux ‣ Raspberry Pi には、Linuxを最適化した Rasbian OS が搭載
  29. 29. プログラミングを始めよう!
  30. 30. プログラミングを始めよう! ‣ いよいよ、プログラミングに挑戦! ‣ Processing というプログラミング環境をつかいます
  31. 31. Processingに触れてみる ‣ まずは起動してみる ‣ Processingの起動画面
  32. 32. Processingに触れてみる ‣ メニューの解説 ! ‣ ‣ ‣ ‣ Run (実行) Stop (停止) New (新規スケッチ作成) Open (ファイルを開く) ‣ Save (ファイルを保存) ‣ Export (プログラム書き出し)
  33. 33. コンピュータで絵を描くということ ‣ コンピュータの画面はどうなっているのか? ‣ コンピュータの画面を拡大していくと... ‣ 縦横に並んだ点の集合 → ピクセル (Pixel) ‣ 一つのピクセルは赤、緑、青の三原色から成り立っている
  34. 34. コンピュータで絵を描くということ ‣ コンピュータ画面は、縦横沢山のピクセルから構成された巨大なエク セルの表のようなもの ‣ 例:1024 x 768 の液晶画面 ‣ 横に1024列縦に768行ならんだ巨大な表 ‣ それぞれのセルにR,G,B,A(アルファ値)が格納されている A B G R
  35. 35. 座標 ‣ 座標 (Cordinate): ‣ 点の位置を明確にするために与えられる数の組のこと ! ‣ コンピュータの画面の1点を指定するためには、いくつのパラメータ が必要か? ‣ 2つの数字 (横と縦) ! ‣ 横の位置 → x座標 ‣ 縦の位置 → y座標
  36. 36. Processingの座標系 ‣ 左上が原点 (0, 0) ‣ 右に行くほどx座標の値が増える ‣ 下に行くほどy座標の値が増える ‣ 例:100 x 100の平面の座標系 (0, 0) (0, 100) (100, 0)
  37. 37. キャンバスを用意する ‣ 形を描いていく、画面 (キャンバス) を用意する ‣ size関数:ウインドウの大きさを指定 ! size(<ウインドウ幅>,<ウインドウ高さ>); ! ! ‣ 例:幅640pixel, 高さ480pixelのウィンドウを開く ! size(640, 480);
  38. 38. キャンバスを用意する ‣ ウィンドウが表示される!
  39. 39. 点を描く ‣ point関数:点を描く ! point(<X座標>,<Y座標>); ! ! ‣ 例:X座業200, Y座標200の位置に点を描く ! point(200, 200);
  40. 40. キャンバスを用意する ‣ 点が描かれる
  41. 41. キャンバスを用意する ‣ 点が描かれる ココ
  42. 42. 直線を描く ‣ line関数:直線を描く ! line(<X始点>,<Y始点>,<X終点>,<Y終点>); ! ! ‣ 例: ! line(80,40,400,380);
  43. 43. キャンバスを用意する ‣ 線が追加 ココ
  44. 44. 長方形を描く ‣ rect関数:長方形を描く ! rect(<X座標>,<Y座標>,<幅>,<高さ>); ! ! ‣ 例: ! rect(300,200,200,180);
  45. 45. キャンバスを用意する ‣ さらに四角形が追加 ココ
  46. 46. 楕円を描く ‣ ellipse関数:円、楕円を描く ! ellipse(<X座標>,<Y座標>,<楕円の幅>,<楕円の高さ>); ! ! ‣ 例: ! ellipse(400,200,150,200);
  47. 47. キャンバスを用意する ‣ 楕円形が追加
  48. 48. 色の指定 ‣ 色を指定するには? ‣ R(赤) G(緑) B(青)の三原色で指定する ! ‣ 加法混色 (光の三原色であることに注意) ←→ 色料の三原色 光の三原色 色料の三原色
  49. 49. 色の指定 ‣ 3つの色の属性 ‣ 背景色 background関数 ! bacground(background(<Rの値>, <Gの値>, <Bの値>); ! ‣ 線に色をつける stroke関数 ! stroke(background(<Rの値>, <Gの値>, <Bの値>); ! ‣ 塗りの色をつける fill関数 ! fill(background(<Rの値>, <Gの値>, <Bの値>);
  50. 50. 色の指定 ‣ 背景色、線の色、塗りの色を追加してみる size(640, 480); ! background(0, 0, 127); stroke(255, 127, 63); fill(63, 127, 255); ! point(200, 200); line(80,40,400,380); rect(300,200,200,180); ellipse(400,200,150,200);
  51. 51. キャンバスを用意する ‣ 色が指定された!
  52. 52. クイズ: 形を描いてみる
  53. 53. この形を描いてみよう! ‣ 会場のあちこちにある、この図形
  54. 54. この形を描いてみよう! ‣ ヒント! size(640, 480); background(255, 255, 255); stroke(255, 0, 0); noFill(); ! ellipse(320, 240, 10, 10); ellipse(320, 240, 20, 20);
  55. 55. 解答例!
  56. 56. この形を描いてみよう! ‣ たとえば、こんな感じ size(640, 480); background(255, 255, 255); stroke(255, 0, 0); noFill(); ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, stroke(0, 0, 0); line(250, 250, 450, 350); ! 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 10, 10); 20, 20); 30, 30); 40, 40); 50, 50); 60, 60); 70, 70); 80, 80); 90, 90); 100, 100); 110, 110); 120, 120); 130, 130); 140, 140); 150, 150); 160, 160); ! 240, 240, 240, 240, 170, 180, 190, 200, 170); 180); 190); 200);
  57. 57. この形を描いてみよう! ‣ たとえば、こんな感じ
  58. 58. この形を描いてみよう! ‣ さらに、線の太さを変えてみる size(640, 480); background(255, 255, 255); stroke(255, 0, 0); noFill(); ! strokeWeight(4); ! ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 10, 10); 20, 20); 30, 30); 40, 40); 50, 50); 60, 60); 70, 70); 80, 80); 90, 90); 100, 100); 110, 110); 120, 120); 130, 130); 140, 140); ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ! 240, 240, 240, 240, 240, 240, 150, 160, 170, 180, 190, 200, 150); 160); 170); 180); 190); 200); stroke(0, 0, 0); line(250, 250, 450, 350);
  59. 59. この形を描いてみよう! ‣ 出来た!
  60. 60. この形を描いてみよう! - 応用編 ‣ もっと、プログラムをスマートに! ‣ 円を少しずつ大きさを変えながら書いている部分 ‣ より少ない記述で実現可能 ! ‣ 10ピクセルずつ直径を増加させながら、円を描いている
  61. 61. この形を描いてみよう! ‣ この部分 ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ellipse(320, ! 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 10, 10); 20, 20); 30, 30); 40, 40); 50, 50); 60, 60); 70, 70); 80, 80); 90, 90); 100, 100); 110, 110); 120, 120); 130, 130); 140, 140); 150, 150); 160, 160); 170, 170); 180, 180); 190, 190); 200, 200);
  62. 62. この形を描いてみよう! - 応用編 ‣ くりかえしの構文 ‣ 「for文」をつかうと、繰り返しを指定できる ! ‣ 例えば、10回繰り返すという場合は for(int i = 0; i < 10; i++){ ! くりかえす命令 ! }
  63. 63. この形を描いてみよう! ‣ くりかえしの構文「for文」で、こんなにスッキリ! size(640, 480); background(255, 255, 255); stroke(255, 0, 0); noFill(); ! strokeWeight(4); ! for (int i = 0; i < 20; i++) { ellipse(320, 240, i * 10, i * 10); } ! stroke(0, 0, 0); line(250, 250, 450, 350);
  64. 64. この形を描いてみよう! - 応用編 ‣ 「for文」の中で、いろいろ操作してみる ! ‣ ‣ ‣ ‣ 色の変化 線の太さ 縦横の比率 …etc
  65. 65. アニメーションさせてみよう!
  66. 66. アニメーションさせてみよう! ‣ サンプルプログラムをみながら、解説していきます ! ‣ 物体が動くアニメーション ‣ たくさんの物体が同時に動くアニメーション
  67. 67. アニメーションさせてみよう! ‣ アニメーションを理解するための、Processingの基本構造 準備 setup 描画 draw くりかえし
  68. 68. さらに先に進むには?
  69. 69. さらに先に進むには? ‣ デスクトップをカスタマイズしてみよう!
  70. 70. さらに先に進むには? ‣ 自作ケースを作ってみよう!
  71. 71. さらに先に進むには? ‣ センサーやデバイスを繋げてみよう!
  72. 72. Rapiroデモンストレーション!

×