サンテクノカレッジ オープンキャンパス 2019年6月1日実施 体験授業「メディアアートへの一歩」

1. サンテクノカレッジ オープンキャンパス
2019年6月1日(土)
山本 芳彦 yoshi@suntech.ac.jp

2. 体験授業C の内容
１．はじめに
 テーマ
 体験内容の概要
２．体験
１．体験1 円を描く
２．体験2 微動の円を描く
３．体験3 円運動する円
４．体験4 円でSを描く
５．体験5 円でSTCを描く
３．まとめ
1

3. はじめに
 テーマ
『円を用いて、動きのある表現に挑戦!!』
 体験内容の概要
 Processingでプログラミングを体験
 Processingとは
 デジタルアートとビジュアルデザインのためのプロ
グラミング言語
 メディアアート、ジェネラティブアートが可能
 https://processing.org/
2

4. プログラムの実行方法
Processingの起動 実行
停止
void setup(){
size(400,400);
background(0);
}
void draw(){
noStroke();
fill(random(255), random(255), random(255));
ellipse(random(400), random(400), 40 , 40);
}
入力
実行結果例
3

5. 体験1 円を描く
void setup(){
size(400,400); サイズの指定
background(0); 背景を黒色
}
Void draw(){
noStroke(); 線無し
fill(255,0,0);
ellipse(random(400), random(400), 40 , 40);
}
演習1-1
上記プログラムを入力し、実行してみよう
演習1-2 プログラムを変更
• 円の大きさを変えてみよう
• 円の色を青色に変えてみよう
• 円の色をランダムで、いろいろ変化するように変えてみよう
• ヒント fillの箇所に、0や255ではなくrandom(255)を入れてみよう
fill(r, g, b)
塗りつぶす r(赤) g(緑) b(青) 0～255
fill(r, g, b, 透明度)
塗りつぶす 透明度 0～255
ellipse(中心X座標,中心Y座標, 横, 高さ)
円を描く(横と高さの値が同じ場合)
楕円を描く(横と高さの値が異なる場合)
random(値)
乱数で値を作成
random(400)の場合、0～400までの値中心Y座標 横 高さ中心X座標
4

6. 体験2 微動の円を描く (1)
float x1 = 100;
float y1 = 200;
float r = 150;
void setup(){
size(400, 400);
background(0);
}
void draw(){
fill(0);
noStroke();
rect(0, 0, 400, 400);
x1 = x1 + random(-5, 5); x1の値を乱数で変化させる
y1 = y1 + random(-5, 5); y1の値を乱数で変化させる
int i = 0;
while(i < 10){
noFill();
stroke(random(255), random(255), 255);
ellipse(x1 + random(-10, 10), y1 + random(-10, 10), r, r);
i = i + 1;
}
}
10回 円を描く
中心座標を変化させている
中心座標を前回に少し変化
矩形を描画
中心X座標を変化 中心Y座標を変化
stroke (r, g, b)
線の色 r(赤) g(緑) b(青) 0～255
実行結果例
5

7. 体験2 微動の円を描く (2)
演習2-1
プログラムex2-1.pdeをコピーし、実行してみよう
演習2-2 プログラムを変更
• 円をさらにもう一つ追加してみよう
• ヒント
• 円の色も変えてみよう
float x1 = 100;
float y1 = 200;
float r = 150;
float x2 = 200; 追加
float y2 = 200; 追加
下記を真似て、x2 や y2 を同じように入力
x1 = x1 + random(-5, 5);
y1 = y1 + random(-5, 5);
下記を真似て、x2 や y2 を同じように入力
ellipse(x1 + random(-10, 10), y1 + random(-10, 10), r, r);
stroke(random(255), random(255), 255);
実行結果例
3円の場合
6

8. 体験3 円運動する円 (1)
演習3-1
プログラムex3-1.pdeをコピーし、実行してみよう
演習3-2 プログラムを変更
• 円の大きさを変化させてみよう
• 円運動する半径を変化させてみよう
• ヒント
• 円運動する速さを変化させてみよう
• ヒント
x = 200 + cos(angle)*120;
y = 200 - sin(angle)*120;
ellipse(x , y, 50,50);
cnt += 0.2;
実行結果例
色の表し方には
• RGB
• 色相, 明度, 彩度
今回は、色相を使っている
円の中心座標(200,200)
半径120の円上
円の中心座標(200,200)
半径120
7

9. 体験3 円運動する円 (2)
演習3-3
プログラムex3-3.pdeをコピーし、実行してみよう
円運動する円の大きさ(半径)を変化させている
説明
float r = 120; 追加
int fg= -1; 追加
途中省略
void draw(){
途中省略
for (int i=0; i<360; i += 30) {
x = 200 + cos(angle) * r;
y = 200 - sin(angle) * r;
ellipse(x , y, 50, 50);
}
cnt += 0.2;
r += 0.2 * fg ;
if (r>120 ) fg = -1;
if (r<1 ) fg = 1;
}
実行結果例
rの値を変化
rの値を増加か,減少か
8

10. 体験4 円でSを描く
演習4-1
プログラムex4-1.pdeをコピーし、実行してみよう
演習4-2 プログラムを変更
• 円の色を青系に変化させてみよう
• もう少し小さく円を描画しよう
• ヒント
演習4-3 プログラムを変更
• 円の色を白にして変化させてみよう
• 透明度もいろいろ変えて試してみよう
fill(random(255), random(255), random(255));
float r = random(50);
noStroke();
ellipse(0, 0, r, r);
実行結果例
実行結果例
透明度 設定なし
9

11. 体験5 円でSTCを描く
演習5-1
プログラムex5-1.pdeをコピーし、実行してみよう
アート風に、STCを円を使って表現しているプログラム
実行結果例
10

12. メディアアート、ジェネラティブアートに
興味をもってください
まとめ
 Processingプログラミングで、簡単にアー
トの作品を作成することが可能
 本日のテーマ『円』のみでも、いろいろな
表現が可能
11