プログラム初級講座 -メディア芸術をはじめよう2014年2月16日 第17回メディア芸術祭ワークショップ

プログラミングを始めよう!

コードが書けると、楽しい!!

コードが書けると、かっこいい!!

メディア芸術とプログラミング‣ code.orgプロジェクト (http://code.org/)

メディア芸術とプログラミング‣ コードアカデミー (http://www.codecademy.com/ja)

メディア芸術とプログラミング‣ コードアカデミー高等学校 (http://code.ac.jp/)

プログラミングを始めよう!‣ ワークショップの内容 ‣ 「プログラム初級講座-メディア芸術をはじめよう」 !

‣ Raspberry Pi (ラズベリー・パイ) という小さなコンピュータをつかって、プログラムを体験!!

プログラミングを始めよう!‣ 手元に置いてある箱を、開けてみましょう!!

Raspberry Pi (ラズベリー・パイ) 登場!

Raspberry Pi

小さい、安い、シンプル、 かわいい、そこそこ速い!!

今一番熱いコンピュータ!

改造して、楽しむ!!

Raspberry Pi = 自分の楽器 改造して自分だけのものに

https://www.google.com/search?hl=en&tbm=isch&q=raspberry+pi+case&oq=raspberry+pi+case&gs_l=img.3..0l10.87227.90823.0.90981.13.8.4.1.1.1.155.770.5j3.8.0....0...1c.1.35.img..1.12.748.LWoDiZrJFow&bav=on.2,or.r_cp.r_qf.&bvm=bv.61535280,d.dGI,pv.xjs.s.en_US.Pk6WM5xCqOI.O&biw=1673&bih=1240&dpr=1

https://www.google.com/search?hl=en&tbm=isch&q=raspberry+pi+case&oq=raspberry+pi+case&gs_l=img.3..0l10.87227.90823.0.90981.13.8.4.1.1.1.155.770.5j3.8.0....0...1c.1.35.img..1.12.748.LWoDiZrJFow&bav=on.2,or.r_cp.r_qf.&bvm=bv.61535280,d.dGI,pv.xjs.s.en_US.Pk6WM5xCqOI.O&biw=1673&bih=1240&dpr=1

http://www.youtube.com/watch?v=xwc7Hs33cAk

http://www.youtube.com/watch?v=5npkz0xY1fo

http://www.dexterindustries.com/BrickPi.html

http://www.youtube.com/watch?v=V4soCq7QblE

http://robot-kingdom.com/flying-linux-machine-raspberry-pi-quadcopter/

http://www.youtube.com/watch?v=i_r3z1jYHAc

Raspberry Pi を使ってみよう!

Raspberry Pi を使ってみよう!‣ 図を参考にしながら、順番に設定していきます。

SDカードを挿入

ディスプレイに接続 (HDMI)

マウスとキーボードを接続

ネットワークケーブルを接続

電源ケーブルを接続 (Power ON!)

準備完了 いよいよ、システム起動!

システム起動!‣ しばらく、起動画面が表示される (いろいろ設定中…)

システム起動!‣ 設定が完了すると、自動的に起動する (はず) ! ‣ 今回のワークショップのためのスペシャルバージョン!

Linux‣ Raspberry Pi の中身は? ‣ → Linux (リナックス)

Linux‣ リーナス・トーバルズを中心にコミュニティで開発 (1991 ～) ‣ オープンソースのOS

Linux‣ Raspberry Pi には、Linuxを最適化した Rasbian OS が搭載

プログラミングを始めよう!

プログラミングを始めよう!‣ いよいよ、プログラミングに挑戦! ‣ Processing というプログラミング環境をつかいます

Processingに触れてみる‣ まずは起動してみる ‣ Processingの起動画面

Processingに触れてみる‣ メニューの解説 !

‣ Run (実行) ‣ Stop (停止) ‣ New (新規スケッチ作成) ‣ Open (ファイルを開く) ‣ Save (ファイルを保存) ‣ Export (プログラム書き出し)

コンピュータで絵を描くということ‣ コンピュータの画面はどうなっているのか? ‣ コンピュータの画面を拡大していくと... ‣ 縦横に並んだ点の集合 → ピクセル (Pixel) ‣ 一つのピクセルは赤、緑、青の三原色から成り立っている

コンピュータで絵を描くということ‣ コンピュータ画面は、縦横沢山のピクセルから構成された巨大なエクセルの表のようなもの

‣ 例：1024 x 768 の液晶画面 ‣ 横に1024列縦に768行ならんだ巨大な表 ‣ それぞれのセルにR,G,B,A(アルファ値)が格納されている

RG

BA

座標‣ 座標 (Cordinate)： ‣ 点の位置を明確にするために与えられる数の組のこと

!‣ コンピュータの画面の1点を指定するためには、いくつのパラメータが必要か?

‣ 2つの数字 (横と縦) !

‣ 横の位置 → x座標 ‣ 縦の位置 → y座標

Processingの座標系‣ 左上が原点 (0, 0) ‣ 右に行くほどx座標の値が増える ‣ 下に行くほどy座標の値が増える ‣ 例：100 x 100の平面の座標系

(0, 0) (100, 0)

(0, 100)

キャンバスを用意する‣ 形を描いていく、画面 (キャンバス) を用意する ‣ size関数：ウインドウの大きさを指定 !size(<ウインドウ幅＞,＜ウインドウ高さ>);

!!

‣ 例：幅640pixel, 高さ480pixelのウィンドウを開く !size(640, 480);

キャンバスを用意する‣ ウィンドウが表示される!

点を描く‣ point関数：点を描く !point(＜X座標＞,＜Y座標＞);

!!

‣ 例：X座業200, Y座標200の位置に点を描く !point(200, 200);

キャンバスを用意する‣ 点が描かれる

キャンバスを用意する‣ 点が描かれる

ココ

直線を描く‣ line関数：直線を描く !

line(＜X始点＞,＜Y始点＞,＜X終点＞,＜Y終点＞)； !!‣ 例： !line(80,40,400,380);

キャンバスを用意する‣ 線が追加

ココ

長方形を描く‣ rect関数：長方形を描く !

rect(＜X座標＞,＜Y座標＞,＜幅＞,＜高さ＞); !

!‣ 例： !rect(300,200,200,180);

キャンバスを用意する‣ さらに四角形が追加

ココ

楕円を描く‣ ellipse関数：円、楕円を描く !

ellipse(＜Ｘ座標＞,＜Ｙ座標＞,＜楕円の幅＞,＜楕円の高さ＞); !

!‣ 例： !

ellipse(400,200,150,200);

キャンバスを用意する‣ 楕円形が追加

色の指定‣ 色を指定するには? ‣ R(赤) G(緑) B(青)の三原色で指定する !

‣ 加法混色 (光の三原色であることに注意) ←→ 色料の三原色

光の三原色 色料の三原色

色の指定‣ 3つの色の属性 ‣ 背景色 background関数

! bacground(background(＜Rの値＞, ＜Gの値＞, ＜Bの値＞); !

‣ 線に色をつける stroke関数 !

stroke(background(＜Rの値＞, ＜Gの値＞, ＜Bの値＞); !

‣ 塗りの色をつける fill関数 !

fill(background(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);

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);

色の指定‣ 背景色、線の色、塗りの色を追加してみる

キャンバスを用意する‣ 色が指定された!

クイズ: 形を描いてみる

この形を描いてみよう!‣ 会場のあちこちにある、この図形

size(640, 480); background(255, 255, 255); stroke(255, 0, 0); noFill(); !ellipse(320, 240, 10, 10); ellipse(320, 240, 20, 20);

この形を描いてみよう!‣ ヒント!

解答例!

size(640, 480); background(255, 255, 255); stroke(255, 0, 0); noFill(); !ellipse(320, 240, 10, 10); ellipse(320, 240, 20, 20); ellipse(320, 240, 30, 30); ellipse(320, 240, 40, 40); ellipse(320, 240, 50, 50); ellipse(320, 240, 60, 60); ellipse(320, 240, 70, 70); ellipse(320, 240, 80, 80); ellipse(320, 240, 90, 90); ellipse(320, 240, 100, 100); ellipse(320, 240, 110, 110); ellipse(320, 240, 120, 120); ellipse(320, 240, 130, 130); ellipse(320, 240, 140, 140); ellipse(320, 240, 150, 150); ellipse(320, 240, 160, 160);

ellipse(320, 240, 170, 170); ellipse(320, 240, 180, 180); ellipse(320, 240, 190, 190); ellipse(320, 240, 200, 200); !stroke(0, 0, 0); line(250, 250, 450, 350);

この形を描いてみよう!‣ たとえば、こんな感じ

この形を描いてみよう!‣ たとえば、こんな感じ

size(640, 480); background(255, 255, 255); stroke(255, 0, 0); noFill(); !strokeWeight(4); !ellipse(320, 240, 10, 10); ellipse(320, 240, 20, 20); ellipse(320, 240, 30, 30); ellipse(320, 240, 40, 40); ellipse(320, 240, 50, 50); ellipse(320, 240, 60, 60); ellipse(320, 240, 70, 70); ellipse(320, 240, 80, 80); ellipse(320, 240, 90, 90); ellipse(320, 240, 100, 100); ellipse(320, 240, 110, 110); ellipse(320, 240, 120, 120); ellipse(320, 240, 130, 130); ellipse(320, 240, 140, 140);

ellipse(320, 240, 150, 150); ellipse(320, 240, 160, 160); ellipse(320, 240, 170, 170); ellipse(320, 240, 180, 180); ellipse(320, 240, 190, 190); ellipse(320, 240, 200, 200); !stroke(0, 0, 0); line(250, 250, 450, 350);

この形を描いてみよう!‣ さらに、線の太さを変えてみる

この形を描いてみよう!‣ 出来た!

この形を描いてみよう! - 応用編‣ もっと、プログラムをスマートに! ‣ 円を少しずつ大きさを変えながら書いている部分 ‣ より少ない記述で実現可能 !

‣ 10ピクセルずつ直径を増加させながら、円を描いている

ellipse(320, 240, 10, 10); ellipse(320, 240, 20, 20); ellipse(320, 240, 30, 30); ellipse(320, 240, 40, 40); ellipse(320, 240, 50, 50); ellipse(320, 240, 60, 60); ellipse(320, 240, 70, 70); ellipse(320, 240, 80, 80); ellipse(320, 240, 90, 90); ellipse(320, 240, 100, 100); ellipse(320, 240, 110, 110); ellipse(320, 240, 120, 120); ellipse(320, 240, 130, 130); ellipse(320, 240, 140, 140); ellipse(320, 240, 150, 150); ellipse(320, 240, 160, 160); ellipse(320, 240, 170, 170); ellipse(320, 240, 180, 180); ellipse(320, 240, 190, 190); ellipse(320, 240, 200, 200); !

この形を描いてみよう!‣ この部分

for(int i = 0; i < 10; i++){ ! くりかえす命令 !}

この形を描いてみよう! - 応用編‣ くりかえしの構文 ‣ 「for文」をつかうと、繰り返しを指定できる !

‣ 例えば、10回繰り返すという場合は

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);

この形を描いてみよう!‣ くりかえしの構文「for文」で、こんなにスッキリ!

この形を描いてみよう! - 応用編‣ 「for文」の中で、いろいろ操作してみる !

‣ 色の変化 ‣ 線の太さ ‣ 縦横の比率 ‣ …etc

アニメーションさせてみよう!

アニメーションさせてみよう!‣ サンプルプログラムをみながら、解説していきます !

‣ 物体が動くアニメーション ‣ たくさんの物体が同時に動くアニメーション

アニメーションさせてみよう!‣ アニメーションを理解するための、Processingの基本構造

setup

draw

準備

描画 くりかえし

さらに先に進むには?

さらに先に進むには?‣ デスクトップをカスタマイズしてみよう!

さらに先に進むには?‣ 自作ケースを作ってみよう!

さらに先に進むには?‣ センサーやデバイスを繋げてみよう!

Rapiroデモンストレーション!