【初心者向け】Processingでプログラミング言語Pythonを使って曲線を描いてみよう

Processing python

こんにちはダダです

Processingを使って図形を描いて作品を作れるようになり

ランダム関数を使うことでパソコンならではの作品を作ることができました

↓↓↓前回の記事はこちら↓↓↓

【初心者向け】Processing Pythonのrandom関数を使った作品作り方

では、次は何をしようかと悩んだ結果

曲線が書きたい!!!

こんな感じの曲線を描いてみたいとは思いませんか?

今回は曲線の描き方について説明していきます

この記事はProcessingというソフトを使用しています

設定はJavaではなくPythonに変更してください

Java設定だとエラーが出る場合があるので注意してください

↓↓↓Processingって何?という方はこちらの記事を↓↓↓

↓↓↓Processingのインストールや設定の変更についてはこちらの記事を↓↓↓

曲線ってどうやって書くの

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、終点Y)

ベジエ曲線の座標を点で見てみよう

少しイメージが付きずらいので、座標の位置を見えるようにしてみました

何となく、座標との位置関係がイメージできると思うので曲線も追加してみます

曲線を描くときにはこんな感じでできています

おさるのピースケ
おさるのピースケ

方向点には線が当たってないけどなんでなの?

ダダ
ダダ

ベジエ曲線の特徴なのかもしれないけど、方向点は向きや長さを決めるものだからだよ

イメージは下の図を見てみて

ダダ
ダダ

ただこのままだと曲線にはならないから、お互いが方向点に向いて進みながら折り合いをつけて引っ付くみたい

方向点については、詳しい原理や計算式があるようですがよくわかりませんでしたのでご了承ください(泣)

では、次行きましょう

これまでは大きく一つ曲がったような線でした

なので次は曲線っぽい物を作っていきましょう

ぐにゃっとした曲線

ぐにゃっとした曲線といわれても・・・

と感じる方もいると思いますが、以下の図のような曲線です

こっちの方が曲線っぽいですよね

では実際にコードを作成していきます

コード入力

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)

実行

いかがでしょうか?

一つの座標を固定するのでさっきとは動き方が違ってきます

以上のような形で曲線を描いていけるようになります

まとめ

曲線の描き方についてまとめてみましたが、いかがでしょう?

実際に使ってみると、なかなか座標の位置がとりずらく思い通りの線を描くためにはなれが必要な内容でした

しかし、使い慣れてくると様々な表現にも使えるので覚えておいて損はないと思います

この曲線を使った作品を以下にリンクで貼っておくので気になる方は見てみてください

キャラクター作成 → おさるのピースケ

キャラクター作成 → サメクジラのパンコ

コメント

タイトルとURLをコピーしました