プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
Processing、図形を回転させる
Processingで描いた図形を回転させるやり方は2つあります。

1.微妙に位置をズラして同じ図形を何回も描く
2.rotate()を使って座標を回転させる


の2つです。

順番に見ていきましょう。

まずは「1.微妙に位置をズラして同じ図形を何回も描く」について説明します。

Processingはパラパラ漫画です。
静止画を何枚もパラパラすることで動いているように見せています。

だから、描く位置を少しずつズラしながら何回も描けば
動いているように見えます。
文字通りのパラパラ漫画と同じ理屈です。

例えば、こんな感じで四角を描いたとしますφ(--)

void setup(){
    background(255);
    size(800,400);
}

void draw(){
    background(255);

    //四角を描く
    rect(100, 100, 10, 10);
}

それを、こんな感じにしますφ(--)

void setup(){
    background(255);
    size(800,400);
}

float angle = 0;    //角度
float x = 0;    //横位置
float y = 0;    //縦位置


void draw(){
    background(255);
    
    x = cos(radians(angle));
    y = sin(radians(angle));


    //xとyの値を表示
    fill(0);
    text("x=" + x,10,10);
    text("y=" + x,10,20);
    
    //四角を描く
    rect(100 + x * 50, 100 + y * 50, 10, 10);
    
    //角度を1度増やす
    angle = angle + 1;

}

そうすると四角が、横位置100、縦位置100を中心にして
円を描くように動くはずです。

ポイントは

x = cos(radians(angle));
y = sin(radians(angle));

の部分です。

きちんと理屈を説明すると少しややこしいので

1.「radians(【角度】)」で角度の数字をラジアンに直す
 ※「ラジアン」が何かは気にしないでください。
2.「cos(radians(【角度】))」が横位置
3.「sin(radians(【角度】))」が縦位置

の3つを覚えてください。

「cos(radians(【角度】))」を横位置に足して
「sin(radians(【角度】))」を縦位置に足すと
その図形がパラパラする毎に円を描くように動きます。

今回のサンプルプログラムでは

rect(100 + x * 50, 100 + y * 50, 10, 10);

の部分です。
横位置に「x * 50」を、縦位置に「y * 50」を足していますよね。
xとyは、それぞれ

x = cos(radians(angle));
y = sin(radians(angle));
で設定した値が入っています。

ちなみに「x * 50」「y * 50」のように50を掛けているのは
そのままxとyを使うと円を描く軌道が小さくなるからです。
数字を変えると円の軌道が大きくなったり小さくなったりします。
縦と横の数字を変えて「x * 100」「y * 50」のようにすると楕円になったりします。

気が向いたら、いろいろと遊んでみてください。

例えば、こんなのとかφ(--)

void setup(){
    background(255);
    size(800,400);
}

float angle = 0;    //角度
float x = 0;    //横位置
float y = 0;    //縦位置

void draw(){
    if(angle % 360 == 0){
        background(255);
    }
    
    x = cos(radians(angle));
    y = sin(radians(angle));
    
    //四角を描く
    rect(100 + x * 50, 100 + y * 50, 10, 10);
    
    //角度を1度増やす
    angle = angle + 1;
}

こんなのとかφ(--)

void setup(){
    background(255);
    size(800,400);
}

float angle = 0;    //角度
float x = 0;    //横位置
float y = 0;    //縦位置

void draw(){
//    background(255);
    
    x = cos(radians(angle));
    y = sin(radians(angle));
    
    //四角を描く
    rect(100 + x * 50 + angle*0.1, 100 + y * 50, 10, 10);
    
    //角度を1度増やす
    angle = angle + 1;
}

四角を線に変えて、色も変化させてみたりとかφ(--)

void setup(){
    background(255);
    size(800,400);
}

float angle = 0;    //角度
float x = 0;    //横位置
float y = 0;    //縦位置

void draw(){
//    background(255);
    
    x = cos(radians(angle));
    y = sin(radians(angle));
    
    //線を描く
    stroke(angle % 256);
    line(100 + x * 50 + angle*0.1, 100 + y * 50, 10, 10);
    
    //角度を1度増やす
    angle = angle + 1;
}

ちょっと変えただけでも、全然、違う見た目になったりしますよ。

少し話が脱線しましたが、これが「1.微妙に位置をズラして同じ図形を何回も描く」です。

次に「2.rotate()を使って座標を回転させる」について説明します。

rotate()は座標軸を回転させる指定です。
具体的には、あーだこーだ。

きちんと理屈を理解しようとすると混乱するかもしれません。
実際に遊んでみて、まずは「どんな指定をすると、どうなる」だけ覚えてしまった方が良いでしょう。
仕組み的なことは余裕があったら勉強してください。

例えば、こんな感じで四角を描いたとしますφ(--)

void setup(){
    background(255);
    size(800,400);
}

void draw(){
    background(255);

    //四角を描く
    rect(100, 100, 10, 10);
}

それを、こんな感じにしますφ(--)

void setup(){
    background(255);
    size(800,400);
}

float angle = 0;    //角度

void draw(){
    background(255);

    rotate(radians(angle));
    
    //四角を描く
    rect(100, 100, 10, 10);

    //角度を1度増やす
    angle = angle + 1;


}

そうすると、四角が変な感じで動きます。

この四角は円の動きをしているのです。
ただし、左上の隅を中心にして(--)b

rotate()は軸を回転させる指定です。
だから、回転の中心は原点(横位置:0、縦位置:0の場所)になるのです。

この回転の中心をズラすにはtranslate()を使います。
※translate()が分からない場合は「Processing、図形を動かす」を読んで勉強してください。

例えば、こんな感じにするとφ(--)

void setup(){
    background(255);
    size(800,400);
}

float angle = 0;    //角度

void draw(){
    background(255);

    translate(200, 200);
    rotate(radians(angle));
    
    //四角を描く
    rect(100, 100, 10, 10);

    //角度を1度増やす
    angle = angle + 1;

}

横位置:200、縦位置:200の場所を中心にして四角が円を描きます。

こちらも、いろいろ遊んでみてください。

例えば、こんな感じにするとφ(--)

void setup(){
    background(255);
    size(800,400);
}

float angle = 0;    //角度

void draw(){
    background(255);

    translate(200, 200);
    rotate(radians(angle));
    
    //四角を描く
    rect(-100, -100, 200, 200);

    //角度を1度増やす
    angle = angle + 1;

}

その場で四角が回ります。

ただ、rotate()を使うと、それぞれの図形をバラバラに回せないのですよね。
そこが個人的には少し微妙です(--ゞ

「1.微妙に位置をズラして同じ図形を何回も描く」は図形を回します。
「2.rotate()を使って座標を回転させる」は画面全体を回します。

そんなイメージです。

気が向いたら、サンプルを動かしたり、数字を変えたりして遊んでみてください。
「百聞は一見にしかず」です(--)ノ

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:Processing  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事