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

Processing python

こんにちはダダです

この記事を見ているあなた、自作のキャラクターを作ってみたいと思ったことはありませんか?

私はあります

そして、以前こんな記事を書いたことがあります

\\\過去記事///

自作のキャラクターを作りたい

ということで、以前から自作のキャラクターを作ってみたいということで、今回ついにその重い腰を上げて作成しました

この記事では、ブログの吹き出し用のキャラクターを作成する過程を書いています

過去記事でグランプリを獲得したおさるさんの作成をしていきます

↓↓↓完成はこちらです↓↓↓

名前はピースケです

うちの3歳児(広報部長)が命名

なぜか鳥の名前っぽいピースケですが、広報部長のいうこと信じて名前を採用してみました

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

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

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

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

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

キャラクターの作成

では、さっそくキャラクターの作成に入ります

基本的には図形を重ね合わせて作成していきます

今回作成する、キャラクターは吹き出しで今後使っていきたいので吹き出しを使いつつ作成していきます

まず、基準を作るために真ん中へ丸をかきます

コード作成

size(2100,1600)

ellipse(1050, 800, 100, 100)

入力・実行

ダダ
ダダ

こんな感じになります

では、実際に吹き出しに入れてみましょう

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

少し小さいですね、もっと大きくしてみましょう

ダダ
ダダ

ということで、少し大きくしてみましょう

コード編集

size(2100,1600)

ellipse(1050, 800, 1000, 1000)

入力・実行

ダダ
ダダ

こんな感じになりました

では、再度吹き出しに入れてみましょう

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

サイズ感はいい感じです

では、次は耳をつけていきましょう

ダダ
ダダ

ということで、耳を次は作成していきます

耳は、左右に〇を2つつけるように作成します

コード作成

size(2100,1600)

ellipse(600, 800, 800, 800) #左耳
ellipse(1500, 800, 800, 800) #右耳
ellipse(1050, 800, 1000, 1000) #顔

※注意

顔を一番最後に書く、順番が変わるとただ丸が重なっているだけになります

入力・実行

ダダ
ダダ

こんな感じになります

少しおさるっぽくなってきました

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

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

吹き出しに入れても、いい感じですね

耳もあまり大きくはみ出して今ないのでちょうどよさそうです

ダダ
ダダ

全体的な輪郭はよさそうですね

ただ、このままだとシルエットになってしまうので

少し、耳を変えていきます

ダダ
ダダ

耳の内側に〇を入れてみます

コード作成

size(2100,1600)

#左耳
ellipse(600, 800, 800, 800)
ellipse(600, 800, 600, 600)

#右耳
ellipse(1500, 800, 800, 800)
ellipse(1500, 800, 600, 600)

#顔
ellipse(1050, 800, 1000, 1000)

入力・実行

ダダ
ダダ

いい感じに耳っぽくなりましたね

少し、吹き出しの中に入れてみましょう

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

吹き出しの中に入っても

耳感が出てるのでいい感じです

ダダ
ダダ

では、次は着色していきましょう

コード作成

size(2100,1600)
#左耳
fill(230, 150, 10)
ellipse(600, 800, 800, 800)
fill(255)
ellipse(600, 800, 600, 600)

#右耳
fill(230, 150, 10)
ellipse(1500, 800, 800, 800)
fill(255)
ellipse(1500, 800, 600, 600)

#顔
fill(230, 150, 10)
ellipse(1050, 800, 1000, 1000)

入力・実行

ダダ
ダダ

着色してみました

色もいい感じでできました

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

色の感じもいいですね

でも、色ってどのように選んだの?

ダダ
ダダ

Processingのツールという部分から

色選択をクリックしてもらうと色を見つけることができます

\\\色についての参考記事///

【超初心者向け】Processingでプログラミング言語Pythonを使っって図形や線に色をつけてみよう

意外とサクサクとここまで作ってこれたのですが、基本は図形の作成方法がメインです

\\\図形についての参考記事///

【超初心者向け】Processingでプログラミング言語Pythonを使った図形の描き方について

ここからが問題です

ベジエ曲線を使って顔を表現していきます

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

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

ベジエ曲線は少しコツをつかむまでは扱いが難しいです

ここが一番時間がかかりました

ベジエ曲線は調整ができないと下のようになります

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

私の顔がすごいことになってます

ダダ
ダダ

確かにものすごいことになってますね

少し扱いが難しいので微調整していきます

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

なんかアイマスクみたいです

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

さっきよりいい感じですがもう少し下が見えないようにしてほしいです

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

こんな感じです、ただ左の顔が殴られて腫れているようなので

少し腫れを引かせて下さい

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

めっちゃいい感じ

参考コード

size(2100,1600)

#左耳
fill(230, 150, 10)
ellipse(600, 800, 800, 800)
fill(255)
ellipse(600, 800, 600, 600)

#右耳
fill(230, 150, 10)
ellipse(1500, 800, 800, 800)
fill(255)
ellipse(1500, 800, 600, 600)

#顔
fill(230, 150, 10)
ellipse(1050, 800, 1000, 1000)

fill(255)
beginShape()
vertex(1050, 800)
bezierVertex( 500, 400, 300, 1300, 1050, 1300)
bezierVertex(1800, 1300, 1600, 400, 1050, 800)
endShape()
ダダ
ダダ

いい感じにできましたね

少しコード操作が難しかったですが何とかなりました

では、仕上げにかかりましょう

ダダ
ダダ

最後の仕上げはサクサクっとやっていきます

ここからはコードが長くなってくるので、部位のコードを載せていきます

まとめに完成コードを載せておきます

目を作っていきます

丸を使って目を表現していきます

コード入力

#右目
fill(0)
ellipse(1200, 1000, 50,50)

#左目
ellipse(900, 1000, 50,50)

入力・実行

鼻を作っていきます

鼻も同じように丸を使って表現していきます

コード作成

#鼻
fill(255, 0, 0)
ellipse(1050, 1100, 50, 50)

コード入力・実行

最後に口を作っていきます

口はベジエ曲線で書いていきます

そのままの線で表現すると少し細いので少し太くしていきます

コード入力

#口
fill(255)
stroke(0)
strokeWeight(10)
bezier(1050, 1130, 1050, 1200, 1000, 1300, 900, 1200)
bezier(1050, 1130, 1050, 1200, 1100, 1300, 1200, 1200)

コード入力・実行

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

ついにできましたね

ありがとうございます

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

私の名前は『おさるのピースケ』です

よろしくお願いします

ダダ
ダダ

何とか出来上がりましたね

よろしくお願いします

おさるのピースケ!!

ダダ
ダダ

最後におまけで表情を変化させてみましょう

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

表情が変化してる!!!!!

まとめ

今回は自分でキャラクター作成を行っていきました

Processingというソフトでプログラミング言語Pythonを使って自分のキャラクターを作成することができました

たぶん、アドビとか使うとすぐにできるかもしれないけど完成したことがうれしかったです

これから、まだまだProcessingでできることを探していきます

今後はおさるのピースケを育てていきたいです

完成コード

size(2100,1600)
background(255)

#左耳
fill(230, 150, 10)
ellipse(600, 800, 800, 800)
fill(255)
ellipse(600, 800, 600, 600)

#右耳
fill(230, 150, 10)
ellipse(1500, 800, 800, 800)
fill(255)
ellipse(1500, 800, 600, 600)

#顔
fill(230, 150, 10)
ellipse(1050, 800, 1000, 1000)

fill(255)
beginShape()
vertex(1050, 800)
bezierVertex( 500, 400, 300, 1300, 1050, 1300)
bezierVertex(1800, 1300, 1600, 400, 1050, 800)
endShape()

#右目
fill(0)
ellipse(1200, 1000, 50,50)

#左目
ellipse(900, 1000, 50,50)

#鼻
fill(255, 0, 0)
ellipse(1050, 1100, 50, 50)

#口
fill(255)
stroke(0)
strokeWeight(10)
bezier(1050, 1130, 1050, 1200, 1000, 1300, 900, 1200)
bezier(1050, 1130, 1050, 1200, 1100, 1300, 1200, 1200)

コメント

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