こんにちは、ダダです
前回、おさるのピースケというキャラクターを自分が作ってみたいということで作成しました
＼＼＼前回の記事／／／
【初心者が】Processingのプログラミング言語Pythonを使ってキャラクター作成してみた
そして、今回もキャラクターを作成していきます
今回はサメクジラです
サメクジラって何？
ピースケさん知らないんですか？
少し説明が難しいですが・・・
簡単に言うとうちの広報担当（3歳児）のアイディアです
たぶん誰もしらないよ！！！
というミニコントはさておき、今回はうちの広報担当（3歳児）より依頼を受けました
おさるのピースケを見せた時に
次はサメとクジラを合体させたサメクジラのパンコを作ってほしいとのことです
まさかのネーミングセンス、私では思いつきもしない名前です
ですが、私のへの仕事以来ということでクライアントさんの為に作成していきます
＼＼＼完成形がこちらです／／／
今回はこの子の作成過程を記事にしています
作成開始
では、さっそくサメクジラのパンコを作成していきます
まずはイメージから作っていきます
私のイメージはこんな感じ
実際にイメージを形にしていきましょう
ということで、手書きにしたものがこちら
クジラのフォルムをメインとしつつ、サメ特徴的なひれとエラ、あと肉食性をアピールするためのキバをつけることで合体ができたのではないかと思っています
自分ではすごくいい出来で満足しています
3歳児（広報担当）に確認
OKをもらえました
では次はコードにしていきましょう
Processingでコード作成に入ります
今回は前回のおさるのピースケを作るときとは違い、ベジエ曲線を中心とした作成となります
＼＼＼ベジエ曲線についての参考記事／／／
【初心者向け】Processingでプログラミング言語Pythonを使って曲線を描いてみよう
ベジエ曲線を使用して作成していくのですが少し問題が・・・
Processingで作品を作るときに、座標の設定が必要なんですが、実際に使用するには座標設定が細かくなます
作業工程としては、コードを入力→実行→確認→修正という作業が多くなります
それでは、座標を調整する作業量が増えて時間がかかります
ウチの広報担当（３歳児）はそんなに長く待ってはくれません
なので下準備として、座標の数値を見える化して作業工程の数を少しでも減らす方法を考えました
下準備（座標の見える化）
マウスの位置を座標で確認できるコードを作成しました
画面上のポイントの座標を見て確認することができるようになります
コード作成
|
1 2 3 4 5 6 7 8 9 10 11 |
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) |
入力・実行
こんな感じで座標が見えるようになります
実際に動画で座標の変化と矢印の場所を見てみましょう
こんな感じになりました
使ってみた感じ、個人的には文句なしです
準備ができたので実際に作成していきます
パンコ作成開始
まずは、ベジエ曲線を使って基本となる頭を作っていきます
そのあとに、全体的な形を作っていきます
コード作成
|
1 2 3 |
size(2100,1600) background(0) bezier(400, 1000, 650, 0, 1500, 1100, 1600, 900) |
入力・実行
こんな感じになりました
吹き出しにも入れていきます
サイズ感はいい感じではないでしょうか
とりあえずはいい感じですね
最初は、なんとなくのイメージを作るところから進めていきたいので
どんどん作っていきましょう
こんな感じになりました
吹き出しに入れてみましょう
全体的にもいい感じですね
いい感じにできましたね
では、このバラバラな物を一つにまとめていきます
ここまでのコード
|
1 2 3 4 5 6 7 8 9 |
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) |
一つの図形にまとめていきます
全体像を作成しました
ここから、一つにまとめていきます
コード作成
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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() ・・・ブロックの終わりの宣言
サメクジラのパンコ
ん～
何となくわかるような、わからいないような・・・
ですよね・・・
この内容については、別に記事で説明していきます
＼＼＼ベジエ曲線についてはこちらの記事を／／／
現在作成中
ただ、この時はブロックの開始と終わりの箇所が一緒でなけらばいけないと思っていました
とその時・・・
サメクジラのパンコ
あのー
全体像ができたのはうれしいんですが・・・
口などのパーツが欲しいです
ということで少しパーツを作っていきます
ここが若干の悩みどころでした
また、新たに口を書く方がいいのか？、そのまま書く方法はないのか？
とりあえず、ブロックでまとめた全体図のスタート地点と口元に来るように変えてみました
口を作成
口の作り方については、全体図から口を作っていきます
コード作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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) <span class="marker-under-red">bezierVertex(600, 960, 600, 960, 400, 1000) </span> <span class="marker-under-red">bezierVertex(356, 1010, 320, 1000 ,335, 920) </span> <span class="marker-under-red">bezierVertex(353, 663, 567, 402, 900, 500)</span> 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変数様様でしたね
ということで頭の部分の編集を終わりました
頭の形を変更
個人的にはいい形になってきました
少し尻尾の根元が細いので少し編集していきます
しっぽの形を変更
全体的なバランスが取れてきました
いい感じの体つきになってきました
ありがとうございます
次は他のパーツも作っていきますね
ヒレを作っていきます
修正
作成コード
|
1 2 3 4 5 |
beginShape() #上ヒレ vertex(790, 500) bezierVertex(875, 398, 875, 398,1028, 378) bezierVertex(964, 482, 964, 482, 974, 547) endShape() |
上ヒレも体と同様にベジエ曲線をブロックにして書きました
ポイントはどこですか
パンコ～
いいところを聞いてくれるね
ポイントは体とヒレがつながるところの線を引かないとこだよ
ヒレのような部分を一つの図形として作成していくときに、体とヒレの部分に線を入れると分離するので違和感になります
おなかの線を作っていきます
作成コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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() |
お腹の表現もベジエ曲線で書いていきました
ポイントはどこですか
パンコさん素敵なサポート
ありがとー
上ヒレと同様にブロックで作って作成してきました
線で書いてはいけなかったの？
一度試してみたけどうまく表現できなかったから
上ヒレと同じようにブロックで作ってみたよ
色を付けていきます
作成コード
|
1 |
fill(0, 0, 255) |
fill関数を使って着色していきました
fill(0, 0, 255)の青色を使ってます
以外にしっくり来てよかったです
いろがついてサメクジラ感が出てきましたね
下ヒレを作ります
作成コード
|
1 2 3 4 5 |
beginShape() #下ヒレ vertex(824, 922) bezierVertex(875, 1106, 875, 1106,1065, 1233) bezierVertex(1028, 1089, 1028, 1089, 1048, 970) endShape() |
下ビレも上ヒレと同じ作り方をしています
エラをつけていきます
作成コード
|
1 2 3 |
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) |
エラの部分はブロックにせずに単純なベジエ曲線で引いています
目をつけていきます
参考コード
|
1 |
ellipse(565, 827, 50, 50) |
かわいらしい目が付きました
目については丸を描く方法でつけています
＼＼＼参考過去記事／／／
キバをつけていきます
作成コード
|
1 2 |
triangle(666, 924, 682, 993, 625, 948) triangle(620, 950, 632, 1015, 571, 966) |
キバは三角形を2つ書いてキバ感を出してみました
最後に背景を色くして、お世話になった座標を消すと完成です
サメクジラのパンコ
完成
ようやく完成しました
ただ、若干イルカっぽくなっているのが少し気になります
この後も、少し続きの話がありますが、今回はパンコの作り方ということでこの辺で終わりにします
ダダさんありがとう
これからもよろしくね
まとめ
初めはうちの3歳児（広報担当）様よりの依頼で作成をしていきました
実際に依頼をされて、作成していく中でやり取りがあったりで楽しかったです
パンコ作成については、この後も続きがあるので見てくださいね
Pythonってどんな物？
プログラミングってどんな物？という方はこちらの記事を参考にしてみてください！！
また、プログラミングに興味はあるけどどうやって勉強していいのかわからないという方はプログラミングを視覚的に理解できる講座を作っていますのでこちらを参考にしてみてください！
Udemyというプラットホームを使用して作成した講座です。
初心者向けに作った講座となっております。以下から講座の確認ができるので見てみてください
プログラミング学習を進めているけれど、まだ副収入につなげられていない…そんなあなたへ！今こそ、学んだスキルを活かして副業に挑戦する絶好のチャンスです。プログラミングだけでなく、自分のスキルや商品をネットで販売する『ネットショップ』を開設してみませんか？
ネットショップを持つことで、自分の知識やスキルをより多くの人に届け、副収入を得ることが可能です。学んできたプログラミングを活かして、ショップのカスタマイズや運営も自由自在に行えますし、もし商品作成が難しい場合でも、デジタル商品やサービス提供など、いろんな選択肢があります。
このステップで一歩踏み出せば、今学んでいることが副収入に直結し、自分の時間をより有効に使うことができるはずです！一緒にネットショップを開設し、副業の第一歩を踏み出しましょう！
おまけ
パンコのヒレを少し動かしてみます