processingで渦巻きの図形を描きました。
こういうプログラムということですね。
Processing
1size(500, 500);
2background(0);
3smooth();
4stroke(255);
5frameRate(60);
6
7float pai = 3.14159;
8float hankei = 0;
9float x;
10float y;
11int kaiten = 150;
12int n = 300;
13
14for (float rd = 0; rd < 2 * pai * kaiten; rd = rd + 2 * pai / n) {
15 x = 250 + hankei * sin(rd);
16 y = 250 - hankei * cos(rd);
17 ellipse(x, y, 5, 5);
18 hankei = hankei + 0.1;
19}
まず少々改善させていただきます。
Processing
1size(500, 500);
2background(0);
3stroke(255);
4
5float hankei = 0;
6final int KAITEN = 150;
7final int N = 300;
8
9for (float rd = 0; rd < 2 * PI * KAITEN; rd += 2 * PI / N) {
10 float x = 250 + hankei * sin(rd);
11 float y = 250 - hankei * cos(rd);
12 circle(x, y, 5);
13 hankei += 0.1;
14}
現状のコードは「staticモード」という書き方です。
動きがないスケッチなら、短くシンプルに書くことができます。
動きがあるスケッチは「activeモード」という書き方にする必要があります。
Programming Styles / Processing.org（うまく飛ばないが左の「Programming Styles」をクリックしたところ）
新規作成でできるsetup・drawがあるようなプログラムのことです。
Processing
1void setup(){
2 size(400, 300);
3}
4
5void draw(){
6 background(255);
7 rect(10, 10, 50, 50);
8}
今のコードを同じ意味で「activeモード」にするとこんな感じです。
Processing
1void setup() {
2 size(500, 500);
3 background(0);
4 stroke(255);
5
6 float hankei = 0;
7 final int KAITEN = 150;
8 final int N = 300;
9
10 for (float rd = 0; rd < 2 * PI * KAITEN; rd += 2 * PI / N) {
11 float x = 250 + hankei * sin(rd);
12 float y = 250 - hankei * cos(rd);
13 circle(x, y, 5);
14 hankei += 0.1;
15 }
16}
17
18void draw() {
19}
ただしこれでは渦巻くよう（動きのあるスケッチ）にはなりません！
動きのあるように見せるには、drawで描画しなければなりません。
setupは初回１回だけ呼ばれます。
一度設定すればいいような内容はこちらに書きます。
drawはフレームごと（１秒に６０回）に呼ばれます。
基本的にはパラパラ漫画のように、全部消して毎回描きなおします。
Processing
1void setup() {
2 size(500, 500);
3 stroke(255);
4}
5
6void draw() {
7 background(0);
8
9 float hankei = 0;
10 final int KAITEN = 150;
11 final int N = 300;
12
13 for (float rd = 0; rd < 2 * PI * KAITEN; rd += 2 * PI / N) {
14 float x = 250 + hankei * sin(rd);
15 float y = 250 + hankei * cos(rd);
16 circle(x, y, 5);
17 hankei += 0.1;
18 }
19}
さてやっと準備ができました。
processingで渦巻きの図形を描きました。この図形を中心に向かって渦巻くように（？｝回転させたい
回転させるにはrotateを使います。
rotate() / Reference / Processing.org
ただし既定では左上を中心に回転するので、translateで中心を変更します。
translate() / Reference / Processing.org
「渦巻くように」見せるには、回転が時間とともに変化しなければなりません。
そのための（グローバル）変数を用意してもいいのですが、フレームごとに増えていく組み込み変数があるのでそれを使いましょう。
frameCount / Reference / Processing.org
Processing
1void setup() {
2 size(500, 500);
3 stroke(255);
4}
5
6void draw() {
7 background(0);
8
9 translate(width/2, height/2); // 中心を画面中央に
10 rotate(-frameCount); // プラスだと時計回りマイナスだと反時計回り
11 //rotate(-frameCount * 2.0); // 速い
12 //rotate(-frameCount * 0.5); // 遅い
13
14 float hankei = 0;
15 final int KAITEN = 150;
16 final int N = 300;
17
18 for (float rd = 0; rd < 2 * PI * KAITEN; rd += 2 * PI / N) {
19 float x = hankei * sin(rd); // 「250+」が不要になったことに注意
20 float y = hankei * cos(rd);
21 circle(x, y, 5);
22 hankei += 0.1;
23 }
24}
どうでしょうか。
音楽も背景につけたいのですが、コードや手順
Minimならこんな感じ。
Minim : : AudioPlayer
Processing
1import ddf.minim.*; // importはプログラムの先頭に書く
2
3// グローバル変数
4// draw内に書いた変数（ローカル変数）とは違い、プログラム実行中ずっと存在している
5// 途中で消えてしまったら音も途切れてしまう
6Minim minim;
7AudioPlayer player;
8
9void setup() {
10 size(500, 500);
11 stroke(255);
12 background(0); // ファイル読み込み中のグレー色が見苦しいので
13
14 minim = new Minim(this);
15 player = minim.loadFile("MySound1.mp3");
16 player.loop();
17}
18
19void draw() {
20 background(0);
21
22 translate(width/2, height/2);
23 rotate(-frameCount);
24
25 float hankei = 0; // ローカル変数 drawに入るたびに生成・消滅している
26
27 // 以下省略
28}
組み込みのSoundならこんな感じ。
SoundFile / Libraries / Processing.org
Processing
1import processing.sound.*;
2
3SoundFile file;
4
5void setup() {
6 size(500, 500);
7 stroke(255);
8 background(0);
9
10 file = new SoundFile(this, "MySound1.mp3");
11 file.loop();
12}
13
14void draw() {
15 // 以下省略
16}
Q&A
ベストアンサー
