Download to read offline
Uploaded byYoshihiko Yamamoto
STC-OC2019_4th201909
サンテクノカレッジ オープンキャンパス 2019年9月7日実施 体験授業「メディアアートへの一歩」 円、円弧、四分円を組み合わせてプログラミングで表現
STC-OC2019_4th201909
- 1. サンテクノカレッジ オープンキャンパス 2019年9月7日(土) 山本 芳彦yoshi@suntech.ac.jp Processingでプログラミングを体験 メディアアートへの一歩 円、円弧、四分円を組み合わせて プログラミングで表現
- 2. 体験授業C の内容 １．はじめに テーマ 体験内容の概要 ２．体験 １．体験1 円を描画 ２．体験2 円を横方向に描画 ３．体験3 円を円周上に描画 ４．体験4 色ありの円を描画 ５．(応用)体験5 円弧で描画 ６．(応用)体験6 四分円で描画 ３．まとめ 1
- 3. はじめに テーマ 『円、円弧、四分円を組み合わせて プログラミングで表現に挑戦!!』 体験内容の概要 Processingでプログラミングを体験 Processingとは デジタルアートとビジュアルデザインのためのプロ グラミング言語 メディアアート、ジェネラティブアートが可能 https://processing.org/ 2 円
- 4.
- 5. 体験1 円を描画 void setup(){ size(500, 500); //サイズ500x500 colorMode(HSB, 360, 100, 100); background(0, 0, 99); // 背景 白 stroke(0); //線の色 黒 noFill(); //塗りつぶしなし ellipse(250, 250 , 200, 200); } 演習1-1 上記プログラムを入力し、実行してみよう 演習1-2 プログラムを変更 円の描く位置を変えてみよう 円の大きさを変えてみよう background(0,99,99) 背景 白 stroke(0) 線の色 黒 ellipse(中心X座標, 中心Y座標, 横, 高さ) 円を描く(横と高さの値が同じ場合) 楕円を描く(横と高さの値が異なる場合) 4 色の表し方には • RGB • 色相, 明度, 彩度 今回は、色相を使っている 中心 (X, Y) (0, 0) キャンバス 500x500 X Y 横 高さ
- 6. 体験2 円を横方向に描画 void setup(){ size(500,500); colorMode(HSB,360,100,100); background(0,0,99); stroke(100); noFill(); for (float x =0; x <= 100; x+=10 ) { ellipse(250+x, 250 , 200, 200); } } 演習2-1 上記プログラムを入力し、実行してみよう 演習2-2 xの値を増やす箇所の値を変更してみよう 5 x += 10; x = x + 10; プログラミングの場合 = は、代入となる xの値を10ずつ増やす。 noFill() がない場合
- 7. 体験3 円を円周上に描画 void setup(){ size(500,500); colorMode(HSB,360,100,100); background(0,0,99); stroke(100); noFill(); for (int deg=0; deg<360; deg += 90){ float x = 100 * cos(radians(deg)); float y = 100 * sin(radians(deg)); ellipse(250+x,250+y, 200, 200); } } 演習3-1 上記プログラムを入力し、実行してみよう 演習3-2 円周上の円の数を変更してみよう 演習3-3 半径の値を変化させて実行してみよう 6 半径100の円周上の点 x = 100 * cos(radians(deg)); y = 100 * sin(radians(deg)); 三角関数を使って、座標を求めている 角度は、度からラジアン角に変換している radians(度) (200, 200) 半径100
- 8.
- 9. 体験4 色ありの円を描画 void setup(){ size(500,500); colorMode(HSB,360,100,100); background(0,0,99); stroke(100); noFill(); for (int deg=0; deg<360; deg += 90){ float x = 100 * cos(radians(deg)); float y = 100 * sin(radians(deg)); fill(deg, 100, 100, 50); ellipse(250+x,250+y, 200, 200); } } 8 演習4-1 上記プログラムを入力し、実行してみよう fill(色相, 明度, 彩度) 塗りつぶす 色相0～359 明度, 彩度0～99 fill(色相, 明度, 彩度, 透明度) 塗りつぶす 透明度 0～99
- 10. (応用)体験5 円弧で描画 void setup(){ size(500,500); colorMode(HSB,360,100,100); background(0,0,99); stroke(100); noFill(); for (float deg=0;deg<360;deg+=15){ float x = 200 * cos(radians(deg)); float y = 200 * sin(radians(deg)); fill(deg,100,100,50); arc(250+x,250+y,400,400,radians(180+deg),radians(240+deg),OPEN); float x2 = 200 * cos(radians(deg+240)); float y2 = 200 * sin(radians(deg+240)); arc(250+x2,250+y2,400,400,radians(deg),radians(60+deg),OPEN); } } 9
- 11.
- 12.