早稲田大学 基幹理工学部 表現工学科長研究室 B4 鈴木 遼

21 May 2013

(講座の前に)準備と動作確認 http://processing.org/download/ から

OS に応じた最新版をダウンロード

processing を起動

（ショートカットを作っておこう）

と入力し、▶ ボタンをクリック

size(400,400); background(0,0,255);

(講座の前に)準備と動作確認

今日やること

Processing とプログラミングの基礎

簡単なことを 22 項目だけ覚えます

今日やること

C 言語の授業を覚えていなくても OK

新しい気持ちでメディアアートプログラミ

ングの世界へ旅立とう

今日やること

英語の勉強で言えばアルファベットを覚え

るところ

文章を作れるようになるのはこれから

1. Processingとは [1/4]

Java というメジャーなプログラミング言

語をシンプルにして、アートやビジュアル

デザイン機能に特化させた言語とシステム

視覚的なフィードバックをすぐに得られる

基本文法は Java と同じなので、Java の

勉強にもなる!

1. Processingとは [2/4]

デジタルアート・ビジュアルデザイン

http://www.openprocessing.org/

1. Processingとは [3/4]

2001 年 MIT メディアラボの Casey Reas

と Benjamin Fry が最初のバージョンを開発

Windows や Mac など様々なプラットフォー

ムで動作

人気が上昇するにつれ、3D 描画や MIDI,

Arduino, Kinect といった様々なシステムとの

連携が拡張され、活用範囲が広がっている

1. Processingとは [4/4]

国内でも多くの書籍

2. 画面の説明 [1/2]

ディスプレイ ウィンドウ

PDE (Processing Development Environment) ウィンドウ

2. 画面の説明 [2/2]

Run ボタン

テキストエディタ

テキストエリア

プログラミング

これの意味がなんとなく読み解けるなら、素質が

あります！

さっぱりわからなくても、今日の講座でわかるよ

うになります

size(400,400); background(0,0,255);

3. 整数リテラル

整数を書くと、それは整数リテラルと呼ば

れる数値データになる

100 -50

4. テキストエリア出力 [1/3]

println() は ( ) の中のデータをテキスト

エリアに表示する

println(xxx);

テキストエリア

4. テキストエリア出力 [2/3]

println(100);

4. テキストエリア出力 [3/3]

println(100); println(50);

セミコロン

命令の終了を意味する

文章の句点と同じ「眠い 。」

println(100); println(50);

5. 計算 [1/6]

数値データは計算ができる

演算子

+ 足し算, - 引き算, * 掛け算, / 割り算

100+50 100-50 100*50 100/50

5. 計算 [2/6]

計算結果を表示

println(100+50); println(100-50); println(100*50); println(100/50);

5. 計算 [3/6]

% 余り算

println(13%5); println(111%50);

5. 計算 [4/6]

計算は連続できる

println(1+2+3+4+5); println(2*2*2*2);

5. 計算 [5/6]

計算順序は算数と同じ

掛け算・割り算・余り算が優先

必要なら( )を使う

println(2+3*5); println((2+3)*5);

5. 計算 [6/6]

注意: 整数の割り算は小数以下切り捨て

println(10/3); println(71/7);

6. 型

型は、あるデータで扱える値と可能な計算

を決める

整数リテラルは int 型

int 型

扱える値はおよそ -21 億～21億の整数

できる計算は + - * / % など

7. 変数 [1/5]

名前の付いたデータ

型名 名前 = 初期値;

「int 型の変数 x を定義、初期値は 100」

int x = 100;

7. 変数 [2/5]

int x = 100; println(x); println(x+10); println(x*x);

7. 変数 [3/5]

名前が異なれば、変数をいくつでも作れる

int x = 100; int y = 50; println(x+y); int a = 1, b = 2, c = 3; println(a+b+c);

7. 変数 [4/5]

変数の値は 代入演算子= で変更できる

「x に新しい値を代入する」と言う

int x = 100; println(x); x = 200; println(x);

7. 変数 [5/5]

int x = 100; println(x); x = x+5; println(x);

8. 複合代入演算 [1/2]

複合代入演算子は計算と代入を同時に行う

int x = 100; println(x); x += 5; println(x); x *= 2; println(x);

8. 複合代入演算 [2/2]

結果は？

int x = 10; x -= 2; x *= 5; println(x); x /= 4; println(x);

9.インクリメントとデクリメント

++ 1 増やす、-- 1 減らす

int x = 10; ++x; ++x; println(x); --x; println(x);

10. 比較演算 [1/3]

数値の大小を比較する計算

等しい ==

等しくない !=

右辺未満 <

右辺以下 <=

右辺より大きい >

右辺以上 >=

10. 比較演算 [2/3]

比較演算の結果は true か false

100<200 true

50==50 true

80>90 false

5!=5 false

10. 比較演算 [3/3]

int x = 100; println(x<150); println(x<=-50); println(x>150); println(x>=-50);

11. forループ [1/3]

継続条件を満たす間 {} の中身を繰り返す

for(int i=0; i<3; ++i) { println(i); }

for(初期設定; 継続条件; ターン終了時にやること) { 何らかの処理; }

11. forループ [2/3]

[問題 1] 10から 0 までカウントダウン

11. forループ [2/3]

[問題 1] 10から 0 までカウントダウン

for(int i=10; i>=0; --i) { println(i); }

11. forループ [3/3]

[問題 2] 0から 100 までの偶数を表示

11. forループ [3/3]

[問題 2] 0から 100 までの偶数を表示

for(int i=0; i<=100; i+=2) { println(i); }

for(int i=0; i<=50; ++i) { println(i*2); }

復習

50%

Processing ディスプレイウィンドウ PDE ウインドウ テキストエディタ テキストエリア 整数リテラル println() ; + - * / %

型 int 型 変数 複合代入演算 += *= など ++ -- 比較演算 == != < <= > >= true false for ループ

12. 画面サイズ [1/2]

ディスプレイウィンドウのサイズを設定

w : 幅

h : 高さ

size(w,h);

幅

高さ

12. 画面サイズ [2/2]

size(600,200);

13. 画面背景 [1/3]

背景の色を設定

r : Red [0,255]

g : Green [0,255]

b : Blue [0,255]

background(r,g,b);

13. 画面背景 [2/3]

size(600,400); background(0,0,0);

13. 画面背景 [3/3]

[問題] 背景を黄色にしよう

13. 画面背景 [3/3]

[問題] 背景を黄色にしよう

size(600,400); background(255,255,0);

画面の設定

本講座では、このサイズのウィンドウを使

います

size(600,400);

14.画面の座標 size(600x400) の場合

(0,0) (599,0)

(0,399) (599,399)

+ X

+ Y

15. 円を描く [1/2]

円を描く

x : 中心の X 座標

y : 中心の Y 座標

w : 円の幅

h : 円の高さ

ellipse(x,y,w,h);

15. 円を描く [2/2]

size(600,400); ellipse(300,200,200,200);

16. 線を描く [1/2]

線を描く

x1 : 始点の X 座標

y1 : 始点の Y 座標

x2 : 終点の X 座標

y2 : 終点の Y 座標

line(x1,y1,x2,y2);

16. 線を描く [2/2]

size(600,400); line(0,100,300,200);

17. 長方形を描く [1/2]

長方形を描く

x : 左上の X 座標

y : 左上の Y 座標

w : 幅

h : 高さ

rect(x,y,w,h);

17. 長方形を描く [2/2]

size(600,400); rect(300,200,250,150);

18. 枠を消す [1/2]

これ以降は枠をつけないようにする

noStroke();

18. 枠を消す [2/2]

size(600,400); noStroke(); rect(300,200,250,150);

19. 枠をつける [1/2]

これ以降は枠を描くようにする

r, g, b : 枠の色

stroke(r,g,b);

19. 枠をつける [2/2]

size(600,400); noStroke(); ellipse(200,200,200,200); stroke(255,0,0); ellipse(400,200,200,200);

20. 塗りつぶしの色を変える [1/2]

塗りつぶしの色を変える

r, g, b : 塗りつぶしの色

fill(r,g,b);

20. 塗りつぶしの色を変える [2/2]

size(600,400); fill(0,0,255); rect(300,200,250,150);

21. 塗りつぶしをしない [1/2]

これ以降は塗りつぶしをしない

noFill();

21. 塗りつぶしをしない [2/2]

size(600,400); noFill(); rect(300,200,250,150);

22. 透過 [1/2]

r,g,b に続き、不透明度 a [0,255] を指定

255 は透過しない、0 は完全に透過

fill(r,g,b,a);

22. 透過 [2/2]

size(600,400); rect(50,50,300,200); fill(0,0,255,100); rect(100,100,300,200);

Complete!

size(x,y) background(r,g,b) 画面の座標 ellipse(x,y,w,h) line(x1,y1,x2,y2) rect(x,y,w,h)

noStroke() stroke(r,g,b) fill(r,g,b) noFill() fill(r,g,b,a)

100%

Practice [1/2]

円をたくさん表示

size(600,400); for(int x=0; x<7; ++x) { ellipse(x*100,200,100,100); }

Practice [2/2]

円をもっと表示

size(600,400); for(int x=0; x<7; ++x) { for(int y=0; y<5; ++y) { ellipse(x*100,y*100,100,100); } }

Challenge

好きな色でグラデーションを作ろう

補足|『ジェネラティブ・アート』

講座で紹介した Processing の本

「メディアアート表現論」授業の沖先生が翻訳

コンピュータ生成アートの醍醐味の紹介

ジェネラティブ・アート - Processingによる実践ガイド

補足| 公式リファレンス

補足| 公式サンプル

続きは再来週の第 2 回で！

Questions?

@Reputeless