STC オープンキャンパス 2022-06-04 Processing プログラミングで文字を動かす!! 動画は、 https://www.instagram.com/p/CdnSWh5OY4Y/ https://www.instagram.com/p/CeYC4lyu-rq/

1. サンテクノカレッジ オープンキャンパス
2022年6⽉4⽇(⼟)
⼭本 芳彦 yoshi@suntech.ac.jp
Processingでプログラミングを体験
プログラミングで⽂字を動かす!!
体験授業C の内容
 はじめに
 テーマ
 体験授業の概要
 体験
 体験1〜体験6
 まとめ
1
サンテクノカレッジ Y.YAMAMOTO
2022-06-04

2. はじめに
 テーマ
『プログラミングで⽂字を動かす!!』
 体験内容の概要
 Processingでプログラミングを体験
 Processingとは
 デジタルアートとビジュアルデザインのためのプロ
グラミング⾔語
 メディアアート、ジェネラティブアートが可能
 https://processing.org/
2
サンテクノカレッジ Y.YAMAMOTO
2022-06-04
プログラムの実⾏⽅法
Processingの起動 実⾏
停⽌
void setup(){
size(800, 600);
}
⼊⼒
3
サンテクノカレッジ Y.YAMAMOTO
2022-06-04

3. 動きのあるプログラミング
 動きのあるプログラムを作成
4
サンテクノカレッジ Y.YAMAMOTO
void setup() {
}
void draw {
}
プログラムを記述
プログラムを記述
最初
1回だけ実⾏する
1秒間に
指定回実⾏する
デフォルトは
1秒間に60回
変数の宣⾔
2022-06-04
⽤意してあるプログラム
 表⽰する⽂字列を1⽂字ずつ扱うための部
分は、あらかじめ⽤意しました
 体験授業では、1⽂字を扱うのではなく、⽂字列の
⽂字を1⽂字ずつ扱います
 『サンテクノカレッジ』や『さんてくのかれっじ』
 『サ』『ン』『テ』『ク』『ノ』『カ』 『レ』
『ッ』『ジ』『さ』『ん』『て』 『く』『の』
『か』『れ』『っ』『じ』
5
サンテクノカレッジ Y.YAMAMOTO
2022-06-04

4. サンプルプログラムの説明 (1)
PFont f;
String[] msg = { "サンテクノカレッジ",
"さんてくのかれっじ" };
Letter[][] letters;
int [] x,y;
6
(0, 0)
サンテクノカレッジ Y.YAMAMOTO
void setup() {
size(800, 600);
f = createFont("ＭＳ Ｐ明朝", 60 );
}
表⽰するメッセージ
キャンバスのサイズ 800x600
使⽤する⽂字のフォントとフォントサイズ
X
Y
800
600
明朝体でフォントサイズ60
この続きのプログラムは
次スライドに
2022-06-04
サンプルプログラムの説明 (2)
letters = new Letter[msg.length][];
for (int i = 0; i < msg.length; i++) {
letters[i] = new Letter[msg[i].length()];
}
x = new int[msg.length];
y = new int[msg.length];
for (int j = 0; j < msg.length; j++) {
x[j] = 200;
y[j] = 150 + (j+1)*100;
}
for (int j = 0; j < msg.length; j++) {
for (int i = 0; i < msg[j].length(); i++) {
textFont(f);
letters[j][i] = new Letter(x[j], y[j], msg[j].charAt(i));
x[j] += textWidth(msg[j].charAt(i));
}
} 7
表⽰する⽂字を個々に扱えるようにしている
サンテクノカレッジ Y.YAMAMOTO
表⽰するメッセージの⾏数の取得
表⽰するメッセージの
各⾏の⽂字数の取得
表⽰するメッセージの各⾏の位置⽤
表⽰するメッセージの各⾏の
X座標, Y座標の設定
200 250
350
表⽰するメッセージを1⽂字ずつを扱えるようにしている
2022-06-04

5. サンプルプログラムの説明 (3)
void draw() {
background(255);
for (int j = 0; j < msg.length; j++) {
for (int i = 0; i < letters[j].length; i++) {
fill(0,0,255);
textSize(60);
letters[j][i].display();
}
}
}
8
1秒間に60回 ⽂字を表⽰
サンテクノカレッジ Y.YAMAMOTO
背景⾊を⽩
メッセージを1⽂字表⽰
⾊の指定 (R,G,B) (0,0,255)で⻘⾊
フォントサイズ60
⽂字を表⽰
2022-06-04
体験1
演習1-1
好きなメッセージを表⽰してみよう
演習1-2
表⽰する⽂字の位置を調整してみよう
演習1-3
表⽰する⽂字の⾊を変更してみよう
9
サンテクノカレッジ Y.YAMAMOTO
演習1-2
for (int j = 0; j < msg.length; j++) {
x[j] = 200;
y[j] = 150 + (j+1)*100;
}
演習1-3
fill(0,0,255);
気が付いた⼈もいると思うけど、
⽂字動かないじゃん
drawという中に書けば、
1秒間に60回実⾏するのでは︖
体験1 プログラムを実⾏してみよう
実⾏結果例
演習1-1
String[] msg = { "サンテクノカレッジ",
"さんてくのかれっじ" };
2022-06-04

6. 2022-06-04
プログラムLetterの説明
10
サンテクノカレッジ Y.YAMAMOTO
class Letter {
char letter;
float homex,homey;
float x,y;
float theta;
Letter (float x_, float y_, char letter_) {
homex = x = x_;
homey = y = y_;
letter = letter_;
}
void display() {
textAlign(LEFT);
// 座標軸 移動 回転 ⽂字表⽰
pushMatrix();
translate(x,y);
rotate(theta);
text(letter,0,0);
popMatrix();
}
ホーム座標⽤(x,y)
現在の座標⽤(x,y)
回転⾓⽤
Letterが呼ばれたときに
1回だけ実⾏される箇所 初期化
指定した座標,回転させ表⽰を表⽰
2022-06-04
体験2
演習2-1
x -= 1; のかわりに、x += 1; にしてみよう
数値の1ではなく、違う値にもしてみよう
演習2-2
x -= 1; と、xの部分をyにかえて実⾏してみよう
11
サンテクノカレッジ Y.YAMAMOTO
void display() {
x -= 1;
textAlign(LEFT);
追加
実⾏結果例
左へ移動する
void display() {
x -= 1;
if (x < 0) x = 800;
textAlign(LEFT);
⽂字を動かす
演習2-1 ⽂字を動かす
体験2-2 ⽂字が動くけど、
端まで⾏ってしまったらもう表⽰されないけど、表⽰させたい場合
演習2-2
void display() {
y += 1;
演習2-1
void display() {
x += 1; 演習2-1 (例)
void display() {
x -= 10;

7. 2022-06-04
体験3
12
サンテクノカレッジ Y.YAMAMOTO
プログラムLetter の中で、次を追加して、実⾏してみよう
Letter (float x_, float y_, char letter_) {
homex = x = x_;
homey = y = y_;
x = random(width);
y = random(height);
letter = letter_;
}
追加
最初の⽂字の位置
random(width)とrandom(height)のwidthとheightは特別な値を持っていて、
⾃動でキャンバスのサイズとなる
size(800,600) の場合は、width=800 で height=600である
randomとは、乱数を発⽣させる機能である。
random(width)は、widthが800のときは、0〜800までの数を乱数で決めている
random(height)は、heightが800のときは、0〜600までの数を乱数で決めている
Letterが呼ばれたときに
1回だけ実⾏される箇所 初期化
xとyの中には、現在座標が⼊る 座標を⼊れる
演習2-1の⾏った作業は、削除する
体験3 最初の⽂字の位置の指定
実⾏結果例
体験4
13
サンテクノカレッジ Y.YAMAMOTO
プログラムLetter の中で、次を追加せよ
void shake() {
x += random(-2, 2);
y += random(-2, 2);
}
Y座標の変化
⽂字をゆらす
X座標の変化
追加
体験4 ⽂字をゆらす処理
サンプルプログラムのdrawの中で、作成したshakeを呼び出す
void draw() {
background(255);
for (int j = 0; j < msg.length; j++) {
for (int i = 0; i < letters[j].length; i++) {
fill(0,0,255);
textSize(60);
letters[j][i].display();
letters[j][i].shake();
random(-2, 2)は、-2から2までの数を乱数で
決めている
x += random(-2, 2);
今までのxの値に、新たにrandom(-2, 2)を加え
たものを新たにxの値としている
⽂字がゆれて表⽰がされる
実⾏結果例
演習4-1
x += random(-10, 10);
y += random(-10, 10);
2022-06-04
演習4-1
random(-2, 2)の-2や2の箇所を変更してみよう

8. 体験4 説明
14
サンテクノカレッジ Y.YAMAMOTO
プログラムLetter の中での追加した処理
void shake() {
x += random(-2, 2);
y += random(-2, 2);
}
Y座標の変化
⽂字をゆらす
X座標の変化
体験4 ⽂字をゆらす処理
1秒間に60回、繰り返して表⽰しているので、
⽂字がゆれて表⽰されっているように⾒える
現在位置
さ
次の位置 このどこかに
さ
2022-06-04
体験5
15
サンテクノカレッジ Y.YAMAMOTO
体験5 ⽂字ををホームに戻す
⽂字をホームに戻す
プログラムLetter の中で、次を追加せよ
void home() {
x = lerp(x, homex, 0.25);
y = lerp(y, homey, 0.25);
}
Y座標の算出
X座標の算出
lerpは、2点間の距離を⽐率分だけ算出
lerp(x, homex, 0.25);の場合は、
次のときに、homexに近づく
x homex
x homex
サンプルプログラムのdrawの中で、マウスが押されている間、homeを呼び出す
void draw() {
background(255);
for (int j = 0; j < msg.length; j++) {
for (int i = 0; i < letters[j].length; i++) {
fill(0,0,255);
textSize(60);
letters[j][i].display();
if (mousePressed) letters[j][i].home();
else letters[j][i].shake();
追加
変更
演習5-1
x = lerp(x, homex, 0.05);
y = lerp(y, homey, 0.05);
演習5-1
lerpの値を変更してみよう
2022-06-04

9. 体験5 説明
16
サンテクノカレッジ Y.YAMAMOTO
プログラムLetter の中で追加した処理
void home() {
x = lerp(x, homex, 0.25);
y = lerp(y, homey, 0.25);
}
⽂字をホームに戻す
体験5 ⽂字ををホームに戻す処理
2点間の距離で、0.25になる点を算出
現在位置
さ
ホームの位置
さ
Y座標の算出
X座標の算出
次の位置
さ
2022-06-04
2022-06-04
体験6
17
サンテクノカレッジ Y.YAMAMOTO
体験6 ⽂字をを回転させる 初期化の部分、ゆれる部分、ホームに戻る部分
⽂字を回転させる
プログラムLetterのhome中で、次を追加せよ
void home() {
x = lerp(x, homex, 0.05);
y = lerp(y, homey, 0.05);
theta = lerp(theta, 0, 0.05);
}
プログラムLetterのshake中で、次を追加せよ
void shake() {
x += random(-10, 10);
y += random(-10, 10);
theta += random(-0.5, 0.5);
}
プログラムLetter の中で、次を追加せよ
Letter (float x_, float y_, char letter_) {
homex = x = x_;
homey = y = y_;
x = random(width);
y = random(height);
theta = random(TWO_PI);
letter = letter_;
}
追加
追加 追加
プログラミング⾔語Processingの⾓度はラジアン⾓
0度から360度は、ラジアン⾓では、0から2π
TWO_PIは、2πを意味し、360度

10. 体験6 説明
18
サンテクノカレッジ Y.YAMAMOTO
⽂字を回転させる
体験6 ⽂字をを回転させる 初期化の部分、ゆれる部分、ホームに戻る部分
初期化の部分
開始時の⽂字⾓度
ゆれる部分 (⾓度のみ)
現在の⽂字⾓度 次の⽂字⾓度
ホームに戻る部分
現在の⽂字⾓度
さ
次の⽂字⾓度 ホームの⽂字⾓度
2022-06-04
まとめ
 45分間で、Processingのプログラミングで⽂字
を動かすことを体験
 本校では、90分授業
 プログラミングの授業では、
 繰り返しの処理 for⽂
 分岐の処理 if⽂
 配列
 プログラミングに興味をもってください
 Processingでは、いろいろな表現ができます
19
サンテクノカレッジ Y.YAMAMOTO
しっかり説明を⾏います
2022-06-04