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

6,902 views
6,808 views

Published on

0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,902
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
46
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

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

  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デモンストレーション!

×