前回爆発音を作成しましたが、今回はそれを利用した爆発エフェクトの作成です。

　Processingを用いた爆破エフェクトの作成はGoogleで検索するといくつか出てきますが、今回はシンプルに円を拡大することにしました。
　特に難しいことはしていないので下の動画を見ればどのような表現をしているかわかると思います。

ちさと@chisao_62

Processingで作る爆発エフェクト
チカチカします。
音出ます。 https://t.co/Blv86kOSVl

2021/01/08 16:00:15

　中身としては、"爆発モード"に入る際に更新情報としてそのタイミングでの時間を取得し、そこからの経過時間で一番大きな円の大きさを変えています。小さい円は、ある程度ランダムな場所にある程度ランダムな最大サイズの円を設定し、半径0の円から最大サイズになるまで描画しています。小さい円は5個描画され、一つの描画が終わると次の円が表示されるようになっています。

　以下コードです。ある程度コメントで説明してあります。

2. import java.util.Random;
3. import ddf.minim.*;
4. import ddf.minim.analysis.*; 
5. import ddf.minim.effects.*;
6. import ddf.minim.signals.*;
7. import ddf.minim.spi.*;
8. import ddf.minim.ugens.*;
9. 
   
10. int[][] circle = new int[4][5];//x,y,r,t0,t
11. char[] mode = new char[2];
12. int[] bubble = new int[4];
13. int[] noisevolmode = new int[2];
14. 
    
15. Minim minim; 
16. AudioOutput out;
17. Random random = new Random();
18. Noise[][] noisevol = new Noise[8800][2];
19. 
    
20. void setup() {
21.   size(1920, 1080);
22.   colorMode(HSB, 360, 255, 255, 255);
23.   strokeWeight(5);
24.   background(0);
25.   
26.   minim = new Minim(this);
27.   out = minim.getLineOut(Minim.STEREO);
28.   for (int i = 0; i < 8800; i++) {
29.     noisevol[i][0] = new Noise(1.0 + cos(map(i, 0, 8800, 0, PI)), Noise.Tint.BROWN);
30.   }
31.   for (int i = 0; i < 8800; i++) {
32.     noisevol[i][1] = new Noise(1.0 + cos(map(i, 0, 8800, 0, PI)), Noise.Tint.RED);
33.   }
34. }
35.   
36. void draw() {//ループ処理
37.   background(0);
38.   if (mode[1] != mode[0]) {//更新処理の判定
39.     update();
40.     mode[1] = mode[0];
41.   }
42.   switch(mode[0]) {//現在のモードの実効
43.   case 'b':
44.     bubble();
45.     break;
46.   default:
47.     break;
48.   }
49. }
50. 
    
51. void update() {//更新処理
52.   switch(mode[1]) {//終了処理
53.   case 'b':
54.     noisevol[noisevolmode[1]][0].unpatch(out);
55.     noisevol[noisevolmode[1]][1].unpatch(out);
56.     break;
57.   default:
58.     break;
59.   }
60.   switch(mode[0]) {//開始処理
61.   case 'b':
62.     if (mode[1] != mode[0]) {
63.       bubble[0] = millis();
64.     }
65.     break;
66.   default:
67.     break;
68.   }
69. }
70. 
    
71. void keyPressed() {//キーボード入力の割り込み
72.   mode[0] = key;
73. }
74. 
    
75. void bubble() {//円と音の出力
76.   background(0);
77.   bubble[1] = millis() - bubble[0];
78.   bubble[2] = (millis() - bubble[0]) * 10;
79.   bubble[3] = bubble[2] % 2200;
80.   
81.   if (bubble[2] >= 4 * 2200) {//終了判定
82.     mode[0] = 's';
83.     return;
84.   }
85.   circle[0][4] = (millis() - circle[0][3]) * 2;
86.   if (circle[0][2] == 0 || circle[0][2] < circle[0][4]) {
87.     circle[0][4] = 0;
88.     circle[0][3] = millis();
89.     circle[0][2] = random.nextInt(500);
90.     circle[0][1] = height / 4 + random.nextInt(height /2);
91.     circle[0][0] = width / 4 + random.nextInt(width /2);
92.   }
93.   circle[1][4] = (millis() - circle[1][3]) * 2;
94.   if (circle[1][2] == 0 || circle[1][2] < circle[1][4]) {
95.     circle[1][4] = 0;
96.     circle[1][3] = millis();
97.     circle[1][2] = random.nextInt(500);
98.     circle[1][1] = height / 4 + random.nextInt(height /2);
99.     circle[1][0] = width / 4 + random.nextInt(width /2);
100.   }
101.   circle[2][4] = (millis() - circle[2][3]) * 2;
102.   if (circle[2][2] == 0 || circle[2][2] < circle[2][4]) {
103.     circle[2][4] = 0;
104.     circle[2][3] = millis();
105.     circle[2][2] = random.nextInt(500);
106.     circle[2][1] = height / 4 + random.nextInt(height /2);
107.     circle[2][0] = width / 4 + random.nextInt(width /2);
108.   }
109.   circle[3][4] = (millis() - circle[3][3]) * 2;
110.   if (circle[3][2] == 0 || circle[3][2] < circle[3][4]) {
111.     circle[3][4] = 0;
112.     circle[3][3] = millis();
113.     circle[3][2] = random.nextInt(500);
114.     circle[3][1] = height / 4 + random.nextInt(height /2);
115.     circle[3][0] = width / 4 + random.nextInt(width /2);
116.   }
117. 
     
118.   noisevolmode[0] = bubble[2];
119.   noisevol[noisevolmode[1]][0].unpatch(out);
120.   noisevol[noisevolmode[0]][0].patch(out);
121.   noisevol[noisevolmode[1]][1].unpatch(out);
122.   noisevol[noisevolmode[0]][1].patch(out);
123.   noisevolmode[1] = noisevolmode[0];
124. 
     
125.   fill(0, 0, 255, 255);
126.   circle(width / 2, height / 2, bubble[3]);
127.   circle(circle[0][0], circle[0][1], circle[0][4]);
128.   circle(circle[1][0], circle[1][1], circle[1][4]);
129.   circle(circle[2][0], circle[2][1], circle[2][4]);
130.   circle(circle[3][0], circle[3][1], circle[3][4]);
131. }

　皆さん爆発音を自分で用意したくなった時があると思います。でも、どう作ればいいかわからないですよね？　そんな方のために今回は爆発音を作る方法を紹介しようと思います！

　まず、作成経緯です。爆発音のフリー素材なんかネット上にごろごろ転がっているので、それを持ってくればこの記事はいりません。しかし、全部Processingで完結させるといってしまった以上Processingで作るしかありません。いくら調べてもProcessing上で爆発音を作っている人はいなかったので日本初の試みです。
　次に爆発音についてです。爆発音は調べたところノイズを減衰させるといい感じに聞こえるらしいです。それなのでminimの中にあるNoiseというものを使って作ることにします。

　これを実装するためにはノイズの大きさを変える必要があるのですが、自分が英語リファレンスを読んだ感じできませんでした。それなので今回は音量が違う8800通りのノイズを定義しています。この8800という数字はほかのところとの兼ね合いで生まれたものなので特に気にしなくていいです。

　また、Processingには

1. ホワイトノイズ
2. ブラウンノイズ
3. ピンクノイズ
4. レッドノイズ

　今まで使った技術で↓のカウントダウンが作れます。

ちさと@chisao_62

Processingで作るカウントダウン https://t.co/FNk4NilWYv

2021/01/05 21:27:24

　やってることとしては、その時間の時刻を表示し、文字の透明度をsinで変えているだけです。多分もっとスマートな方法があります。

　↓にこれのコードを貼っておくのでこれをコピペして、コピペした先の.pdeと同じ階層にフォントの.ttfファイルを入れれば動きます。また、OBSに入れることを前提として制作していたのでFHDになってますが、小さくしたいときはsize(,)の中身で調節してください。その時多少文字がずれてしまう時は、121行目のrect(,,,)の係数を少しずつ変えてください。

1. import ddf.minim.*;
2. import ddf.minim.analysis.*; 
3. import ddf.minim.effects.*;
4. import ddf.minim.signals.*;
5. import ddf.minim.spi.*;
6. import ddf.minim.ugens.*;
7. 
   
8. PFont D14;
9. int[] now = new int[5];
10. char[] mode = new char[2];
11. int target;
12. String s;
13. 
    
14. Minim minim; 
15. AudioOutput out;
16. Oscil oscil;
17. 
    
18. void setup() {
19.   size(1920, 1080);
20.   D14 = createFont("DSEG14Modern-Regular.ttf", 60);
21.   colorMode(HSB, 360, 255, 255, 255);
22.   textAlign(CENTER, CENTER);
23. 
    
24.   strokeWeight(5);
25. 
    
26.   minim = new Minim(this);
27.   out = minim.getLineOut(Minim.STEREO);
28.   oscil = new Oscil(440, 0.5, Waves.SQUARE);
29. }
30. 
    
31. void draw() {
32.   background(0);
33.   if (mode[1] != mode[0]) {
34.     update();
35.     mode[1] = mode[0];
36.   }
37.   switch(mode[0]) {
38.   case 'c':
39.     count();
40.     break;
41.   default:
42.     break;
43.   }
44. }
45. 
    
46. void count() {
47.   now[0] = target - millis();
48.   now[1] = int( map( sin( map( now[0] / 2 % 1000, 0, 1000, 0, 2*PI) + PI / 4), -1, 1, 0, 255));
49.   now[2] = now[0] % 1000;
50.   now[4] = now[0];
51.   if (now[0]<10) {
52.     mode[0] = 'b';
53.     return;
54.   }
55.   if (now[0] % 1000 <10) {
56.     s = "00" + str(now[0] % 1000);
57.   } else {
58.     if (now[0] % 1000 < 100) {
59.       s = "0" + str(now[0] % 1000);
60.     } else {
61.       s = str(now[0] % 1000);
62.     }
63.   }
64.   now[0] = now[0] / 1000;
65.   if (now[0] % 60 <10) {
66.     s = "0" + str(now[0] % 60) + ":" + s;
67.   } else {
68.     s = str(now[0] % 60) + ":" + s;
69.   }
70.   now[0] = now[0] / 60;
71.   if (now[0] % 60 <10) {
72.     s = "0" + str(now[0] % 60) + ":" + s;
73.   } else {
74.     s = str(now[0] % 60) + ":" + s;
75.   }
76.   now[0] = now[0] / 60;
77.   if (now[0] % 60 <10) {
78.     s = "0" + str(now[0] % 60) + ":" + s;
79.   } else {
80.     s = str(now[0] % 60) + ":" + s;
81.   }
82. 
    
83.   if (now[4] >10000) {
84.     if (now[2] < 100) {
85.       if (now[3] != 1) {
86.         oscil.patch(out);
87.         now[3] = 1;
88.       }
89.     } else {
90.       oscil.unpatch(out);
91.       now[3] = 0;
92.     }
93.   } else {
94.     if (now[4] > 5000) {
95.       if (now[2] < 100 || (now[2] > 500 && now[2] < 600)) {
96.         if (now[3] != 1) {
97.           oscil.patch(out);
98.           now[3] = 1;
99.         }
100.       } else {
101.         oscil.unpatch(out);
102.         now[3] = 0;
103.       }
104.     } else {
105.       if (now[4] > 1000) {
106.         if (now[2] < 100 || (now[2] > 500 && now[2] < 600) || (now[2] > 250 && now[2] < 350) || (now[2] > 750 && now[2] < 850)) {
107.           if (now[3] != 1) {
108.             oscil.patch(out);
109.             now[3] = 1;
110.           }
111.         } else {
112.           oscil.unpatch(out);
113.           now[3] = 0;
114.         }
115.       }
116.     }
117.   }
118. 
     
119.   stroke(0, 0, 255, map( now[1], 0, 255, 100, 255));
120.   fill(0, 0, 0, 0);
121.   rect(width / 2 - textWidth(s) / 2, height / 2 - (textAscent() + textDescent()) / 2 - 5, textWidth(s), textAscent() + textDescent() + 10);
122.   textFont(D14);
123.   fill(0, 0, 255, now[1]);
124.   text(s, width / 2, height / 2);
125. }
126. 
     
127. void update() {
128.   switch(mode[1]) {
129.   case 'c':
130.     stroke(0, 0, 0, 255);
131.     oscil.unpatch(out);
132.     break;
133.   default:
134.     break;
135.   }
136.   switch(mode[0]) {
137.   case 'c':
138.     if (mode[1] != mode[0]) {
139.       target = millis() + (((((0 * 60) + 1) * 60) + 0) * 1000);
140.     }
141.     break;
142.   default:
143.     break;
144.   }
145. }
146. 
     
147. void keyPressed() {
148.   mode[0] = key;
149. }

　processingのライブラリにminimというものがあり、これでは音に関することが簡単に実装することができるようになります。
　今回はその中でもOscilという機能を使っていろいろな波を鳴らす方法です。
　デフォルトでならせる波は6種類あります。それそれ下図の左上から

1. 正弦波
2. 三角波
3. ノコギリ波
4. 矩形波
5. 1/4パルス波
6. フェーザ波

　Processingで配列を定義する方法は↓のとおりです。Processingの配列はmatlabとかとは違い0から始まります。つまり、大きさが3の配列は0,1,2と番号を振られます。

int[][] matrix = new int[a][b];//a*b
このように定義をすることでa*bの配列を作ることができます。また、[]の数を増やすことで要素の数を増やすこともできますし、int型以外の例えばchar型やfloat型でも作ることができます。

　これを使った簡単な例を↓に書いておきます。

1. int[][] matrix = new int[2][3];
2. 
   
3. void setup() {
4.   for (int j = 0; j < 3; j++) {
5.     for (int i = 0; i < 2; i++) {
6.       matrix[i][j] = i + j;
7.     }
8.   }
9.   for (int j = 0; j < 3; j++) {
10.     print("[");
11.     for (int i = 0; i < 2; i++) {
12.       print(matrix[i][j]);
13.       if (i < 2 - 1) {
14.         print(", ");
15.       }
16.     }
17.     println("]");
18.   }
19. }

　Processingで何かを作っていて、現在時刻を表示したいことがたまにあると思います。そうでなくても、現在時刻によって変化する作品を作ることはあると思います。それなので今回は例としてデジタル時計を作ってみます。

　使う関数は、hour(),minute(),second()です。その名の通りこれらはその瞬間の"時間""分""秒"を返してくれます。これを使ってデジタル時計を作ると↓のようになります。


　前に紹介したフォントの追加方法(http://blog.livedoor.jp/chisato_tofu/archives/25772956.html)を使っています。一応使ったプログラムを下に貼っておきます。適当に書いたのできれいじゃないのは許してください。

1. PFont D14;
2. String t;
3. int s;
4. int m;
5. int h;
6. 
   
7. void setup() {
8.   size(320, 80);
9.   strokeWeight(5);
10.   colorMode(HSB, 360, 255, 255, 255);
11.   D14 = createFont("DSEG14Modern-Regular.ttf", 60);
12. }
13. void draw() {
14.   background(0);
15.   textFont(D14);
16.   stroke(0, 0, 255, 255);
17.   fill(0, 0, 255, 255);
18.   s = second();
19.   m = minute();
20.   h = hour();
21.   if (h < 10) {
22.     t = "0" + str(h);
23.   }else{
24.     t = str(h);
25.   }
26.   if (m < 10) {
27.     t = t + ":" + "0" + str(m);
28.   }else{
29.     t = t + ":" + str(m);
30.   }
31.   if (s < 10) {
32.     t = t + ":" + "0" + str(s);
33.   }else{
34.     t = t + ":" + str(s);
35.   }
36.   text(t, 0, 70);
37. }

プログラムが長くなってきたとき自分で関数を作ることがあると思うのですが、今回はProcessingでやる方法です。

　↓のように書けば大丈夫です

1. void setup(){
2.   function1();
3.   function2();
4.   function3();
5.   function4();
6. }
7. 
   
8. void function1(){
9.   println("a");
10. }
11. void function2(){
12.   println("b");
13. }
14. void function3(){
15.   println("c");
16. }
17. void function4(){
18.   println("d");
19. }

　Processingでランダムな数字を生成する方法です。プログラミングをしているとたまにランダムな数字が欲しいときがあり、その時はその環境に合わせた関数を使うのですが、今回はProcessingのRandom関数の使い方です。

　コードは下のとおりです。

1. import java.util.Random;//Random関数のインポート
2. Random random = new Random();//"random"という変数を定義
3. 
   
4. void draw() {
5.   int i = random.nextInt(255);//"i"という変数に0~255の間のランダムな値を挿入
6.   println(i);//"i"を表示
7. }

　これを実行すると↓のように0~255のランダムな値が連続して表示されます。

Processingでフォントを使う時はPFontで指定するのですが、これで選べるフォントは結構少ないです。デフォルトで使えるフォントは、"ツール"->"フォント作成"で出てくるものだけです。結構あるように見えますが、デザインフォントは基本ないので好きなフォントを使えるわけではありません。それなので今回は好きなフォントを使えるようにする方法を紹介します。

①好きなフォントの.ttfファイルを用意する。
　この状態の単体のファイルを用意します。今回はこちらのサイト(https://www.keshikan.net/fonts.html)のフォントを利用させていただいています。

なんとなく、Processingの中で完結するハッカーっぽい画面とそれに付随する映像を作ったので、その記事です。細かいのをちょくちょく出します。

　一応できたものとしては、ちょうど555行のコードを書いて↓みたいな映像を作りました。

ちさと@chisao_62

一応これでひとまず完成で https://t.co/ov7n4AnVKP

2020/12/23 21:26:45

　これからちょくちょく使った技術のメモを”ハッカーっぽい画面を作る”のタグで書いていこうと思います。