
自分で工夫して表現できるようになるためになった理解の仕方を教えてほしい。

今回の記事では、
- Processingの三角関数で作品を作れるようになる5ステップ
- Processingの三角関数の3つの応用例
- Processingの三角関数を自分で使えるようになった結果
- まとめ | 実際に色々と作って三角関数を使いこなす
について書いています。
この記事を書いている僕
思いっきり文系の人間。
高校は工業系だが理数系やC言語の授業もさっぱり分からず低い点数ばかりで苦しんでプログラミングや理数系は避けてきた人生。
2020年12月25日の31歳。プログラマーと話をしてやってみようと思い始め、2020年12月26日22時頃からプログラミングを開始。本当の完全な初心者。
Processingを中心に勉強を始めました。
Processingの三角関数。
sin関数とcos関数を理解するのは本当に大変でした。
プログラミングを始めて1ヶ月目くらいで調べたことです。
細かい計算などはなく、理解しやすくなる知識とコードの数値を変えることで作品を作れるようになっていきましょう。
分からなかった頃の自分のための解決策のために、勉強内容の定着のためのアウトプットとして記事にさせて頂きました。
参考にして頂ける部分があれば嬉しいです。
Processingの三角関数で作品を作れるようになる5ステップ

最後の方の項目でコピペできる作品
Processingの三角関数(sin関数、cos関数を理解)
- 円の範囲とx軸とy軸について
- 円の範囲の円周率の数値と動きの向き【覚えなくてOK】
- sin関数とcos関数を組み合わせて円を周回させる【コードの書き方の例と意味の解説】
- sin関数の縦の範囲だけで動かす方法
- cos関数の横の範囲だけで動かす方法

1 円の範囲とx軸とy軸について【知っておく】


横がx軸 縦がy軸 下に解説
円について
- 円には範囲がある
- コードを工夫することによっ様々な動きがつく
縦の線について
- 縦の線がy軸でsin関数を使う時に関係してきます
- 線の上に1と線の下に-1の数値がある
横の線について
- 横の線がx軸でcos関数を使う時に関係してきます
- 線の右に1、左に-1の数値があります


2 円の範囲の円周率の数値と動きの向き【知っておく】


0の位置から時計回りに0.01ずつ数値が増えていく。
円の範囲の円周率について
- xの線で右側。円と重なっている所が0
- 0の位置から時計回りに1.57→3.14→4.71→0の位置に戻ってきて、2周目も基本は同じ動きをする
- それぞれの数値の間にも数値はある。0→0.01→0.02と増えていって1.57や3.14になっている。この数値の増やし方によって表現が変わってくる

時計回りに動いて、2周目や3周目も何周でも可能ってことね。

次は円を周回させるコードを書いて解説。コピペしてみてね。
3 sin関数とcos関数を組み合わせて円を周回させる【コードの意味と書き方】

円が一定の範囲の円を周回するものを作成
円の範囲の0, 1.57, 3.14→などの決まっていた数値がありますね。
0.01を足して繰り返すコードを書くとぐるぐる回ります。
0.03や1.15とかも足せて数値が大きくなると移動の幅が大きくなるのでスピードが上がります。表現も変わります。
解説付きのコードと解説のないコードを載せているので、数値を触ってみるのが1番理解が早いです。

解説付きのコード
// sin, cos関数で形を丸く周回させる【詳しい解説ver】 //
/* 【position 下記の変数名1】
この設定の円の場合
size(x, y)のx軸の半分の値にするとキャンバスの真ん中が中心になる
size(1000, 1000)など、xとyを統一するのがおすすめ */
float position = 500;
/* 【angle 下記の変数名2】
円の動きが始まる場所 */
float angle = 0;
/* 【range 下記の変数名3】
円の範囲。数を増やすと増える */
float range = 300;
/* 【speed 下記の変数名4】
時計周りに動いていく数値の増加
数値を大きくすると移動範囲が大きくなって速度が上がるように感じる */
float speed = 0.03;
//キャンバスの大きさの設定
void setup() {
size(1000, 1000);
}
/*【sin, cos関数で形を丸く周回させたい時の構文】
y軸のsin関数は変数名1 + sin(変数名2)* 変数名3
x軸のcos関数は変数名1 + cos(変数名2)* 変数名3 */
void draw(){
float x = position + cos(angle) * range;
float y = position + sin(angle) * range;
ellipse(x, y, 100, 100);
angle += speed; //【変数名4】のspeedで決めた数値の幅で時計回りに円が回っていく
}
解説なしのコード
// sin, cos関数で形を周回させる【解説なしver】 //
float position = 500;
float angle = 0;
float range = 300;
float speed = 0.03;
void setup() {
size(1000, 1000);
}
void draw(){
float x = position + cos(angle) * range;
float y = position + sin(angle) * range;
ellipse(x, y, 100, 100);
angle += speed;
}


表現力が上がるからね。
4 sin関数は縦の範囲

sin関数だけを機能させると縦軸の上に表示される 向かい側にある数値を入力したら同じ位置で表示
真ん中を中心にして線を引いた場合、0と3.14と書くと真ん中に表示されます。
下の図でもう1回確認してもらうのと、実際にsin()の中の数値を変えて感覚をつかんで下さい。
3.15や3.16など細かく刻んだ数値でも表示されます。
sin関数の表示位置を理解するためのコード
//sin()の()の中の数字の変化に注目
//キャンバスのサイズを設定
size(1000, 1000);
//真ん中が中心の横と縦に直径700の円
ellipse(
width / 2, height / 2,
700, 700
);
//真ん中の円
ellipse(
width / 2,
height / 2 + sin(0) * 350,
100, 100
);
// 真ん中から1つ上の円
ellipse(
width / 2,
height / 2 + sin(5.65) * 350,
100, 100
);
// 1番上の円
ellipse(
width / 2,
height / 2 + sin(4.71) * 350,
100, 100
);
//真ん中から1つ下の円
ellipse(width / 2,
height / 2 + sin(0.47) * 350,
100, 100
);
//1番下の円 図の1.57の位置にある
ellipse(
width / 2,
height / 2 + sin(1.57) * 350,
100, 100
);
//y軸の線(sinの基準線)
line(width / 2, 0, width / 2, 1000);

sin関数で特定の数値を増やしながら連続させると一定の縦の範囲で動く
さっきの項目の3のコードをほんの少し変えるだけで動きます。
変数にfloat range1 = 0とfloat range2 = 300を追加。
void drawのsin関数とcos関数の最後の部分をrange1とrange2に変えてます。
sin関数のみを機能させるコード
// sinのy軸だけを動かすコード【range1の部分を0にする】//
float position = 500;
float angle = 0;
float range1 = 0; //range1を0にする
float range2 = 300;
float speed = 0.03;
//キャンバスの大きさの設定
void setup() {
size(1000, 1000);
}
// cosのy軸だけを動かしたいのでcosのrange1の部分をを0にする
void draw(){
float x = position + cos(angle) * range1; //rangeの部分が0なら機能しない
float y = position + sin(angle) * range2;
ellipse(x, y, 100, 100);
angle += speed;
}

5 cos関数は横の範囲

cos関数だけを機能させると縦軸の上に表示される 向かい側にある数値を入力したら同じ位置で表示
1.57の反対側には4.71があるから同じ位置で表示される。
下の図でもう1回確認してもらうのと、実際にcos()の中の数値を変えて感覚をつかんで下さい。
cos関数は横のx軸の線の上で表示されます。
cos関数の表示位置を理解するためのコード
//cos()の()の中の数字の変化に注目
// キャンバスの大きさ
size(1000, 1000);
//真ん中が中心の横と縦に直径700の円
ellipse(
width / 2, height / 2,
700, 700
);
//1番右の円
ellipse(
width / 2 + cos(0) * 350,
height / 2,
100, 100
);
//右から2番目の円
ellipse(
width / 2 + cos(0.94) * 350,
height / 2,
100, 100
);
//真ん中の円
ellipse(
width / 2 + cos(1.57) * 350,
height / 2,
100, 100
);
//左から2番目の円
ellipse(
width / 2 + cos(4.08) * 350,
height / 2,
100, 100
);
// 1番左の円
ellipse(
width / 2 + cos(3.14) * 350,
height / 2,
100, 100
);
//x軸の線(cosの基準線)
line( 0, height / 2, 1000, height /2);
上記のx軸のcos関数を動かしましょう。
cos関数で特定の数値を増やしながら連続させると一定の横の範囲で動く
こちらも同じくさっきの項目の3のコードをほんの少し変えるだけで動きます。
変数にfloat range1 = 0とfloat range2 = 300を追加。
void drawのsin関数とcos関数の最後の部分をrange1とrange2に変えてます。
コピペして試してくださいね。
cos関数のみ機能させるコード
// cosのx軸だけを動かすコード【range2の部分を0にする】//
float position = 500;
float angle = 0;
float range1 = 300;
float range2 = 000; //range2を0にする
float speed = 0.03;
//キャンバスの大きさの設定
void setup() {
size(1000, 1000);
}
// cosのx軸だけを動かしたいのでsinのrange2をの部分を0にする
void draw(){
float x = position + cos(angle) * range1;
float y = position + sin(angle) * range2; //rangeの部分が0なら機能しない
ellipse(x, y, 100, 100);
angle += speed;
}

ここまでで僕がやった基本的な部分は終了。
あとは自分で色々と作っていかないとね。

応用のアイデアと僕が実際に作ったものをご紹介します。
オブジェクト指向とか配列とかはまだ使いこなせてないレベルです。中・上級者の方はいらつかせるかもしれませんがご理解して頂けると助かります。
Processingで三角関数の3つの応用例
Processing三角関数の3つの応用例
- 回す形を変える
- 開始位置を変えてみる
- スピードを変える

たくさん作ったら追加していくね。
1 回す形を変えてみる
// sin, cos関数で形を周回させる //
float position = 455; //★中心の位置を調整するために変更。微調整して下さい。
float angle = 0;
float range = 300;
float speed = 0.03;
void setup() {
size(1000, 1000);
}
void draw(){
float x = position + cos(angle) * range;
float y = position + sin(angle) * range;
rect(x, y, 100, 100); //★ここを変更しています
angle += speed;
}
2 開始位置を変えてみる
// sin, cos関数で形を周回させる //
float position = 455; //★中心の位置を調整するために変更
float angle1 = 0; // angle1を追加
float angle2 = 3.14; // angle2を追加
float range = 300;
float speed = 0.03;
void setup() {
size(1000, 1000);
}
void draw(){
// 0の位置から四角形が時計回りに動き始める
float x1 = position + cos(angle1) * range; // x1に変更
float y2 = position + sin(angle1) * range; // x2に変更
rect(x1, y2, 100, 100); //x1とx2に変更しています
angle1 += speed; //
// 3.14の位置から四角形が時計回りに動き始める
float x3 = position + cos(angle2) * range; // x3を追加
float y4 = position + sin(angle2) * range; // x4を追加
rect(x3, y4, 100, 100); // x3とx4に変更しています
angle2 += speed; //
}
3 スピードを変える
// sin, cos関数で形を周回させる //
float position = 455; //★中心の位置を調整するために変更
float angle1 = 0;
float angle2 = 3.14;
float range = 300;
float speed1 = 0.03; //speed1を追加
float speed2 = 1.00; //speed2を追加 数値を1.00に
void setup() {
size(1000, 1000);
}
void draw(){
// 0の位置から四角形が時計回りに動き始める
float x1 = position + cos(angle1) * range;
float y2 = position + sin(angle1) * range;
rect(x1, y2, 100, 100);
angle1 += speed1; // speed1に
// 3.14の位置から四角形が時計回りに動き始める
float x3 = position + cos(angle2) * range; // x3を追加
float y4 = position + sin(angle2) * range; // x4を追加
rect(x3, y4, 100, 100); // x3とx4に変更しています
angle2 += speed2; // speed2に。とても動きが早くなる
}
Processingの三角関数で作品を作れるようになった結果
Processingの三角関数で作品を作れるようになった結果
- 難しいを乗り越えれて嬉しい
- Processingの表現の幅が広がる
- 他の表現と組み合わせると絶対に楽しい
- Processingがさらに好きになった
- もっと勉強する意欲が湧く
- AIの分野の数学も頑張ろうと思えた
- 自信になる

どうしても三角関数を使った表現したい気持ちの方が強かった。
なんか1つ限界超えた感じがある。

あたしも頑張るぞ!!
まとめ | 実際に色々と作って三角関数を使いこなす


色とかもつけたいし。
他の表現方法と組み合わせると無限に色々なアートが作れるようになりますね。
それでは今日もハッピーコーディング。