こんにちはダダです
この記事を見ているあなた、自作のキャラクターを作ってみたいと思ったことはありませんか？
私はあります
そして、以前こんな記事を書いたことがあります
＼＼＼過去記事／／／
ということで、以前から自作のキャラクターを作ってみたいということで、今回ついにその重い腰を上げて作成しました
この記事では、ブログの吹き出し用のキャラクターを作成する過程を書いています
過去記事でグランプリを獲得したおさるさんの作成をしていきます
↓↓↓完成はこちらです↓↓↓
名前はピースケです
うちの3歳児（広報部長）が命名
なぜか鳥の名前っぽいピースケですが、広報部長のいうこと信じて名前を採用してみました
↓↓↓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)コード入力・実行
ついにできましたね
ありがとうございます
私の名前は『おさるのピースケ』です
よろしくお願いします
何とか出来上がりましたね
よろしくお願いします
おさるのピースケ！！
最後におまけで表情を変化させてみましょう
表情が変化してる！！！！！
この度Udemyで講座を作りました
【プログラミングｘアート】直感的・視覚的に学ぶ Processing×Python 入門講座
ブログに書いてある内容を一つの講座にしています
まとめ
今回は自分でキャラクター作成を行っていきました
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)
コメント