サンテクノカレッジ オープンキャンパス
2022年8⽉9⽇(⽕)
⼭本 芳彦 yoshi@suntech.ac.jp
Processingでプログラミングを体験
プログラミングで⽂字で花⽕!!
/22
体験授業C の内容
 はじめに
 テーマ
 体験授業の概要
 オンライン形式に変更のため、プログラミングの体
験はしてもらえず、残念
1. プログラム1 花⽕⽟の移動部分
2. プログラム2 花⽕が開く部分
3. プログラム3 図形から⽂字へ変更
1
サンテクノカレッジ Y.YAMAMOTO
2022-08-09
/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
/22
動きのあるプログラミング
 動きのあるプログラムを作成
4
サンテクノカレッジ Y.YAMAMOTO
void setup() {
}
void draw {
}
プログラムを記述
プログラムを記述
最初
1回だけ実⾏する
1秒間に
指定回実⾏する
デフォルトは
1秒間に60回
変数の宣⾔
2022-08-09
/22
花⽕の動きの考え⽅
 打ち上げ部分
 直進で移動
5
サンテクノカレッジ Y.YAMAMOTO
2022-08-09
 花⽕が開く部分
 円周上の点が移動
/22
プログラム (0-1)
PFont f;
String msgfw0 = "⽟";
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("MS P明朝", 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("MS P明朝", 100 );
//明朝体で⽂字表⽰することを設定
x1=300; // 最初のX座標の位置
y1=580; // 最初のY座標の位置
花⽕の⽟の初期位置
/22
プログラム1 花⽕⽟の移動 (1)
void firework1() {
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
ゆらぎを表現
⻩⾊の円がゆらぎながら移動する
/22
プログラム1 花⽕⽟の移動 (3)
void firework() {
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より⼤きい間は、矩形 の中を実⾏する
/22
プログラム2 花⽕が開く部分 (1)
void firework1() {
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
/22
プログラム2 花⽕が開く部分 (2)
void firework1() {
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
花⽕が開く⼤きさを決める
追加する部分
変わらず
変わらず
変わらず
ある⼤きさまで開いたら
打ち上げ⽟
/22
プログラム2 花⽕が開く部分 (4)
void firework1() {
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
⾊相
/22
プログラム3 ⽂字の花⽕ (1)
void firework1(){
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
カ
/22
20
プログラム3 ⽂字の花⽕ (2)
void firework1() {
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)
座標軸の復帰
/22
まとめ
 45分間で、Processingのプログラミングで⽂字
を動かすことを体験
 本校では、90分授業
 プログラミングの授業では、
 繰り返しの処理 for⽂
 分岐の処理 if⽂
 sin, cos
 ⾊のモード RGB, ⾊相, 彩度, 明度
 座標軸の移動、回転
 プログラミングに興味をもってください
 Processingでは、いろいろな表現ができます
22
サンテクノカレッジ Y.YAMAMOTO
しっかり説明を
⾏います
2022-08-09

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("MS P明朝", 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("MS P明朝", 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