STC オープンキャンパス 2022-07-02 Processing プログラミングで文字を点に!! 動画は、 https://www.instagram.com/p/CexWK6EPBWd/ https://www.instagram.com/p/CfgH31nMSLv/

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

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

3. /16
動きのあるプログラミング
 動きのあるプログラムを作成
4
サンテクノカレッジ Y.YAMAMOTO
void setup() {
}
void draw {
}
プログラムを記述
プログラムを記述
最初
1回だけ実⾏する
1秒間に
指定回実⾏する
デフォルトは
1秒間に60回
変数の宣⾔
2022-07-02
/16
⽂字から点群にする考え⽅
 ⽂字のフォントのアウトライン情報を利⽤
5
サンテクノカレッジ Y.YAMAMOTO
2022-07-02
この各点の情報を取得し、この点の位置を活⽤
この場合は、各点に⾚い円を描いている場合
点の位置を動かす
点の位置の円を描く
直線を描く

4. /16
サンプルプログラムの説明 (1)
import geomerative.*;
PFont f;
String msg = "サンテクノカレッジ";
RShape[] grp;
RPoint[][] points;
float [] x,y;
color [] msg_color;
int t=100;
6
(0, 0)
サンテクノカレッジ Y.YAMAMOTO
void setup(){
size(1200,600);
background(255);
setup_init();
}
void draw(){
background(255);
my_draw();
}
表⽰するメッセージ
キャンバスのサイズ
1200x600
X
Y
1200
600
プログラムは次スライドにも
2022-07-02
(0, 0)
/16
サンプルプログラムの説明 (2)
void setup_init(){
grp = new RShape[msg.length()]; //⽂字数分のgrpを⽤意
points = new RPoint[msg.length()][]; //⽂字数分のpointsを⽤意
x = new float[msg.length()]; //各⽂字のX座標
y = new float[msg.length()]; //各⽂字のY座標
msg_color = new color[msg.length()]; //各⽂字数の⾊
RG.init(this); //初期化
// 各⽂字で、フォントをload
for (int k = 0; k < msg.length(); k++) {
textSize(140);
grp[k] = RG.getText(msg.charAt(k)+"", "yumin.ttf", 120, LEFT);
if (k==0) x[k]=40;
else x[k] = x[k-1] + textWidth(msg.charAt(k-1));
y[k]=120;
msg_color[k] = color(0,0,255);
}
7
サンテクノカレッジ Y.YAMAMOTO
表⽰するメッセージ
の⽂字数の格納先の
取得
2022-07-02
この続きのプログラムは次スライドに
表⽰するメッセージ
の⽂字の
位置, ⾊などを設定

5. /16
サンプルプログラムの説明 (3)
RG.setPolygonizer(RG.ADAPTATIVE);
RG.setPolygonizer(RG.UNIFORMLENGTH);
RG.setPolygonizerLength(10);
// 各⽂字のアウトラインの情報
for (int i = 0; i < msg.length(); i++) {
points[i] = grp[i].getPoints();
for(int j=0; j<points[i].length; j++){
points[i][j].x += x[i];
points[i][j].y += y[i];
}
}
}
8
サンテクノカレッジ Y.YAMAMOTO
フォントのアウトライン情報の取得⽅法
2022-07-02
前のスライドの続きのプログラム
各⽂字が、points[i]に⼊っている
その各点の
points[i][j].xにX座標の値が⼊っている
points[i][j].yにY座標の値が⼊っている
この続きのプログラムは次スライドに
各⽂字の各点を
各⽂字の位置の場所だけずらしている
points[i][j].x += x[i];
points[i][j].y += y[i];
この値の変更で、取得するフォントの
アウトライン情報の点の数が変更
(例) 1のとき、⼀番細かくなる
/16
サンプルプログラムの説明 (4)
void my_draw(){
for (int i = 0; i < msg.length(); i++) {
noStroke();
fill(msg_color[i]);
pushMatrix();
translate(x[i],y[i]);
grp[i].draw();
popMatrix();
}
/*
for (int i = 0; i < msg.length(); i++) {
fill(255,0,0);
for(int j=0; j<points[i].length; j++){
ellipse(points[i][j].x, points[i][j].y,5,5);
}
}
*/
t -=1;
}
9
サンテクノカレッジ Y.YAMAMOTO
最初のメッセージを表⽰している部分
2022-07-02
各⽂字の各点を
⾚⾊の円で描いている部分
円を描いている部分
⾚⾊ 塗りつぶし

6. /16
体験1
演習1-1
好きなメッセージを表⽰してみよう
演習1-2
表⽰する⽂字の⾊を変更してみよう
10
サンテクノカレッジ Y.YAMAMOTO
演習1-2
void setup_init(){の中の
for
msg_color[k] = color(0,0,255);
体験1 プログラムを実⾏してみよう
実⾏結果例
演習1-1
String msg = "サンテクノカレッジ";
2022-07-02
⾚ 0〜255
緑 0〜255
⻘ 0〜255
/16
体験2
演習2-1
下記のプログラムのコメントを外してみよう
11
サンテクノカレッジ Y.YAMAMOTO
体験2 ⽂字のアウトラインに点を表⽰してみよう
実⾏結果例
演習2-1
void my_draw()の中で、
/*
for (int i = 0; i < msg.length(); i++) {
fill(255,0,0);
for(int j=0; j<points[i].length; j++){
ellipse(points[i][j].x, points[i][j].y,5,5);
}
}
*/
t -=1;
2022-07-02
これがコメントなので、消す
これがコメントなので、消す
演習2-2
⾚⾊で塗りつぶしではなく、
変更してみよう
これだと⾚⾊塗りつぶし
演習2-3
円の⼤きさを変更してみよう
円の縦⻑、横⻑の値
楕円も描ける
⽂字に点を描く

7. /16
体験3
演習3-1
下記のプログラムのように追加してみよう
12
サンテクノカレッジ Y.YAMAMOTO
体験3 ⽂字の点群を動かしてみよう
実⾏結果例
演習3-1
void my_draw()の中で、
for (int i = 0; i < msg.length(); i++) {
fill(255,0,0);
for(int j=0; j<points[i].length; j++){
points[i][j].y += 1;
ellipse(points[i][j].x, points[i][j].y,5,5);
}
}
t -=1;
2022-07-02
この⾏を追加する
演習3-2
下へ移動する変化量を変更してみよう
追加した⾏の値を変える
points[i][j].y += 1;
点群を動かす
下へ移動する
/16
体験4
演習4-1
下記のプログラムのように変更、追加してみよう
13
サンテクノカレッジ Y.YAMAMOTO
体験4 ⽂字の点群をゆらゆら動かしてみよう
実⾏結果例
void my_draw()の中で、
for (int i = 0; i < msg.length(); i++) {
fill(255,0,0);
for(int j=0; j<points[i].length; j++){
points[i][j].x += random(-3,3);
points[i][j].y += random(1,3);
ellipse(points[i][j].x, points[i][j].y,5,5);
}
}
t -=1;
2022-07-02
演習3-1からこの⾏を変更する
random(値1, 値2)とは、
値1から値2までの値を乱数で返す機能がある
そのときの気まぐれで。
ゆらゆら点群を動かす
ゆらゆら移動する
この⾏を追加する

8. /16
体験5
演習5-1
下記のプログラムのように変更、追加してみよう
14
サンテクノカレッジ Y.YAMAMOTO
体験5 固定の⽂字の⾊ではなく、実⾏する毎に変化させる
実⾏結果例
void setup_init(){の中の for⽂のなかで
for (int k = 0; k < msg.length(); k++) {
// msg_color[k] = color(0,0,255);
msg_color[k] =color(random(255),random(255),random(255));
2022-07-02
この⾏を追加する
初期の⽂字の⾊を乱数で変える
コメントにする
void my_draw(){の中の for⽂のなかで
for (int i = 0; i < msg.length(); i++) {
// fill(255,0,0);
fill(msg_color[i]);
コメントにする
この⾏を追加する
/16
体験6
演習6-1
下記のプログラムのように変更、追加してみよう
15
サンテクノカレッジ Y.YAMAMOTO
体験6 ⽂字の点がだんだん透明にさせる
実⾏結果例
void setup (){の中の
size(1200,600);
background(255);
frameRate(5);
2022-07-02
⽂字の点がだんだん透明に
この⾏を追加 1秒間に描画する回数
void my_draw(){の中の for⽂のなかで
for (int i = 0; i < msg.length(); i++) {
// fill(255,0,0);
fill(msg_color[i], t); 塗りつぶしの際に、透明度も変化させる
この⾏を変更する

9. /16
まとめ
 45分間で、Processingのプログラミングで⽂字
を動かすことを体験
 本校では、90分授業
 プログラミングの授業では、
 繰り返しの処理 for⽂
 分岐の処理 if⽂
 配列
 プログラミングに興味をもってください
 Processingでは、いろいろな表現ができます
16
サンテクノカレッジ Y.YAMAMOTO
しっかり説明を⾏います
2022-07-02