こんにちはダダです
Processingを使って図形や線を描いて作品を作れるようになり
ランダム関数を使うことでパソコンならではの作品を作ることができました
↓↓↓前回の記事はこちら↓↓↓
【初心者向け】Processing Pythonのrandom関数を使った作品作り方
では、次は何をしようかと悩んだ結果
曲線が書きたい！！！
こんな感じの曲線を描いてみたいとは思いませんか？
今回は曲線の描き方について説明していきます
曲線ってどうやって書くの
Processingでは様々な曲線を描く方法があるようですが、今回はベジエ曲線という物を使っていきます
有名なアドビでも使用されている内容なので仕組みを覚えておくだけでも損はないかと思います
ベジエ曲線について
コンピューターで図形の曲線を描くために使われている数式。曲線を始点、終点とそれぞれの方向点の4つの点の座標をもとに描画する。自由度が高く、ほとんどすべての曲線を表現できる。アドビ システムズ社のIllustratorやコーレル社のCorelDRAWなどのドロー系ソフトで曲線の表現方法として採用されているほか、PostScriptのフォントの記述方法にも採用されている。
引用：コトバンク
上記の内容をProcessingのコードで表現していきます
コード入力
size(2100, 1300)
textSize(50)
bezier(200, 650, 882, 148, 1160, 148, 1900 , 650)コード実行
こんな感じになりました
『こんな感じになりました』と言われましても
よくわからんよ
ということで、コードの説明をしていきます
コードの説明
ベジエ曲線のコードは以下の内容になります
bezier(200, 650, 882, 148, 1160, 148, 1900 , 650)bezier（始点X、始点Y、方向点X①、方向点Y①、方向点X②、方向点Y②、終点X、終点Ｙ）
ベジエ曲線の座標を点で見てみよう
少しイメージが付きずらいので、座標の位置を見えるようにしてみました
何となく、座標との位置関係がイメージできると思うので曲線も追加してみます
曲線を描くときにはこんな感じでできています
方向点には線が当たってないけどなんでなの？
ベジエ曲線の特徴なのかもしれないけど、方向点は向きや長さを決めるものだからだよ
イメージは下の図を見てみて
ただこのままだと曲線にはならないから、お互いが方向点に向いて進みながら折り合いをつけて引っ付くみたい
では、次行きましょう
これまでは大きく一つ曲がったような線でした
なので次は曲線っぽい物を作っていきましょう
ぐにゃっとした曲線
ぐにゃっとした曲線といわれても・・・
と感じる方もいると思いますが、以下の図のような曲線です
こっちの方が曲線っぽいですよね
では実際にコードを作成していきます
コード入力
size(2100, 1300)
textSize(50)
bezier(200, 650, 882, 148, 1252, 1124, 1900 , 650)実行
出来ました！！！！
だから、『出来ました！！！』って言われても
よくわからないんだって
では、コードの説明をしていきます
コードの説明
上記のコードと比較した時、方向点③の場所を変えてみました
座標点は以下の図のようになります
上から下へ方向点3の位置が変わったので、線が向かう方向が以下のように変わります
この線を結ぶとぐにゃっとした曲線になります
では、何となくイメージが付いたと思うので少しベジエ曲線で遊んでみましょう
ベジエ曲線で遊ぶ
ベジエ曲線にProcessingで使うアニメーションの技術を使って遊んでみます
準備するコード
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, mouseX, mouseY, mouseX, mouseY, 1900 , 650)moseX,mouseYという変数を入れることでマウスの動きに合わせて曲線の内容が変わるようになります
いかがでしょうか？
出来ましたか？
では、少し変化を加えてみましょう
bezier(200, 650, mouseX, mouseY, mouseX, mouseY, 1900 , 650)
上記のコードはこのようになっていますが
bezier(200, 650, mouseX, mouseY, mouseX, mouseY, 1900 , 650)
赤線部分を数値に変更してみましょう
入力する数値は上記あるマウスの座標を参考に入力してみてください
面倒な方はこちらのコードを使用してみてください
bezier(200, 650, 800, 150, mouseX, mouseY, 1900 , 650)実行
いかがでしょうか？
一つの座標を固定するのでさっきとは動き方が違ってきます
以上のような形で曲線を描いていけるようになります
この度Udemyで講座を作りました
【プログラミングｘアート】直感的・視覚的に学ぶ Processing×Python 入門講座
ブログに書いてある内容を一つの講座にしています
まとめ
曲線の描き方についてまとめてみましたが、いかがでしょう？
実際に使ってみると、なかなか座標の位置がとりずらく思い通りの線を描くためにはなれが必要な内容でした
しかし、使い慣れてくると様々な表現にも使えるので覚えておいて損はないと思います
この曲線を使った作品を以下にリンクで貼っておくので気になる方は見てみてください
キャラクター作成 → おさるのピースケ
キャラクター作成 → サメクジラのパンコ
コメント