Processing によるプログラミング入門第１回

早稲田大学基幹理工学部表現工学科
長研究室 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 の
勉強にもなる!

 デジタルアート・ビジュアルデザイン
http://www.openprocessing.org/

 2001 年 MIT メディアラボの Casey Reas
と Benjamin Fry が最初のバージョンを開発
 Windows や Mac など様々なプラットフォー
ムで動作
 人気が上昇するにつれ、3D 描画や MIDI,
Arduino, Kinect といった様々なシステムとの
連携が拡張され、活用範囲が広がっている

 国内でも多くの書籍

2. 画面の説明 [1/2]
ディスプレイ
ウィンドウ
PDE (Processing Development
Environment) ウィンドウ

2. 画面の説明 [2/2]
Run ボタン
テキストエディタ
テキストエリア

プログラミング
 これの意味がなんとなく読み解けるなら、素質が
あります！
 さっぱりわからなくても、今日の講座でわかるよ
うになります
size(400,400);

3. 整数リテラル
 整数を書くと、それは整数リテラルと呼ば
れる数値データになる
100
-50

4. テキストエリア出力 [1/3]
 println() は ( ) の中のデータをテキスト
エリアに表示する
println(xxx);

println(100);

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

画面の設定
 本講座では、このサイズのウィンドウを使
います
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 回で！

Processing によるプログラミング入門第１回

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (7)

Semelhante a Processing によるプログラミング入門第１回

Semelhante a Processing によるプログラミング入門第１回 (20)

Último

Último (10)