【3歳児からの依頼】Processingのプログラミング言語Pythonを使ってオリジナルキャラクター作成してみた②

Processing python

こんにちは、ダダです

前回、おさるのピースケというキャラクターを自分が作ってみたいということで作成しました

\\\前回の記事///

【初心者が】Processingのプログラミング言語Pythonを使ってキャラクター作成してみた

そして、今回もキャラクターを作成していきます

今回はサメクジラです

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

サメクジラって何?

ダダ
ダダ

ピースケさん知らないんですか?

ダダ
ダダ

少し説明が難しいですが・・・

簡単に言うとうちの広報担当(3歳児)のアイディアです

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

たぶん誰もしらないよ!!!

というミニコントはさておき、今回はうちの広報担当(3歳児)より依頼を受けました

おさるのピースケを見せた時に

次はサメとクジラを合体させたサメクジラのパンコを作ってほしいとのことです

まさかのネーミングセンス、私では思いつきもしない名前です

ですが、私のへの仕事以来ということでクライアントさんの為に作成していきます

\\\完成形がこちらです///

今回はこの子の作成過程を記事にしています

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

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

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

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

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

作成開始

では、さっそくサメクジラのパンコを作成していきます

まずはイメージから作っていきます

私のイメージはこんな感じ

実際にイメージを形にしていきましょう

ということで、手書きにしたものがこちら

クジラのフォルムをメインとしつつ、サメ特徴的なひれとエラ、あと肉食性をアピールするためのキバをつけることで合体ができたのではないかと思っています

自分ではすごくいい出来で満足しています

3歳児(広報担当)に確認

OKをもらえました

では次はコードにしていきましょう

Processingでコード作成に入ります

今回は前回のおさるのピースケを作るときとは違い、ベジエ曲線を中心とした作成となります

\\\ベジエ曲線についての参考記事///

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

ベジエ曲線を使用して作成していくのですが少し問題が・・・

Processingで作品を作るときに、座標の設定が必要なんですが、実際に使用するには座標設定が細かくなます

作業工程としては、コードを入力→実行→確認→修正という作業が多くなります

それでは、座標を調整する作業量が増えて時間がかかります

ウチの広報担当(3歳児)はそんなに長く待ってはくれません

なので下準備として、座標の数値を見える化して作業工程の数を少しでも減らす方法を考えました

下準備(座標の見える化)

マウスの位置を座標で確認できるコードを作成しました

画面上のポイントの座標を見て確認することができるようになります

コード作成

def setup():
    size(2100, 1600)
    textSize(50)

def draw():
    background(0)
    text("X",50, 100)
    text(mouseX,100, 100)
    
    text("Y", 50, 200)
    text(mouseY, 100, 200)

入力・実行

ダダ
ダダ

こんな感じで座標が見えるようになります

実際に動画で座標の変化と矢印の場所を見てみましょう

ダダ
ダダ

こんな感じになりました

使ってみた感じ、個人的には文句なしです

準備ができたので実際に作成していきます

パンコ作成開始

まずは、ベジエ曲線を使って基本となる頭を作っていきます

そのあとに、全体的な形を作っていきます

コード作成

size(2100,1600)
background(0)
bezier(400, 1000, 650, 0, 1500, 1100, 1600, 900)

入力・実行

ダダ
ダダ

こんな感じになりました

吹き出しにも入れていきます

サイズ感はいい感じではないでしょうか

ダダ
ダダ

とりあえずはいい感じですね

最初は、なんとなくのイメージを作るところから進めていきたいので

どんどん作っていきましょう

ダダ
ダダ

こんな感じになりました

吹き出しに入れてみましょう

パンコ
パンコ

全体的にもいい感じですね

ダダ
ダダ

いい感じにできましたね

では、このバラバラな物を一つにまとめていきます

ここまでのコード

size(2100,1600)
background(0)

bezier(400, 1000, 650, 0, 1500, 1100, 1600, 900)
bezier(1600,900, 1580, 780, 1580, 780, 1700, 700)
bezier(1700, 700, 1750, 830, 1750, 830, 1650, 900)
bezier(1650, 900, 1750, 900, 1750, 900, 1800, 1000)
bezier(1800, 1000, 1650, 1000, 1650, 1000, 1600, 950)
bezier(1600, 950, 1550, 1050, 700, 1300, 400, 1000)

一つの図形にまとめていきます

全体像を作成しました

ここから、一つにまとめていきます

コード作成

size(2100,1600)
background(0)

beginShape()
vertex(400, 1000)
bezierVertex(500, 0, 1500, 1100, 1600, 900) #頭
bezierVertex(1580, 780, 1580, 780, 1700, 700) #上尾
bezierVertex(1750, 830, 1750, 830, 1650, 900) #上尾
bezierVertex(1750, 900, 1750, 900, 1800, 1050) #下尾
bezierVertex(1650, 1030, 1650, 1030, 1600, 950) #下尾
bezierVertex(1550, 1050, 500, 1400, 400, 1000) #腹
endShape()

入力・実行

ダダ
ダダ

こんな感じになりました

パンコ
パンコ

バラバラだった体が一つになったー

でも、なんで一つになるの?

ダダ
ダダ

バラバラだったときのコードは、一行ずつ分かれていたんだけど

今回は一つのブロックとしてコードを書いているからまとまるんだよ

コードを見ながら簡単に説明してみましょう

どうなっているのか簡単なコードの説明を見てみましょう

コード説明

beginShape() ・・・まとめるブロックを宣言

vertex(X①, Y①)・・・開始座標の指定

bezierVertex(X②, Y②, X③, Y③, X④, Y④) ・・・開始座標は決まっているので続きから座標入力

bezierVertex(X②, Y②, X③, Y③, X④, Y④) ・・・開始座標は決まっているので続きから座標入力

endShape() ・・・ブロックの終わりの宣言

<br>サメクジラのパンコ

サメクジラのパンコ

ん~

何となくわかるような、わからいないような・・・

ダダ
ダダ

ですよね・・・

この内容については、別に記事で説明していきます

\\\ベジエ曲線についてはこちらの記事を///

現在作成中

ダダ
ダダ

ただ、この時はブロックの開始と終わりの箇所が一緒でなけらばいけないと思っていました

とその時・・・

<br>サメクジラのパンコ

サメクジラのパンコ

あのー

全体像ができたのはうれしいんですが・・・

口などのパーツが欲しいです

ということで少しパーツを作っていきます

ここが若干の悩みどころでした

また、新たに口を書く方がいいのか?、そのまま書く方法はないのか?

とりあえず、ブロックでまとめた全体図のスタート地点と口元に来るように変えてみました

口を作成

口の作り方については、全体図から口を作っていきます

コード作成

def setup():
    size(2100, 1600)
    textSize(50)

def draw():
    background(0)
    text("X",50, 100)
    text(mouseX,100, 100)
    
    text("Y", 50, 200)
    text(mouseY, 100, 200)
    
    beginShape()
    vertex(700, 900)
    bezierVertex(600, 960, 600, 960, 400, 1000) 
    bezierVertex(356, 1010, 320, 1000 ,335, 920)
    bezierVertex(353, 663, 567, 402, 900, 500)
    bezierVertex(1204, 576, 1500, 1100, 1600, 900) #頭
    bezierVertex(1580, 780, 1580, 780, 1700, 700) #上尾
    bezierVertex(1750, 830, 1750, 830, 1650, 900) #上尾
    bezierVertex(1750, 900, 1750, 900, 1800, 1050) #下尾
    bezierVertex(1650, 1030, 1650, 1030, 1600, 950) #下尾
    bezierVertex(1550, 1050, 500, 1400, 400, 1000) #腹
    endShape()

※赤マーカーがされている部分が変更点です

入力・実行

ダダ
ダダ

開始地点を変えると、口っぽくなりました

スタートとゴールは一緒じゃなくても最後必ずスタート地点に戻るようです

口ができたのはいいけど

もっとスマートになりたいです

ダダ
ダダ

んー

そうですね

少しまん丸になりすぎているので少し修正を加えていきます

ここでフォルムの修正が入りました

体系の変更

フォルムの修正をするためには再度細かい座標設定が必要になってきます

そこで、座標の位置をマウスの位置に合わせて変化させる方法を考えました

ベジエ曲線の座標をいったん

例:bezier(100, 200, mouseX, mouseY, mouseX, mouseY, 1000, 200)

という形を作っていきます

すると、こんな感じになります

動画のように、マウスの動きに合わせて形を変化させてくれるので見てイメージがつけやすくなりました

さらに座標を左上に出しているので、気に入った形の場所で止めて座標をメモして入力することができました

これで入力→実行→修正→入力→実行という作業量を半分以下に減らすことができました

mouseX, mouseY変数様様でしたね

ということで頭の部分の編集を終わりました

頭の形を変更

ダダ
ダダ

個人的にはいい形になってきました

少し尻尾の根元が細いので少し編集していきます

しっぽの形を変更

ダダ
ダダ

全体的なバランスが取れてきました

サメクジラのパンコ
サメクジラのパンコ

いい感じの体つきになってきました

ありがとうございます

ダダ
ダダ

次は他のパーツも作っていきますね

ヒレを作っていきます

修正

作成コード

beginShape() #上ヒレ
    vertex(790, 500)
    bezierVertex(875, 398, 875, 398,1028, 378)
    bezierVertex(964, 482, 964, 482, 974, 547)
    endShape()
ダダ
ダダ

上ヒレも体と同様にベジエ曲線をブロックにして書きました

サメクジラのパンコ
サメクジラのパンコ

ポイントはどこですか

ダダ
ダダ

パンコ~

いいところを聞いてくれるね

ダダ
ダダ

ポイントは体とヒレがつながるところの線を引かないとこだよ

ヒレのような部分を一つの図形として作成していくときに、体とヒレの部分に線を入れると分離するので違和感になります

おなかの線を作っていきます

作成コード

    beginShape() #上腹
    vertex(681, 918)
    bezierVertex(822, 1010, 1320, 1012, 1595, 955)
    bezierVertex(1390, 1055, 828, 1055, 613, 955)
    endShape() 
    
    beginShape() #中腹
    vertex(613, 955)
    bezierVertex(825, 1055, 1390, 1055, 1595, 955)
    bezierVertex(1379, 1085, 728, 1121, 501, 987)
    endShape() 
    
    beginShape() #下腹
    vertex(501, 987)
    bezierVertex(728,1121, 1379, 1085, 1595, 955)
    bezierVertex(1550, 1050, 496, 1276, 360, 1016)
    endShape()
ダダ
ダダ

お腹の表現もベジエ曲線で書いていきました

サメクジラのパンコ
サメクジラのパンコ

ポイントはどこですか

ダダ
ダダ

パンコさん素敵なサポート

ありがとー

ダダ
ダダ

上ヒレと同様にブロックで作って作成してきました

サメクジラのパンコ
サメクジラのパンコ

線で書いてはいけなかったの?

ダダ
ダダ

一度試してみたけどうまく表現できなかったから

上ヒレと同じようにブロックで作ってみたよ

色を付けていきます

作成コード

fill(0, 0, 255)
ダダ
ダダ

fill関数を使って着色していきました

fill(0, 0, 255)の青色を使ってます

以外にしっくり来てよかったです

サメクジラのパンコ
サメクジラのパンコ

いろがついてサメクジラ感が出てきましたね

下ヒレを作ります

作成コード

beginShape() #下ヒレ
vertex(824, 922)
bezierVertex(875, 1106, 875, 1106,1065, 1233)
bezierVertex(1028, 1089, 1028, 1089, 1048, 970)
endShape()
ダダ
ダダ

下ビレも上ヒレと同じ作り方をしています

エラをつけていきます

作成コード

bezier(782, 791, 802, 824, 802, 824, 755, 902)
bezier(832, 791, 852, 824, 852, 824, 805, 902)
bezier(882, 791, 902, 824, 902, 824, 855, 902)
ダダ
ダダ

エラの部分はブロックにせずに単純なベジエ曲線で引いています

目をつけていきます

参考コード

ellipse(565, 827, 50, 50) 
ダダ
ダダ

かわいらしい目が付きました

目については丸を描く方法でつけています

キバをつけていきます

作成コード

triangle(666, 924, 682, 993, 625, 948)
triangle(620, 950, 632, 1015, 571, 966)
ダダ
ダダ

キバは三角形を2つ書いてキバ感を出してみました

ダダ
ダダ

最後に背景を色くして、お世話になった座標を消すと完成です

サメクジラのパンコ
完成

ダダ
ダダ

ようやく完成しました

ただ、若干イルカっぽくなっているのが少し気になります

この後も、少し続きの話がありますが、今回はパンコの作り方ということでこの辺で終わりにします

サメクジラのパンコ
サメクジラのパンコ

ダダさんありがとう

これからもよろしくね

まとめ

初めはうちの3歳児(広報担当)様よりの依頼で作成をしていきました

実際に依頼をされて、作成していく中でやり取りがあったりで楽しかったです

パンコ作成については、この後も続きがあるので見てくださいね

おまけ

パンコのヒレを少し動かしてみます

コメント

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