STC OC20220809 Processing

サンテクノカレッジオープンキャンパス
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
2022-08-09
/22
プログラムの実⾏⽅法
Processingの起動実⾏
停⽌
void setup(){
size(800, 600);
}
⼊⼒
3
2022-08-09

/22
動きのあるプログラミング
 動きのあるプログラムを作成
4
void setup() {
}
void draw {
}
プログラムを記述
プログラムを記述
最初
1回だけ実⾏する
1秒間に
指定回実⾏する
デフォルトは
1秒間に60回
変数の宣⾔
2022-08-09
/22
花⽕の動きの考え⽅
 打ち上げ部分
 直進で移動
5
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("ＭＳＰ明朝", 100 );
x1=300; y1=580;
}
6
表⽰するメッセージ
キャンバスのサイズ
600x600
プログラムは次スライドにも
2022-08-09
X
Y
600
600
(0, 0)
/22
プログラム (0-2)
void draw() {
firework(); // 毎フレーム fireworkを実⾏する
}
void firework() {
firework1();
}
7
この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座標の位置
花⽕の⽟の初期位置

/22
プログラム1 花⽕⽟の移動 (1)
void firework1() {
noStroke(); //図形の枠⾊なし
fill(255,255,0); //塗りつぶし⻩⾊
ellipse(x1, y1,10,10); //円の中⼼(x1,y1)の縦横10の⼤きさの円を描画楕円描画可
y1 -= 6; //Y座標の位置を-6している
}
8
2022-08-09
⻩⾊の円が移動する
/22
void firework1() {
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
2022-08-09
ゆらぎを表現
⻩⾊の円がゆらぎながら移動する

/22
void firework() {
colorMode(RGB,255,255,255); //⾊の指定を RGBモード
fill(0,30); //塗りつぶし⿊透明度30
rect(0,0,600,600); //⿊の矩形で描画 600x600の⼤きさ
firework1();
}
10
2022-08-09
花⽕⽟の⾒えなる様⼦の表現
⻩⾊の円が消えながら移動する
追加する部分
/22
void firework1() {
fill(255,255,0); //塗りつぶし⻩⾊
if (y1>200) {
ellipse(x1, y1,10,10);
x1 += random(-2,2); //X座標の変化量を-2から2にしている
y1 += random(-6,-9);
}
}
11
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
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θ =
2022-08-09 13

/22
void firework1() {
if (y1>200) {
}
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
2022-08-09
花⽕がどんどん開く処理
追加する部分
変わらず
変わらず
変わらず
/22
void firework1() {
if (y1>200) {
}
}
if (r1>140) { //半径が140を超えたら
x1=300; //打ち上げ位置 X座標の設定
y1=580; //打ち上げ位置 Y座標の設定
r1=0; //花⽕が開く際の半径を0に設定
}
}
15
2022-08-09
花⽕が開く⼤きさを決める
追加する部分
変わらず
変わらず
変わらず
ある⼤きさまで開いたら
打ち上げ⽟

/22
void firework1() {
if (y1>200) {
}
fill(fw1c,100,100);
fw1c +=15; //値+15
if (fw1c>360) fw1c=0; //360超えたら0に
}
if (r1>140) { //半径が140を超えたら
x1=300; //打ち上げ位置 X座標の設定
y1=580; //打ち上げ位置 Y座標の設定
r1=0; //花⽕が開く際の半径を0に設定
}
} 16
2022-08-09
花⽕の⾊を変化させる
追加する部分
変わらず
変わらず
変わらず
/22
colorMode HSBモード
実⾏例 (良く使⽤する設定例)
colorMode(HSB, 360, 100, 100);
H(⾊相) 0〜360
S(彩度) 0〜100
B(明度) 0〜100
17
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);
}
fill(fw1c,100,100);
textFont(f,30);
textSize(40);
18
2022-08-09
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
2022-08-09
カ

/22
20
プログラム3 ⽂字の花⽕ (2)
void firework1() {
//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(); //座標軸を復帰
}
}
2022-08-09
⽂字の向きを回転
変わらず
変わらず
/22
花⽕の⽂字の回転
21
2022-08-09
カカ
(0, 0)
(0, 0) (0, 0)
座標軸を
回転
座標軸を
移動
(0, 0)
座標軸の復帰

/22
まとめ
 45分間で、Processingのプログラミングで⽂字
を動かすことを体験
 本校では、90分授業
 プログラミングの授業では、
 繰り返しの処理 for⽂
 分岐の処理 if⽂
 sin, cos
 ⾊のモード RGB, ⾊相, 彩度, 明度
 座標軸の移動、回転
 プログラミングに興味をもってください
 Processingでは、いろいろな表現ができます
22
しっかり説明を
⾏います
2022-08-09

STC OC20220809 Processing

Recommended

Recommended

More Related Content

More from Yoshihiko Yamamoto

More from Yoshihiko Yamamoto (20)

Recently uploaded

Recently uploaded (14)

STC OC20220809 Processing