こんにちはダダです
Processingを使って図形や線を描いて作品を作れるようになり
ランダム関数を使うことでパソコンならではの作品を作ることができました
では、次は何をしようかと悩んだ結果
曲線が書きたい！！！
こんな感じの曲線を描いてみたいとは思いませんか？
今回は曲線の描き方について説明していきます
注意点
この記事はProcessingのPython設定で作成しております
Java設定だとエラーが出るので注意してください
設定方法がわからない方は、以下の記事を参考にしてみてください
曲線ってどうやって書くの
Processingでは様々な曲線を描く方法があるようですが、今回はベジエ曲線という物を使っていきます
有名なアドビでも使用されている内容なので仕組みを覚えておくだけでも損はないかと思います
ベジエ曲線について
コンピューターで図形の曲線を描くために使われている数式。曲線を始点、終点とそれぞれの方向点の4つの点の座標をもとに描画する。自由度が高く、ほとんどすべての曲線を表現できる。アドビ システムズ社のIllustratorやコーレル社のCorelDRAWなどのドロー系ソフトで曲線の表現方法として採用されているほか、PostScriptのフォントの記述方法にも採用されている。
引用：コトバンク
上記の内容をProcessingのコードで表現していきます
コード入力
|
1 2 3 4 |
size(2100, 1300) textSize(50) bezier(200, 650, 882, 148, 1160, 148, 1900 , 650) |
コード実行
こんな感じになりました
『こんな感じになりました』と言われましても
よくわからんよ
ということで、コードの説明をしていきます
コードの説明
ベジエ曲線のコードは以下の内容になります
|
1 |
bezier(200, 650, 882, 148, 1160, 148, 1900 , 650) |
bezier（始点X、始点Y、方向点X①、方向点Y①、方向点X②、方向点Y②、終点X、終点Ｙ）
ベジエ曲線の座標を点で見てみよう
少しイメージが付きずらいので、座標の位置を見えるようにしてみました
何となく、座標との位置関係がイメージできると思うので曲線も追加してみます
曲線を描くときにはこんな感じでできています
方向点には線が当たってないけどなんでなの？
ベジエ曲線の特徴なのかもしれないけど、方向点は向きや長さを決めるものだからだよ
イメージは下の図を見てみましょう。
ただこのままだと曲線にはならないから、お互いが方向点に向いて進みながら折り合いをつけて引っ付くみたい
方向点については、詳しい原理や計算式があるようですがよくわかりませんでしたのでご了承ください（泣）
では、次行きましょう
これまでは大きく一つ曲がったような線でした
なので次は曲線っぽい物を作っていきましょう
ぐにゃっとした曲線
ぐにゃっとした曲線といわれても・・・
と感じる方もいると思いますが、以下の図のような曲線です
こっちの方が曲線っぽいですよね
では実際にコードを作成していきます
コード入力
|
1 2 3 4 |
size(2100, 1300) textSize(50) bezier(200, 650, 882, 148, 1252, 1124, 1900 , 650) |
実行
出来ました！！
だから、『出来ました！！！』って言われても
よくわからないんだって
では、コードの説明をしていきます
コードの説明
上記のコードと比較した時、方向点③の場所を変えてみました
座標点は以下の図のようになります
上から下へ方向点3の位置が変わったので、線が向かう方向が以下のように変わります
この線を結ぶとぐにゃっとした曲線になります
では、何となくイメージが付いたと思うので少しベジエ曲線で遊んでみましょう
ベジエ曲線で遊ぶ
ベジエ曲線にProcessingで使うアニメーションの技術を使って遊んでみます
準備するコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
def setup(): size(2100, 1300) textSize(50) def draw(): background(255) fill(0) text("X",50, 100) text(mouseX,100, 100) text("Y", 50, 200) text(mouseY, 100, 200) strokeWeight(10) fill(255) bezier(200, 650,<span class="bold-red"> mouseX, mouseY, mouseX, mouseY,</span> 1900 , 650) |
moseX,mouseYという変数を入れることでマウスの動きに合わせて曲線の内容が変わるようになります
いかがでしょうか？
出来ましたか？
では、少し変化を加えてみましょう
bezier(200, 650, mouseX, mouseY, mouseX, mouseY, 1900 , 650)
上記のコードはこのようになっていますが
bezier(200, 650, mouseX, mouseY, mouseX, mouseY, 1900 , 650)
赤線部分を数値に変更してみましょう
入力する数値は上記あるマウスの座標を参考に入力してみてください
面倒な方はこちらのコードを使用してみてください
|
1 |
bezier(200, 650, 800, 150,<span class="bold-red"> mouseX, mouseY,</span> 1900 , 650) |
実行
いかがでしょうか？
一つの座標を固定するのでさっきとは動き方が違ってきます
以上のような形で曲線を描いていけるようになります
まとめ
曲線の描き方についてまとめてみましたが、いかがでしょう？
実際に使ってみると、なかなか座標の位置がとりずらく思い通りの線を描くためにはなれが必要な内容でした
しかし、使い慣れてくると様々な表現にも使えるので覚えておいて損はないと思います
この曲線を使った作品を以下にリンクで貼っておくので気になる方は見てみてください
もしわからないことがあれば、このブログやXに質問等を投げていただければと思います。また、コミュニティもやっっているのでそちらから質問を投げていただいても大丈夫ですよ！！
Xのアカウントはこちら
Discordコミュニティ
プログラミングを視覚的に理解したい方やプログラミングで絵を書いてみたい方はUdemyで講座も作っているのでこちらも参考にしてみてください
Udemy講座
ChatGPTでPythonの学習を始めてみたい方は以下の記事を参考にしてみてください
ChatGPTはプログラミングの学習はできても、人のつながりまでは作ってくれません。
プログラミングの学習だけではなく、人との繋がりを作ってくれるスクールもオススメです。
気になる方は無料相談からでも体験してみてください！！
