プログラム初級講座 - メディア芸術をはじめよう
- 8. プログラミングを始めよう! ‣ ワークショップの内容 ‣ 「プログラム初級講座-メディア芸術をはじめよう」 ! ‣ Raspberry Pi (ラズベリー・パイ) という小さなコンピュータをつかっ て、プログラムを体験!!
- 10. Raspberry Pi (ラズベリー・パイ) 登場!
- 12. Raspberry Pi
- 14. 今一番熱いコンピュータ!
- 15. 改造して、楽しむ!!
- 17. Raspberry Pi = 自分の楽器 改造して自分だけのものに
- 27. Raspberry Pi を使ってみよう! ‣ 図を参考にしながら、順番に設定していきます。
- 29. SDカードを挿入
- 30. ディスプレイに接続 (HDMI)
- 31. マウスとキーボードを接続
- 32. ネットワークケーブルを接続
- 36. システム起動! ‣ 設定が完了すると、自動的に起動する (はず) ! ‣ 今回のワークショップのためのスペシャルバージョン!
- 37. Linux ‣ Raspberry Pi の中身は? ‣ → Linux (リナックス)
- 38. Linux ‣ リーナス・トーバルズを中心にコミュニティで開発 (1991 ∼) ‣ オープンソースのOS
- 39. Linux ‣ Raspberry Pi には、Linuxを最適化した Rasbian OS が搭載
- 40. プログラミングを始めよう!
- 41. プログラミングを始めよう! ‣ いよいよ、プログラミングに挑戦! ‣ Processing というプログラミング環境をつかいます
- 43. Processingに触れてみる ‣ メニューの解説 ! ‣ ‣ ‣ ‣ Run (実行) Stop (停止) New (新規スケッチ作成) Open (ファイルを開く) ‣ Save (ファイルを保存) ‣ Export (プログラム書き出し)
- 44. コンピュータで絵を描くということ ‣ コンピュータの画面はどうなっているのか? ‣ コンピュータの画面を拡大していくと... ‣ 縦横に並んだ点の集合 → ピクセル (Pixel) ‣ 一つのピクセルは赤、緑、青の三原色から成り立っている
- 45. コンピュータで絵を描くということ ‣ コンピュータ画面は、縦横沢山のピクセルから構成された巨大なエク セルの表のようなもの ‣ 例：1024 x 768 の液晶画面 ‣ 横に1024列縦に768行ならんだ巨大な表 ‣ それぞれのセルにR,G,B,A(アルファ値)が格納されている A B G R
- 46. 座標 ‣ 座標 (Cordinate)： ‣ 点の位置を明確にするために与えられる数の組のこと ! ‣ コンピュータの画面の1点を指定するためには、いくつのパラメータ が必要か? ‣ 2つの数字 (横と縦) ! ‣ 横の位置 → x座標 ‣ 縦の位置 → y座標
- 47. Processingの座標系 ‣ 左上が原点 (0, 0) ‣ 右に行くほどx座標の値が増える ‣ 下に行くほどy座標の値が増える ‣ 例：100 x 100の平面の座標系 (0, 0) (0, 100) (100, 0)
- 48. キャンバスを用意する ‣ 形を描いていく、画面 (キャンバス) を用意する ‣ size関数：ウインドウの大きさを指定 ! size(<ウインドウ幅＞,＜ウインドウ高さ>); ! ! ‣ 例：幅640pixel, 高さ480pixelのウィンドウを開く ! size(640, 480);
- 50. 点を描く ‣ point関数：点を描く ! point(＜X座標＞,＜Y座標＞); ! ! ‣ 例：X座業200, Y座標200の位置に点を描く ! point(200, 200);
- 59. 色の指定 ‣ 色を指定するには? ‣ R(赤) G(緑) B(青)の三原色で指定する ! ‣ 加法混色 (光の三原色であることに注意) ←→ 色料の三原色 光の三原色 色料の三原色
- 60. 色の指定 ‣ 3つの色の属性 ‣ 背景色 background関数 ! bacground(background(＜Rの値＞, ＜Gの値＞, ＜Bの値＞); ! ‣ 線に色をつける stroke関数 ! stroke(background(＜Rの値＞, ＜Gの値＞, ＜Bの値＞); ! ‣ 塗りの色をつける fill関数 ! fill(background(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);
- 61. 色の指定 ‣ 背景色、線の色、塗りの色を追加してみる 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);
- 63. クイズ: 形を描いてみる
- 65. この形を描いてみよう! ‣ ヒント! size(640, 480); background(255, 255, 255); stroke(255, 0, 0); noFill(); ! ellipse(320, 240, 10, 10); ellipse(320, 240, 20, 20);
- 66. 解答例!
- 67. この形を描いてみよう! ‣ たとえば、こんな感じ 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);
- 69. この形を描いてみよう! ‣ さらに、線の太さを変えてみる 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);
- 71. この形を描いてみよう! - 応用編 ‣ もっと、プログラムをスマートに! ‣ 円を少しずつ大きさを変えながら書いている部分 ‣ より少ない記述で実現可能 ! ‣ 10ピクセルずつ直径を増加させながら、円を描いている
- 72. この形を描いてみよう! ‣ この部分 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);
- 73. この形を描いてみよう! - 応用編 ‣ くりかえしの構文 ‣ 「for文」をつかうと、繰り返しを指定できる ! ‣ 例えば、10回繰り返すという場合は for(int i = 0; i < 10; i++){ ! くりかえす命令 ! }
- 74. この形を描いてみよう! ‣ くりかえしの構文「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);
- 75. この形を描いてみよう! - 応用編 ‣ 「for文」の中で、いろいろ操作してみる ! ‣ ‣ ‣ ‣ 色の変化 線の太さ 縦横の比率 …etc
- 76. アニメーションさせてみよう!
- 77. アニメーションさせてみよう! ‣ サンプルプログラムをみながら、解説していきます ! ‣ 物体が動くアニメーション ‣ たくさんの物体が同時に動くアニメーション
- 79. さらに先に進むには?