SlideShare a Scribd company logo
プログラム初級講座
-メディア芸術をはじめよう
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 = 自分の楽器
改造して自分だけのものに
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
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(アルファ値)が格納されている

A

B

G

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

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

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

(0, 100)

(100, 0)
キャンバスを用意する
‣ 形を描いていく、画面 (キャンバス) を用意する
‣ 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(<X座標>,<Y座標>,<楕円の幅>,<楕円の高さ>);

!
!
‣ 例:

!
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,
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);
この形を描いてみよう!
‣ たとえば、こんな感じ
この形を描いてみよう!
‣ さらに、線の太さを変えてみる
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);
この形を描いてみよう!
‣ 出来た!
この形を描いてみよう! - 応用編
‣ もっと、プログラムをスマートに!
‣ 円を少しずつ大きさを変えながら書いている部分
‣ より少ない記述で実現可能

!
‣ 10ピクセルずつ直径を増加させながら、円を描いている
この形を描いてみよう!
‣ この部分
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);
この形を描いてみよう! - 応用編
‣ くりかえしの構文
‣ 「for文」をつかうと、繰り返しを指定できる

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

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

!
}
この形を描いてみよう!
‣ くりかえしの構文「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);
この形を描いてみよう! - 応用編
‣ 「for文」の中で、いろいろ操作してみる

!
‣
‣
‣
‣

色の変化
線の太さ
縦横の比率
…etc
アニメーションさせてみよう!
アニメーションさせてみよう!
‣ サンプルプログラムをみながら、解説していきます

!
‣ 物体が動くアニメーション
‣ たくさんの物体が同時に動くアニメーション
アニメーションさせてみよう!
‣ アニメーションを理解するための、Processingの基本構造

準備

setup

描画

draw

くりかえし
さらに先に進むには?
さらに先に進むには?
‣ デスクトップをカスタマイズしてみよう!
さらに先に進むには?
‣ 自作ケースを作ってみよう!
さらに先に進むには?
‣ センサーやデバイスを繋げてみよう!
Rapiroデモンストレーション!

More Related Content

What's hot

Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Media Art II 2013  第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズムMedia Art II 2013  第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Atsushi Tadokoro
 
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門
Atsushi Tadokoro
 
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替えMedia Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Atsushi Tadokoro
 
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oFメディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
Atsushi Tadokoro
 
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーションメディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
Atsushi Tadokoro
 
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
Atsushi Tadokoro
 
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくるデジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
Atsushi Tadokoro
 
coma - creator’s talk session: Code - openFrameworks
coma - creator’s talk session: Code - openFrameworkscoma - creator’s talk session: Code - openFrameworks
coma - creator’s talk session: Code - openFrameworks
Atsushi Tadokoro
 
BNN CAMP vol.3  インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
BNN CAMP vol.3  インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1BNN CAMP vol.3  インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
BNN CAMP vol.3  インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
Atsushi Tadokoro
 
openFrameworkとCityCompilerでバーチャルとリアルを結ぶ
openFrameworkとCityCompilerでバーチャルとリアルを結ぶopenFrameworkとCityCompilerでバーチャルとリアルを結ぶ
openFrameworkとCityCompilerでバーチャルとリアルを結ぶ
Atsushi Tadokoro
 
openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001
Teruaki Tsubokura
 
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
Takashi Yoshinaga
 
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングWebデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Atsushi Tadokoro
 
Synverll
SynverllSynverll
Synverll
Hidemi Ishihara
 
OSCによるソフトウェア連携
OSCによるソフトウェア連携�OSCによるソフトウェア連携�
OSCによるソフトウェア連携
Ryo Kanda
 
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Hiroshi Yoshida
 
Introduct 2016/04/09
Introduct 2016/04/09Introduct 2016/04/09
Introduct 2016/04/09
Hidemi Ishihara
 
Observable Everywhere - Rxの原則とUniRxにみるデータソースの見つけ方
Observable Everywhere  - Rxの原則とUniRxにみるデータソースの見つけ方Observable Everywhere  - Rxの原則とUniRxにみるデータソースの見つけ方
Observable Everywhere - Rxの原則とUniRxにみるデータソースの見つけ方
Yoshifumi Kawai
 
どこでも動くゲームを作るためのベタープラクティス
どこでも動くゲームを作るためのベタープラクティスどこでも動くゲームを作るためのベタープラクティス
どこでも動くゲームを作るためのベタープラクティス
5mingame2
 

What's hot (19)

Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Media Art II 2013  第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズムMedia Art II 2013  第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
 
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門
 
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替えMedia Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
 
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oFメディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
 
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーションメディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
 
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
 
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくるデジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
 
coma - creator’s talk session: Code - openFrameworks
coma - creator’s talk session: Code - openFrameworkscoma - creator’s talk session: Code - openFrameworks
coma - creator’s talk session: Code - openFrameworks
 
BNN CAMP vol.3  インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
BNN CAMP vol.3  インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1BNN CAMP vol.3  インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
BNN CAMP vol.3  インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
 
openFrameworkとCityCompilerでバーチャルとリアルを結ぶ
openFrameworkとCityCompilerでバーチャルとリアルを結ぶopenFrameworkとCityCompilerでバーチャルとリアルを結ぶ
openFrameworkとCityCompilerでバーチャルとリアルを結ぶ
 
openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001
 
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
 
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングWebデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
 
Synverll
SynverllSynverll
Synverll
 
OSCによるソフトウェア連携
OSCによるソフトウェア連携�OSCによるソフトウェア連携�
OSCによるソフトウェア連携
 
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
 
Introduct 2016/04/09
Introduct 2016/04/09Introduct 2016/04/09
Introduct 2016/04/09
 
Observable Everywhere - Rxの原則とUniRxにみるデータソースの見つけ方
Observable Everywhere  - Rxの原則とUniRxにみるデータソースの見つけ方Observable Everywhere  - Rxの原則とUniRxにみるデータソースの見つけ方
Observable Everywhere - Rxの原則とUniRxにみるデータソースの見つけ方
 
どこでも動くゲームを作るためのベタープラクティス
どこでも動くゲームを作るためのベタープラクティスどこでも動くゲームを作るためのベタープラクティス
どこでも動くゲームを作るためのベタープラクティス
 

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

バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
Takahide Hosokawa
 
情報編集(Web) HTML5 実践2 Processing.jsを使う
情報編集(Web) HTML5 実践2 Processing.jsを使う情報編集(Web) HTML5 実践2 Processing.jsを使う
情報編集(Web) HTML5 実践2 Processing.jsを使う
Atsushi Tadokoro
 
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
mametter
 
Interactive Music II - SuperCollider入門
Interactive Music II - SuperCollider入門Interactive Music II - SuperCollider入門
Interactive Music II - SuperCollider入門
Atsushi Tadokoro
 
入門 超絶技巧プログラミング !
入門 超絶技巧プログラミング !入門 超絶技巧プログラミング !
入門 超絶技巧プログラミング !
Nobutada Matsubara
 
⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3
Nishida Kansuke
 
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしようTwenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Odyssey Eightbit
 
Hello css animation_public
Hello css animation_publicHello css animation_public
Hello css animation_public
Shinichiro Kumeuchi
 
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウトメディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
Atsushi Tadokoro
 
岡山県立大学オープンキャンパス資料
岡山県立大学オープンキャンパス資料岡山県立大学オープンキャンパス資料
岡山県立大学オープンキャンパス資料
Takeo Kunishima
 
Mac Rubyではじめる!Macアプリ開発入門
Mac Rubyではじめる!Macアプリ開発入門Mac Rubyではじめる!Macアプリ開発入門
Mac Rubyではじめる!Macアプリ開発入門
宏治 高尾
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
 
20150725 オープンキャンパス資料
20150725 オープンキャンパス資料20150725 オープンキャンパス資料
20150725 オープンキャンパス資料
Takeo Kunishima
 
タンブラー台紙をつくる
タンブラー台紙をつくるタンブラー台紙をつくる
タンブラー台紙をつくる
Haruko Kakiuchi
 
論理思考とプログラミング第7回
論理思考とプログラミング第7回論理思考とプログラミング第7回
論理思考とプログラミング第7回
Noritada Shimizu
 

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

バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
 
情報編集(Web) HTML5 実践2 Processing.jsを使う
情報編集(Web) HTML5 実践2 Processing.jsを使う情報編集(Web) HTML5 実践2 Processing.jsを使う
情報編集(Web) HTML5 実践2 Processing.jsを使う
 
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
 
Interactive Music II - SuperCollider入門
Interactive Music II - SuperCollider入門Interactive Music II - SuperCollider入門
Interactive Music II - SuperCollider入門
 
入門 超絶技巧プログラミング !
入門 超絶技巧プログラミング !入門 超絶技巧プログラミング !
入門 超絶技巧プログラミング !
 
⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3⑰jQueryをおぼえよう!その3
⑰jQueryをおぼえよう!その3
 
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしようTwenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
 
Hello css animation_public
Hello css animation_publicHello css animation_public
Hello css animation_public
 
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウトメディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
 
岡山県立大学オープンキャンパス資料
岡山県立大学オープンキャンパス資料岡山県立大学オープンキャンパス資料
岡山県立大学オープンキャンパス資料
 
Mac Rubyではじめる!Macアプリ開発入門
Mac Rubyではじめる!Macアプリ開発入門Mac Rubyではじめる!Macアプリ開発入門
Mac Rubyではじめる!Macアプリ開発入門
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
 
20150725 オープンキャンパス資料
20150725 オープンキャンパス資料20150725 オープンキャンパス資料
20150725 オープンキャンパス資料
 
タンブラー台紙をつくる
タンブラー台紙をつくるタンブラー台紙をつくる
タンブラー台紙をつくる
 
論理思考とプログラミング第7回
論理思考とプログラミング第7回論理思考とプログラミング第7回
論理思考とプログラミング第7回
 

More from Atsushi Tadokoro

Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
Atsushi Tadokoro
 
Interactive Music II Processing基本
Interactive Music II Processing基本Interactive Music II Processing基本
Interactive Music II Processing基本
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Atsushi Tadokoro
 
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Atsushi Tadokoro
 
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くiTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
Atsushi Tadokoro
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Atsushi Tadokoro
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Atsushi Tadokoro
 
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
Atsushi Tadokoro
 
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Atsushi Tadokoro
 
Interactive Music II SuperCollider入門 5 時間構造をつくる
Interactive Music II SuperCollider入門 5  時間構造をつくるInteractive Music II SuperCollider入門 5  時間構造をつくる
Interactive Music II SuperCollider入門 5 時間構造をつくる
Atsushi Tadokoro
 
iTamabi 13 第7回:ARTSAT API 実践 2 衛星の情報で表現する
iTamabi 13  第7回:ARTSAT API 実践 2 衛星の情報で表現するiTamabi 13  第7回:ARTSAT API 実践 2 衛星の情報で表現する
iTamabi 13 第7回:ARTSAT API 実践 2 衛星の情報で表現する
Atsushi Tadokoro
 
メディア芸術基礎 II Canvas + Javascriptで図形を描く
メディア芸術基礎 II Canvas + Javascriptで図形を描くメディア芸術基礎 II Canvas + Javascriptで図形を描く
メディア芸術基礎 II Canvas + Javascriptで図形を描く
Atsushi Tadokoro
 
Interactive Music II SuperCollider入門 4 - 楽器を定義、変調合成(RM, AM, FM)
Interactive Music II SuperCollider入門 4 -  楽器を定義、変調合成(RM, AM, FM)Interactive Music II SuperCollider入門 4 -  楽器を定義、変調合成(RM, AM, FM)
Interactive Music II SuperCollider入門 4 - 楽器を定義、変調合成(RM, AM, FM)
Atsushi Tadokoro
 
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得するiTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
Atsushi Tadokoro
 

More from Atsushi Tadokoro (20)

Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
 
Interactive Music II Processing基本
Interactive Music II Processing基本Interactive Music II Processing基本
Interactive Music II Processing基本
 
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
 
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
 
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
 
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くiTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
 
Tamabi media131118
Tamabi media131118Tamabi media131118
Tamabi media131118
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
 
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
 
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
 
Geidai music131107
Geidai music131107Geidai music131107
Geidai music131107
 
Interactive Music II SuperCollider入門 5 時間構造をつくる
Interactive Music II SuperCollider入門 5  時間構造をつくるInteractive Music II SuperCollider入門 5  時間構造をつくる
Interactive Music II SuperCollider入門 5 時間構造をつくる
 
iTamabi 13 第7回:ARTSAT API 実践 2 衛星の情報で表現する
iTamabi 13  第7回:ARTSAT API 実践 2 衛星の情報で表現するiTamabi 13  第7回:ARTSAT API 実践 2 衛星の情報で表現する
iTamabi 13 第7回:ARTSAT API 実践 2 衛星の情報で表現する
 
メディア芸術基礎 II Canvas + Javascriptで図形を描く
メディア芸術基礎 II Canvas + Javascriptで図形を描くメディア芸術基礎 II Canvas + Javascriptで図形を描く
メディア芸術基礎 II Canvas + Javascriptで図形を描く
 
Interactive Music II SuperCollider入門 4 - 楽器を定義、変調合成(RM, AM, FM)
Interactive Music II SuperCollider入門 4 -  楽器を定義、変調合成(RM, AM, FM)Interactive Music II SuperCollider入門 4 -  楽器を定義、変調合成(RM, AM, FM)
Interactive Music II SuperCollider入門 4 - 楽器を定義、変調合成(RM, AM, FM)
 
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得するiTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
 

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