Download as PDF, PPTX
STC-OC2019_1st201906
- 1. サンテクノカレッジ オープンキャンパス 2019年6月1日(土) 山本 芳彦yoshi@suntech.ac.jp
- 2. 体験授業C の内容 １．はじめに テーマ 体験内容の概要 ２．体験 １．体験1 円を描く ２．体験2 微動の円を描く ３．体験3 円運動する円 ４．体験4 円でSを描く ５．体験5 円でSTCを描く ３．まとめ 1
- 3. はじめに テーマ 『円を用いて、動きのある表現に挑戦!!』 体験内容の概要 Processingでプログラミングを体験 Processingとは デジタルアートとビジュアルデザインのためのプロ グラミング言語 メディアアート、ジェネラティブアートが可能 https://processing.org/ 2
- 4. プログラムの実行方法 Processingの起動 実行 停止 void setup(){ size(400,400); background(0); } voiddraw(){ noStroke(); fill(random(255), random(255), random(255)); ellipse(random(400), random(400), 40 , 40); } 入力 実行結果例 3
- 5. 体験1 円を描く void setup(){ size(400,400);サイズの指定 background(0); 背景を黒色 } Void draw(){ noStroke(); 線無し fill(255,0,0); ellipse(random(400), random(400), 40 , 40); } 演習1-1 上記プログラムを入力し、実行してみよう 演習1-2 プログラムを変更 • 円の大きさを変えてみよう • 円の色を青色に変えてみよう • 円の色をランダムで、いろいろ変化するように変えてみよう • ヒント fillの箇所に、0や255ではなくrandom(255)を入れてみよう fill(r, g, b) 塗りつぶす r(赤) g(緑) b(青) 0～255 fill(r, g, b, 透明度) 塗りつぶす 透明度 0～255 ellipse(中心X座標,中心Y座標, 横, 高さ) 円を描く(横と高さの値が同じ場合) 楕円を描く(横と高さの値が異なる場合) random(値) 乱数で値を作成 random(400)の場合、0～400までの値中心Y座標 横 高さ中心X座標 4
- 6. 体験2 微動の円を描く (1) floatx1 = 100; float y1 = 200; float r = 150; void setup(){ size(400, 400); background(0); } void draw(){ fill(0); noStroke(); rect(0, 0, 400, 400); x1 = x1 + random(-5, 5); x1の値を乱数で変化させる y1 = y1 + random(-5, 5); y1の値を乱数で変化させる int i = 0; while(i < 10){ noFill(); stroke(random(255), random(255), 255); ellipse(x1 + random(-10, 10), y1 + random(-10, 10), r, r); i = i + 1; } } 10回 円を描く 中心座標を変化させている 中心座標を前回に少し変化 矩形を描画 中心X座標を変化 中心Y座標を変化 stroke (r, g, b) 線の色 r(赤) g(緑) b(青) 0～255 実行結果例 5
- 7. 体験2 微動の円を描く (2) 演習2-1 プログラムex2-1.pdeをコピーし、実行してみよう 演習2-2プログラムを変更 • 円をさらにもう一つ追加してみよう • ヒント • 円の色も変えてみよう float x1 = 100; float y1 = 200; float r = 150; float x2 = 200; 追加 float y2 = 200; 追加 下記を真似て、x2 や y2 を同じように入力 x1 = x1 + random(-5, 5); y1 = y1 + random(-5, 5); 下記を真似て、x2 や y2 を同じように入力 ellipse(x1 + random(-10, 10), y1 + random(-10, 10), r, r); stroke(random(255), random(255), 255); 実行結果例 3円の場合 6
- 8. 体験3 円運動する円 (1) 演習3-1 プログラムex3-1.pdeをコピーし、実行してみよう 演習3-2プログラムを変更 • 円の大きさを変化させてみよう • 円運動する半径を変化させてみよう • ヒント • 円運動する速さを変化させてみよう • ヒント x = 200 + cos(angle)*120; y = 200 - sin(angle)*120; ellipse(x , y, 50,50); cnt += 0.2; 実行結果例 色の表し方には • RGB • 色相, 明度, 彩度 今回は、色相を使っている 円の中心座標(200,200) 半径120の円上 円の中心座標(200,200) 半径120 7
- 9. 体験3 円運動する円 (2) 演習3-3 プログラムex3-3.pdeをコピーし、実行してみよう 円運動する円の大きさ(半径)を変化させている 説明 floatr = 120; 追加 int fg= -1; 追加 途中省略 void draw(){ 途中省略 for (int i=0; i<360; i += 30) { x = 200 + cos(angle) * r; y = 200 - sin(angle) * r; ellipse(x , y, 50, 50); } cnt += 0.2; r += 0.2 * fg ; if (r>120 ) fg = -1; if (r<1 ) fg = 1; } 実行結果例 rの値を変化 rの値を増加か,減少か 8
- 10. 体験4 円でSを描く 演習4-1 プログラムex4-1.pdeをコピーし、実行してみよう 演習4-2 プログラムを変更 •円の色を青系に変化させてみよう • もう少し小さく円を描画しよう • ヒント 演習4-3 プログラムを変更 • 円の色を白にして変化させてみよう • 透明度もいろいろ変えて試してみよう fill(random(255), random(255), random(255)); float r = random(50); noStroke(); ellipse(0, 0, r, r); 実行結果例 実行結果例 透明度 設定なし 9
- 11.
- 12.