早稲田大学 基幹理工学部 表現工学科 長研究室 B4 鈴木 遼 21 May 2013
May 27, 2015
早稲田大学 基幹理工学部 表現工学科長研究室 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 回で!