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 によるプログラミング入門第１回

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (7)

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

Ähnlich wie Processing によるプログラミング入門第１回 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)