STC オープンキャンパス 2020-09-05 Processing ライブ配信での使用資料

1. サンテクノカレッジ オープンキャンパス
2020年9月5日(土)
山本 芳彦 yoshi@suntech.ac.jp
Processingでプログラミングを体験
メディアアートへの一歩
円を変化させて表現
メディアアート分野
/9
体験授業C の内容
１．はじめに
 テーマ
 体験内容の概要
２．演習
 プログラムリストの説明
 プログラムの実⾏結果
３．まとめ
サンテクノカレッジ Y.YAMAMOTO2020-09-05 1
今回は、
体験授業というより模擬授業!!

2. /9
はじめに
 テーマ
『円を変化させて表現』
 体験内容の概要
 Processingでプログラミングを体験
 Processingとは
 デジタルアートとビジュアルデザインのためのプロ
グラミング⾔語
 メディアアート、ジェネラティブアートが可能
 https://processing.org/
円
サンテクノカレッジ Y.YAMAMOTO2020-09-05 2
/9
プログラムの実行方法
Processingの起動 実⾏
停⽌
void setup()
{
size(500, 500);
colorMode(HSB,360,100,100);
noStroke();
}
void draw()
{
省略
⼊⼒
実⾏結果例
サンテクノカレッジ Y.YAMAMOTO2020-09-05 3

3. /9
例 プログラムリスト
float t,r = 150;
int a = 1;
void setup()
{
size(500,500);
colorMode(HSB,360,100,100);
noStroke();
clear();
}
void draw()
{
t += 1;
if ( t>360 ) {
clear();
t=0;
a++;
}
fill(t, 99, 99);
circle(250+r*cos(radians(t)), 250+r*sin(radians(t)), 50*sin(radians(t*a));
}
サンテクノカレッジ Y.YAMAMOTO2020-09-05 4
プログラムの全般で使⽤する変数の宣⾔
floatとは、⼩数の数値を扱えることを⽰す
関数setupは、⼀度だけ実⾏される関数f
初期化の関数
関数drawは、毎秒実⾏される関数
デフォルトだと、60回/秒
左記のプログラムも60回
フレームレイトが60に設定
intとは、整数の数値を扱えることを⽰す
/9
プログラムリストの説明 (1)
void setup()
{
size(500,500);
colorMode(HSB,360,100,100);
noStroke();
clear();
}
サンテクノカレッジ Y.YAMAMOTO2020-09-05 5
(0, 0)
キャンバス 500x500
X
Y
⾊の表し⽅
今回は、HSBモード(⾊相, 彩度, 明度)を使⽤
⾊相として、0〜360までの値
彩度として、0〜100までの値
0が鮮やかでない、100が鮮やか
明度として、0〜100までの値
0が暗い、100が明るい
noStroke()
図形の線の⾊は無し
明度50のとき
彩度50のとき
彩度,明度100のとき
⾊相0 ⾊相360
⾊相

4. /9
プログラムリストの説明 (2)
void draw()
{
t += 1;
if ( t>360 ) {
clear();
t=0;
a++;
}
fill(t, 99, 99);
circle(250+r*cos(radians(t)), 250+r*sin(radians(t)), 50*sin(radians(t*a));
}
サンテクノカレッジ Y.YAMAMOTO2020-09-05 6
circle(円の中⼼x座標, 円の中⼼y座標, 円の直径)
circle(250+r*cos(radians(t)), 250+r*sin(radians(t)), 50*sin(radians(t*a));
円の中⼼座標は、rの円周上の点としている
描く円の⼤きさを 50*sin(radians(t*a)) で最⼤50として変化させている
⾊相
描画する毎に1を加算 t = t + 1と同じ
tの値を⾓度として利⽤
⼀周描いたら
画⾯⼀度クリア
⾓度を0度
描いた回数を+1
radians(t)
⾓度t(°)をラジアン⾓に変換
図形を指定の⾊で塗りつぶす
⾊相を0〜360しているので
円周上の点の⾓度と⼀致
/9
円周上の点の位置の算出
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-09-05 7

5. /9
実行結果例
サンテクノカレッジ Y.YAMAMOTO2020-09-05 8
/9
メディアアート、ジェネラティブアートに
興味をもってください
まとめ
 Processingプログラミングで、簡単にアー
トの作品を作成することが可能
 本⽇のテーマ『円を変化させて表現』
サンテクノカレッジ Y.YAMAMOTO2020-09-05 9