STC-OC2019_4th201909

Please download to get full document.

View again

All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
 2
 
  サンテクノカレッジ オープンキャンパス 2019年9月7日実施 体験授業「メディアアートへの一歩」 円、円弧、四分円を組み合わせてプログラミングで表現
Share
Transcript
  • 1. サンテクノカレッジ オープンキャンパス 2019年9月7日(土) 山本 芳彦 yoshi@suntech.ac.jp Processingでプログラミングを体験 メディアアートへの一歩 円、円弧、四分円を組み合わせて プログラミングで表現
  • 2. 体験授業C の内容 1.はじめに  テーマ  体験内容の概要 2.体験 1.体験1 円を描画 2.体験2 円を横方向に描画 3.体験3 円を円周上に描画 4.体験4 色ありの円を描画 5.(応用)体験5 円弧で描画 6.(応用)体験6 四分円で描画 3.まとめ 1
  • 3. はじめに  テーマ 『円、円弧、四分円を組み合わせて プログラミングで表現に挑戦!!』  体験内容の概要  Processingでプログラミングを体験  Processingとは  デジタルアートとビジュアルデザインのためのプロ グラミング言語  メディアアート、ジェネラティブアートが可能  https://processing.org/ 2 円
  • 4. プログラムの実行方法 Processingの起動 実行 停止 void setup(){ size(500,500); colorMode(HSB,360,100,100); ellipse(250,250, 200, 200); } 入力 実行結果例 3
  • 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. 体験3 円を円周上に描画 7
  • 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. (応用)体験6 四分円で描画 プログラムリストは省略 10
  • 12. メディアアート、ジェネラティブアートに 興味をもってください まとめ  Processingプログラミングで、簡単にアー トの作品を作成することが可能  本日のテーマ『円、円弧、四分円』を 組み合わせて、いろいろな表現が可能 11
  • Similar documents
    View more
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x