Download to read offline
Uploaded byYoshihiko Yamamoto
STC OC20220809 Processing
STC オープンキャンパス 2022-08-09 Processing プログラミングで文字で花火!! 動画は、下記に https://www.instagram.com/p/CgG-sKcDPla/ https://www.instagram.com/p/CgL5DTAMTDC/
STC OC20220809 Processing
- 1. サンテクノカレッジ オープンキャンパス 2022年8⽉9⽇(⽕) ⼭本 芳彦yoshi@suntech.ac.jp Processingでプログラミングを体験 プログラミングで⽂字で花⽕!! /22 体験授業C の内容 はじめに テーマ 体験授業の概要 オンライン形式に変更のため、プログラミングの体 験はしてもらえず、残念 1. プログラム1 花⽕⽟の移動部分 2. プログラム2 花⽕が開く部分 3. プログラム3 図形から⽂字へ変更 1 サンテクノカレッジ Y.YAMAMOTO 2022-08-09
- 2. /22 はじめに テーマ 『プログラミングで⽂字で花⽕!!』 体験内容の概要 Processingでプログラミングを体験 Processingとは デジタルアートとビジュアルデザインのためのプロ グラミング⾔語 メディアアート、ジェネラティブアートが可能 https://processing.org/ 2 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 /22 プログラムの実⾏⽅法 Processingの起動 実⾏ 停⽌ void setup(){ size(800, 600); } ⼊⼒ 3 サンテクノカレッジ Y.YAMAMOTO 2022-08-09
- 3. /22 動きのあるプログラミング 動きのあるプログラムを作成 4 サンテクノカレッジ Y.YAMAMOTO voidsetup() { } void draw { } プログラムを記述 プログラムを記述 最初 1回だけ実⾏する 1秒間に 指定回実⾏する デフォルトは 1秒間に60回 変数の宣⾔ 2022-08-09 /22 花⽕の動きの考え⽅ 打ち上げ部分 直進で移動 5 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 花⽕が開く部分 円周上の点が移動
- 4. /22 プログラム (0-1) PFont f; Stringmsgfw0 = "⽟"; String msgfw1 = "サンテクノカレッジオープンキャンパス"; int fr; float x1,y1; int r1=0,fg1=0,fc1=0; int fw1c=0; void setup() { size(600,600); fr=10; frameRate(fr); background(0); smooth(); f = createFont("ＭＳ Ｐ明朝", 100 ); x1=300; y1=580; } 6 サンテクノカレッジ Y.YAMAMOTO 表⽰するメッセージ キャンバスのサイズ 600x600 プログラムは次スライドにも 2022-08-09 X Y 600 600 (0, 0) /22 プログラム (0-2) void draw() { firework(); // 毎フレーム fireworkを実⾏する } void firework() { firework1(); } 7 サンテクノカレッジ Y.YAMAMOTO このfireworkの中⾝が花⽕の動きになる 2022-08-09 前スライドの続きのプログラム プログラムの説明 size(600,600); //ウィンドウサイズ fr=10; //フレームレートの設定 frameRate(fr); //1秒間に10回、draw()を実⾏ background(0); //背景⾊ ⿊ //グレースケール 0は⿊, 255は⽩ f = createFont("ＭＳ Ｐ明朝", 100 ); //明朝体で⽂字表⽰することを設定 x1=300; // 最初のX座標の位置 y1=580; // 最初のY座標の位置 花⽕の⽟の初期位置
- 5. /22 プログラム1 花⽕⽟の移動 (1) voidfirework1() { noStroke(); //図形の枠 ⾊なし fill(255,255,0); //塗りつぶし ⻩⾊ ellipse(x1, y1,10,10); //円の中⼼(x1,y1)の縦横10の⼤きさの円を描画 楕円描画可 y1 -= 6; //Y座標の位置を-6している } 8 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 ⻩⾊の円が移動する /22 プログラム1 花⽕⽟の移動 (2) void firework1() { noStroke(); //図形の枠 ⾊なし fill(255,255,0); //塗りつぶし ⻩⾊ ellipse(x1, y1,10,10); //円の中⼼(x1,y1)の縦横10の⼤きさの円を描画 楕円描画可 x1 += random(-2,2); //X座標の変化量を-2から2にしている y1 += random(-6,-9); //Y座標の変化量を位-6から-9にしている 固定の-6ではない } 9 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 ゆらぎを表現 ⻩⾊の円がゆらぎながら移動する
- 6. /22 プログラム1 花⽕⽟の移動 (3) voidfirework() { colorMode(RGB,255,255,255); //⾊の指定を RGBモード noStroke(); //図形の枠 ⾊なし fill(0,30); //塗りつぶし ⿊ 透明度30 rect(0,0,600,600); //⿊の矩形で描画 600x600の⼤きさ firework1(); } 10 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 花⽕⽟の⾒えなる様⼦の表現 ⻩⾊の円が消えながら移動する 追加する部分 /22 プログラム1 花⽕⽟の移動 (4) void firework1() { noStroke(); //図形の枠 ⾊なし fill(255,255,0); //塗りつぶし ⻩⾊ if (y1>200) { ellipse(x1, y1,10,10); x1 += random(-2,2); //X座標の変化量を-2から2にしている y1 += random(-6,-9); } } 11 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 花⽕⽟をある程度の位置で⽌める 追加する部分 プログラムの説明 if (y1>200) { } y1の値が200より⼤きい間は、矩形 の中を実⾏する
- 7. /22 プログラム2 花⽕が開く部分 (1) voidfirework1() { float xtmp,ytmp; if (y1>200){ } else { // 広がる部分 colorMode(HSB,360,100,100); //⾊の指定を HSBモード ⾊相 fill(fw1c,100,100); //塗りつぶし ⾚⾊0 for (int i=0; i<msgfw1.length(); i++) { //⽂字数だけ繰り返す float ang=i*360/msgfw1.length(); //各⽂字における⾓度を算出 xtmp = x1+100*cos(radians(ang-90)); //半径100の円周上の点 X座標算出 ytmp = y1+100*sin(radians(ang-90)); //半径100の円周上の点 Y座標算出 ellipse(xtmp, ytmp,10,10); } } } 12 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 花⽕が開く処理 追加する部分 変わらず 変わらず 半径100 /22 円周上の点の位置の算出 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.YAMAMOTO 2022-08-09 13
- 8. /22 プログラム2 花⽕が開く部分 (2) voidfirework1() { if (y1>200) { } else { // 広がる部分 for (int i=0; i<msgfw1.length(); i++){ float ang=i*360/msgfw1.length(); xtmp = x1+r1*cos(radians(ang-90)); ytmp = y1+r1*sin(radians(ang-90)); ellipse(xtmp, ytmp,10,10); } r1+=8; //円の半径の⼤きさを+8している } } 14 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 花⽕がどんどん開く処理 追加する部分 変わらず 変わらず 変わらず /22 プログラム2 花⽕が開く部分 (3) void firework1() { if (y1>200) { } else { // 広がる部分 r1+=8; //円の半径の⼤きさを+8している } if (r1>140) { //半径が140を超えたら x1=300; //打ち上げ位置 X座標の設定 y1=580; //打ち上げ位置 Y座標の設定 r1=0; //花⽕が開く際の半径を0に設定 } } 15 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 花⽕が開く⼤きさを決める 追加する部分 変わらず 変わらず 変わらず ある⼤きさまで開いたら 打ち上げ⽟
- 9. /22 プログラム2 花⽕が開く部分 (4) voidfirework1() { if (y1>200) { } else { // 広がる部分 colorMode(HSB,360,100,100); fill(fw1c,100,100); r1+=8; //円の半径の⼤きさを+8している fw1c +=15; //値+15 if (fw1c>360) fw1c=0; //360超えたら0に } if (r1>140) { //半径が140を超えたら x1=300; //打ち上げ位置 X座標の設定 y1=580; //打ち上げ位置 Y座標の設定 r1=0; //花⽕が開く際の半径を0に設定 } } 16 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 花⽕の⾊を変化させる 追加する部分 変わらず 変わらず 変わらず /22 colorMode HSBモード 実⾏例 (良く使⽤する設定例) colorMode(HSB, 360, 100, 100); H(⾊相) 0〜360 S(彩度) 0〜100 B(明度) 0〜100 17 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 明度50のとき 彩度50のとき 彩度,明度100のとき ⾊相0 ⾊相360 ⾊相
- 10. /22 プログラム3 ⽂字の花⽕ (1) voidfirework1(){ float xtmp,ytmp; textFont(f,30); textAlign(CENTER); noStroke(); fill(255,255,0); if (y1>200){ textSize(20); text(msgfw0,x1,y1); //ellipse(x1, y1,10,10); x1 += random(-2,2); y1 += random(-6,-9); } else { // 広がる部分 colorMode(HSB,360,100,100); fill(fw1c,100,100); textFont(f,30); textSize(40); 18 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 for (int i=0; i<msgfw1.length(); i++){ float ang=i*360/msgfw1.length(); xtmp = x1+r1*cos(radians(ang-90)); ytmp = y1+r1*sin(radians(ang-90)); text(msgfw1.substring( i, i+1 ),xtmp,ytmp); //ellipse(xtmp, ytmp,10,10); } r1+=8; fw1c +=15; if (fw1c>360) fw1c=0; } if (r1>140) { x1=300; y1=580; r1=0; } } 円の描画を⽂字に つづく つづき /22 花⽕の⽂字の向きの調整 ⽂字の向きを回転させる必要がある 19 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 カ
- 11. /22 20 プログラム3 ⽂字の花⽕ (2) voidfirework1() { for (int i=0; i<msgfw1.length(); i++){ float ang=i*360/msgfw1.length(); xtmp = x1+r1*cos(radians(ang-90)); ytmp = y1+r1*sin(radians(ang-90)); //ellipse(xtmp, ytmp,10,10); //text(msgfw1.substring( i, i+1 ),xtmp,ytmp); pushMatrix(); //座標軸を⼀時的に退避 translate(xtmp,ytmp); //座標軸を移動 rotate(radians(ang)); //座標軸を回転 text(msgfw1.substring( i, i+1 ),0,0); //⽂字を表⽰ popMatrix(); //座標軸を復帰 } } サンテクノカレッジ Y.YAMAMOTO 2022-08-09 ⽂字の向きを回転 変わらず 変わらず /22 花⽕の⽂字の回転 21 サンテクノカレッジ Y.YAMAMOTO 2022-08-09 カ カ (0, 0) (0, 0) (0, 0) 座標軸を 回転 座標軸を 移動 (0, 0) 座標軸の復帰
- 12. /22 まとめ 45分間で、Processingのプログラミングで⽂字 を動かすことを体験 本校では、90分授業 プログラミングの授業では、 繰り返しの処理 for⽂ 分岐の処理 if⽂ sin, cos ⾊のモード RGB, ⾊相, 彩度, 明度 座標軸の移動、回転 プログラミングに興味をもってください Processingでは、いろいろな表現ができます 22 サンテクノカレッジ Y.YAMAMOTO しっかり説明を ⾏います 2022-08-09