こんにちはダダです
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) |
実行
いかがでしょうか？
一つの座標を固定するのでさっきとは動き方が違ってきます
以上のような形で曲線を描いていけるようになります
まとめ
曲線の描き方についてまとめてみましたが、いかがでしょう？
実際に使ってみると、なかなか座標の位置がとりずらく思い通りの線を描くためにはなれが必要な内容でした
しかし、使い慣れてくると様々な表現にも使えるので覚えておいて損はないと思います
この曲線を使った作品を以下にリンクで貼っておくので気になる方は見てみてください
Pythonを学びたい方はこちらの記事を参考にしてみてください
プログラミング学習を進めているけれど、まだ副収入につなげられていない…そんなあなたへ！今こそ、学んだスキルを活かして副業に挑戦する絶好のチャンスです。プログラミングだけでなく、自分のスキルや商品をネットで販売する『ネットショップ』を開設してみませんか？
ネットショップを持つことで、自分の知識やスキルをより多くの人に届け、副収入を得ることが可能です。学んできたプログラミングを活かして、ショップのカスタマイズや運営も自由自在に行えますし、もし商品作成が難しい場合でも、デジタル商品やサービス提供など、いろんな選択肢があります。
このステップで一歩踏み出せば、今学んでいることが副収入に直結し、自分の時間をより有効に使うことができるはずです！一緒にネットショップを開設し、副業の第一歩を踏み出しましょう！
プログラミングを学びたいけど、どこから始めたらいいのか分からない、自分に合っているか不安…そんな悩みを持っている方におすすめしたいのが、 無料相談 サービスです！
この無料相談では、あなたの現状や目標に合わせて、最適な学習プランを一緒に考えてくれます。どんなスキルが必要なのか、どうやって学習を進めると効果的かを具体的にアドバイスしてもらえるので、無駄なく効率的にスタートを切ることができます。
さらに、プログラミング学習には同じ目標を持つ 仲間 がいること、そして頼りになる メンター の存在がとても大きな支えになります。独学ではどうしてもつまずきやすい部分も、メンターがあなたの成長に合わせて親身にサポートしてくれるので、安心して学びを進められます。
まずは 無料相談 で、あなたに合ったプランを見つけて、スキルアップへの第一歩を踏み出してみませんか？今なら、迷っている方でも気軽に相談できるチャンスです！
