STC オープンキャンパス 2020-07-04 Processing

1. サンテクノカレッジ オープンキャンパス
2020年7月4日(土)
山本 芳彦 yoshi@suntech.ac.jp
Processingでプログラミングを体験
メディアアートへの一歩
1本の直線を使ってプログラミングで表現
メディアアート分野
体験授業C の内容
１．はじめに
 テーマ
 体験内容の概要
２．体験
１．体験1 直線を描画
２．体験2 1点固定 1点円周上の点で直線描画
３．体験3 2点異なる円周上の点で直線描画
４．体験4 2点同⼀円周上の点で直線描画
３．まとめ
サンテクノカレッジ Y.YAMAMOTO2020-07-04 1

2. はじめに
 テーマ
『直線を使ってプログラミングで表現に挑戦!!』
 体験内容の概要
 Processingでプログラミングを体験
 Processingとは
 デジタルアートとビジュアルデザインのためのプロ
グラミング⾔語
 メディアアート、ジェネラティブアートが可能
 https://processing.org/
直線
サンテクノカレッジ Y.YAMAMOTO2020-07-04 2
プログラムの実行方法
Processingの起動 実⾏
停⽌
void setup(){
size(500, 500);
background(0,0,0); //黒
}
void draw(){
省略
⼊⼒
実⾏結果例
サンテクノカレッジ Y.YAMAMOTO2020-07-04 3

3. 体験1 直線を描画
void setup() {
size(500,500); // サイズの指定
background(0,0,0); //⿊
}
void draw(){
stroke(255,255,255,80); //⽩
line(250, 250, 350, 250);
}
演習1-1
体験1の上記プログラムを⼊⼒し、実⾏してみよう。
演習1-2 プログラムを変更
線の⻑さを変えてみよう。
描画する線の位置を変えてみよう。
line(X始点, Y始点, X終点, Y終点)
⾊の表し⽅には
• RGB と ⾊相, 明度, 彩度 がある
今回は、RGB (⾚, 緑, ⻘) を使⽤
(X, Y)
始点
(X, Y)
終点
(0, 0)
キャンバス 500x500
X
Y
stroke(255, 255, 255, 透明度)
線の⾊ ⽩
サンテクノカレッジ Y.YAMAMOTO2020-07-04 4
コメント
円周上の点の位置の算出
0
(X,Y)
θ
Y
X
(X,Y)
Y
X
Y
X
θ
r
半径
円周上の点は、三⾓関数(sin, cos)を⽤いて、半径と⾓度から算出できる。
cosθ = よって x =r × cosθ x座標は、半径×cos(⾓度)
y =r × sinθ y座標は、半径×sin(⾓度)
sinθ =
サンテクノカレッジ Y.YAMAMOTO2020-07-04 5

4. 体験2 円周上に直線を描画
直線 1点固定、1点円周上
float x1,y1;
int deg1 = 0;
void setup(){
size(500,500); //サイズの指定
background(0,0,0); //⿊
}
void draw(){
stroke(255,255,255,80); //⽩
x1 = 200 * cos(radians(deg1));
y1 = 200 * sin(radians(deg1));
line(250, 250, 250+x1, 250+y1);
deg1 += 45;
}
半径200の円周上の点
X座標 x1、Y座標 y1 を計算
始点
(0, 0)
Processingの場合
⾓度はラジアン⾓なので、
関数radians(度)を使⽤している
cos(radians(deg1));
sin(radians(deg1));
X
Y
円周上のX,Y座標で使⽤
⾓度で使⽤
⾓度を変化させている
+45度 250,250
画⾯の中⼼座標と円周上の点を
両端とした直線
250+x1,250+y1
サンテクノカレッジ Y.YAMAMOTO2020-07-04 6
体験2 円周上に直線を描画
直線 1点固定、1点円周上
float x1,y1;
int deg1 = 0;
void setup(){
size(500,500); //サイズの指定
background(0,0,0); //⿊
frameRate(10);
}
void draw(){
clear();
stroke(255,255,255,80); //⽩
x1 = 200 * cos(radians(deg1));
y1 = 200 * sin(radians(deg1));
line(250, 250, 250+x1, 250+y1);
deg1 += 45;
}
演習2-1
体験2の前スライドのプログラムを
⼊⼒し、実⾏してみよう。
演習2-2 プログラムを変更
deg += 45 の⾓度の45度ずつを
変えてみよう。
演習2-3プログラムを変更
動く様⼦をみたい場合は、右記の
プログラムに変更してみよう。
Processingは、drawの中の処理を
毎秒60回(デフォルト)実⾏します。
frameRate(値)で、値を変更すると
ゆっくり描画します。
draw()はキャンバスに上書きで描画をするので、必要ならclear()を⼊れても良い。
サンテクノカレッジ Y.YAMAMOTO2020-07-04 7

5. 体験3 円周上に直線を描画
直線 両点 異なる円周上
float x1,y1;
float x2,y2;
int deg1 =0;
int deg2 =0;
void setup(){
変更せず
//frameRate(10);
}
void draw(){
// clear();
stroke(255,255,255,80); //⽩
x1 = 200 * cos(radians(deg1));
y1 = 200 * sin(radians(deg1));
x2 = 50 * cos(radians(deg2));
y2 = 50 * sin(radians(deg2));
line(250+x1, 250+y1, 250+x2, 250+y2);
deg1 += 30;
deg2 += 30;
}
半径200の円周上の点
X座標 x1、Y座標 y1 を計算
始点
(0, 0) X
Y
円周上のX,Y座標で使⽤
⾓度で使⽤
250+x2,250+y2
250+x1,250+y1
半径50の円周上の点
X座標 x2、Y座標 y2 を計算
サンテクノカレッジ Y.YAMAMOTO2020-07-04 8
⾓度を変化させている
+30度
体験3 円周上に直線を描画
直線 両点 異なる円周上
演習3-1
体験3の前スライドのプログラムを⼊⼒し、
実⾏してみよう。
演習3-2 プログラムを変更
円周上を動かす各円の半径を変えてみる
円周上を動かす各円の⾓度を変えてみる
値によっては、このような模様が描かれます
サンテクノカレッジ Y.YAMAMOTO2020-07-04 9
8, 15

6. 体験4 円周上に直線を描画
直線 両点 同一円周上
演習4-1 体験3のプログラムを変更
円周上を動かす⼆つの円の半径を同じにする
そして
円周上を動かす各円の⾓度を変えてみる
値によっては、このような模様が描かれます
サンテクノカレッジ Y.YAMAMOTO2020-07-04 10
始点
(0, 0)
X
Y
250+x1, 250+y1
250+x2, 250+y2
2, 17 31, 13 37, 13 37, 130
メディアアート、ジェネラティブアートに
興味をもってください
まとめ
 Processingプログラミングで、簡単にアー
トの作品を作成することが可能
 本⽇のテーマ『1本の直線のみ』でも、
いろいろな表現が可能
直線
サンテクノカレッジ Y.YAMAMOTO2020-07-04 11