processing
openFrameworks

【openFrameworks 初心者冒険記5】逃げまくってた...三角関数の扉を再ノック。sin() cos() サインコサイン....。メディアアートで避けては通れない?最初の壁

プロローグ

20171109214610.png

参照: http://r-dimension.xsrv.jp/classes_j/sine_cosine/

うげ〜。いやだこの図。。はい、こんにちは。。。
こちらの図見るとオエ〜ってなりますよね。僕はなります。
なのでお口直しに、小松菜奈さんの画像貼っときますわ。

最近ネバヤン(バンド)に胸熱で。。お別れの歌のMVやばい。
https://www.youtube.com/watch?v=ZFI-Hqeu_Ag

本題

円運動とかゆらゆら上下運動とかってsin()とかcos()が必要じゃないですか?
メディアアート系のプログラミングって。oFとかprocessingとか、Unityも?。

なのでなるべく優し〜く入門勉強してきたいと思います。

参考サイト
http://yoppa.org/ma2_10/1739.html
http://r-dimension.xsrv.jp/classes_j/sine_cosine/

入門します!

さて、プログラムによって図形を描く場合に避けて通れないのが三角関数(サイン、コサイン)です。
円などに代表される曲線を描く際によく使われます。
タンジェントは使用頻度が低いので、ここでは省略します。

だそうです。。。

まず先ほどの図。
大丈夫だから、ちょっとみてみてください。

20171109214610.png

これを勇気を出して、単純に読み解くと、

R → 円の半径

(x , y) →円上の座標

θ → 角度

らしいです。

20171109214219.jpg

雰囲気がある。いい。
溺れるナイフは漫画最高だったけど映画最悪だったなー笑

そして(x,y)の座標の求め方は、

x = R * cos(θ)

y = R * sin(θ)

でOKだそうです。お、意外といけるのでは?
ではこの式を使ってoFで円を描いてみます。
まぁofDrawCircle()で描けるのですが、、、勉強に。

できたぞ〜!!!!!
スクリーンショット 2017-11-09 22.37.08.png

動画
https://www.youtube.com/watch?v=JTVPKTFheS8

コード

ofApp.cpp
#include "ofApp.h"

float phase; // 段階の意味

const float R = 200; // 円の半径


//--------------------------------------------------------------
void ofApp::setup(){

    ofSetFrameRate(60);
    ofSetBackgroundAuto(false); // 毎回背景を塗りつぶしてリセットしない!
    ofBackground(255, 255, 255);

}

//--------------------------------------------------------------
void ofApp::update(){
    // 段階を更新
    phase += 0.01;
}

//--------------------------------------------------------------
void ofApp::draw(){


    //原点を画面の中心点に
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2);


    //点の座標を三角関数で計算するぞ   x = R * cos(θ) y = R * sin(θ)

    ofVec2f pos; // 円の位置
    pos.x = R * cos(phase);
    pos.y = R * sin(phase);


    //色を黄色に
    ofSetColor(256,256, 0);

    // 4ポイントの円を描画
    ofDrawCircle(pos.x, pos.y, 4);

}

どうやら 先ほどの公式のcos(θ)のθにあたる変数phase(段階)をupdateで増やしていくのがキモみたいっすね。

これに時間経過とか入れてやればいいのかな
そんくらいの理解でいいかな。。

浅くてすんません。。

次は、

y = R * sin(θ)

の公式を取得したので上下ゆらゆらやってみます!!

おっできた

スクリーンショット 2017-11-09 22.43.45.png

動画
https://www.youtube.com/watch?v=pQptfrukBRE

コードはこちら。今回はRがゆらゆらさせる範囲で、変数phase(段階)の増える値がゆらゆらする速度になってるんですね。

ofApp.cpp
float phase; // 段階の意味
const float R = 100;  //ゆらゆらさせる範囲

//--------------------------------------------------------------
void ofApp::setup(){

    ofSetFrameRate(60);
    ofBackground(255, 255, 255);

}

//--------------------------------------------------------------
void ofApp::update(){
    // 段階を更新
    phase += 0.01;
}

//--------------------------------------------------------------
void ofApp::draw(){


    //原点を画面の中心点に
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2);

    ofVec2f pos;
    pos.x = 0; // 左右は運動なし
    pos.y = R * sin(phase); // 上下ゆらゆら


    //色を黄色に
    ofSetColor(256,256, 0);

    // 30ポイントの円を描画
    ofDrawCircle(pos.x, pos.y, 30);

}

x = R * cos(θ)

を使えば左右ゆらゆらも表現できると思います^^。
ちょっとは三角関数と仲良くなれた気がします!
今回で基礎をかじった気がするから、sin波も学んでみたいです。

完。

本家のブログはこちら 超雑多です。w🍺
ホンキートンク・スーダラブルース
http://www.sudara-bluse.tokyo/entry/openframeworks_5