STC_OC20200704 processing
0 likes148 views
STC オープンキャンパス 2020-07-04 Processing
STC_OC20200704 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