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

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

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

3. /9
例 プログラムリスト
float t;
void setup()
{
size(500,500);
colorMode(HSB,360,100,100);
noStroke();
}
void draw()
{
clear();
t += 0.01;
for ( int i=0; i<360; i+=4 ) {
for ( float j=1; j<5; j+=0.5 ) {
float ang = radians(i);
float r = noise(floor(ang‐t*j))*280;
fill(i,99,99);
circle(250+r*cos(ang), 250+r*sin(ang), 5);
}
}
} サンテクノカレッジ Y.YAMAMOTO2020-08-12 4
プログラムの全般で使⽤する変数の宣⾔
floatとは、⼩数の数値を扱えることを⽰す
関数setupは、⼀度だけ実⾏される関数f
初期化の関数
関数drawは、毎秒実⾏される関数
デフォルトだと、60回/秒
左記のプログラムも60回
フレームレイトが60に設定
/9
プログラムリストの説明 (1)
void setup()
{
size(500,500);
colorMode(HSB,360,100,100);
noStroke();
}
サンテクノカレッジ Y.YAMAMOTO2020-08-12 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()
{
clear();
t += 0.01;
for ( int i=0; i<=360; i+=4 ) {
for ( float j=1; j<5; j+=0.5 ) {
float ang = radians(i);
float r = noise(floor(ang‐t*j))*280;
fill(i,100,100);
circle(250+r*cos(ang), 250+r*sin(ang), 5);
}
}
}
サンテクノカレッジ Y.YAMAMOTO2020-08-12 6
キャンバス 500x500
circle(円の中⼼x座標, 円の中⼼y座標, 円の直径)
circle(250+r*cos(ang), 250+r*sin(ang), 5);
直径5
円の中⼼座標は、rの円周上の点としている
⾊相
画⾯をクリア
描画する毎に0.01を加算
t = t + 0.01と同じ
4度ずつ動かしている
⾓度(°)をラジアン⾓に変換
図形を指定の⾊で塗りつぶす
⾊相を0〜360しているので
円周上の点の⾓度と⼀致
計8個
float r = noise(floor(ang‐t*j))*280;
関数noiseは、連続的な変化になるような場合に使⽤する
0〜1.0の値を返す
似たような関数に乱数randomがある
関数floorは、⼩数点以下切り捨て
パーリンノイズ
/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-08-12 7

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