こんにちはダダです
この記事を見ているあなた、自作のキャラクターを作ってみたいと思ったことはありませんか？
私はあります
そして、以前こんな記事を書いたことがあります
＼＼＼過去記事／／／
ということで、以前から自作のキャラクターを作ってみたいということで、今回ついにその重い腰を上げて作成しました
この記事では、ブログの吹き出し用のキャラクターを作成する過程を書いています
過去記事でグランプリを獲得したおさるさんの作成をしていきます
↓↓↓完成はこちらです↓↓↓
名前はピースケです
うちの3歳児（広報部長）が命名
なぜか鳥の名前っぽいピースケですが、広報部長のいうこと信じて名前を採用してみました
キャラクターの作成
では、さっそくキャラクターの作成に入ります
基本的には図形を重ね合わせて作成していきます
今回作成する、キャラクターは吹き出しで今後使っていきたいので吹き出しを使いつつ作成していきます
まず、基準を作るために真ん中へ丸をかきます
コード作成
|
1 2 3 |
size(2100,1600) ellipse(1050, 800, 100, 100) |
入力・実行
こんな感じになります
では、実際に吹き出しに入れてみましょう
少し小さいですね、もっと大きくしてみましょう
ということで、少し大きくしてみましょう
コード編集
|
1 2 3 |
size(2100,1600) ellipse(1050, 800, 1000, 1000) |
入力・実行
こんな感じになりました
では、再度吹き出しに入れてみましょう
サイズ感はいい感じです
では、次は耳をつけていきましょう
ということで、耳を次は作成していきます
耳は、左右に〇を2つつけるように作成します
コード作成
|
1 2 3 4 5 |
size(2100,1600) ellipse(600, 800, 800, 800) #左耳 ellipse(1500, 800, 800, 800) #右耳 ellipse(1050, 800, 1000, 1000) #顔 |
※注意
顔を一番最後に書く、順番が変わるとただ丸が重なっているだけになります
入力・実行
こんな感じになります
少しおさるっぽくなってきました
吹き出しに入れてみましょう
吹き出しに入れても、いい感じですね
耳もあまり大きくはみ出して今ないのでちょうどよさそうです
全体的な輪郭はよさそうですね
ただ、このままだとシルエットになってしまうので
少し、耳を変えていきます
耳の内側に〇を入れてみます
コード作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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) |
入力・実行
いい感じに耳っぽくなりましたね
少し、吹き出しの中に入れてみましょう
吹き出しの中に入っても
耳感が出てるのでいい感じです
では、次は着色していきましょう
コード作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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を使って曲線を描いてみよう
ベジエ曲線は少しコツをつかむまでは扱いが難しいです
ここが一番時間がかかりました
ベジエ曲線は調整ができないと下のようになります
私の顔がすごいことになってます
確かにものすごいことになってますね
少し扱いが難しいので微調整していきます
なんかアイマスクみたいです
さっきよりいい感じですがもう少し下が見えないようにしてほしいです
こんな感じです、ただ左の顔が殴られて腫れているようなので
少し腫れを引かせて下さい
めっちゃいい感じ
参考コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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() |
いい感じにできましたね
少しコード操作が難しかったですが何とかなりました
では、仕上げにかかりましょう
最後の仕上げはサクサクっとやっていきます
ここからはコードが長くなってくるので、部位のコードを載せていきます
まとめに完成コードを載せておきます
目を作っていきます
丸を使って目を表現していきます
コード入力
|
1 2 3 4 5 6 |
#右目 fill(0) ellipse(1200, 1000, 50,50) #左目 ellipse(900, 1000, 50,50) |
入力・実行
鼻を作っていきます
鼻も同じように丸を使って表現していきます
コード作成
|
1 2 3 4 |
#鼻 fill(255, 0, 0) ellipse(1050, 1100, 50, 50) |
コード入力・実行
最後に口を作っていきます
口はベジエ曲線で書いていきます
そのままの線で表現すると少し細いので少し太くしていきます
コード入力
|
1 2 3 4 5 6 |
#口 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でできることを探していきます
今後はおさるのピースケを育てていきたいです
Pythonを学びたい方はこちらの記事を参考にしてみてください
プログラミング学習を進めているけれど、まだ副収入につなげられていない…そんなあなたへ！今こそ、学んだスキルを活かして副業に挑戦する絶好のチャンスです。プログラミングだけでなく、自分のスキルや商品をネットで販売する『ネットショップ』を開設してみませんか？
ネットショップを持つことで、自分の知識やスキルをより多くの人に届け、副収入を得ることが可能です。学んできたプログラミングを活かして、ショップのカスタマイズや運営も自由自在に行えますし、もし商品作成が難しい場合でも、デジタル商品やサービス提供など、いろんな選択肢があります。
このステップで一歩踏み出せば、今学んでいることが副収入に直結し、自分の時間をより有効に使うことができるはずです！一緒にネットショップを開設し、副業の第一歩を踏み出しましょう！
プログラミングを学びたいけど、どこから始めたらいいのか分からない、自分に合っているか不安…そんな悩みを持っている方におすすめしたいのが、 無料相談 サービスです！
この無料相談では、あなたの現状や目標に合わせて、最適な学習プランを一緒に考えてくれます。どんなスキルが必要なのか、どうやって学習を進めると効果的かを具体的にアドバイスしてもらえるので、無駄なく効率的にスタートを切ることができます。
さらに、プログラミング学習には同じ目標を持つ 仲間 がいること、そして頼りになる メンター の存在がとても大きな支えになります。独学ではどうしてもつまずきやすい部分も、メンターがあなたの成長に合わせて親身にサポートしてくれるので、安心して学びを進められます。
まずは 無料相談 で、あなたに合ったプランを見つけて、スキルアップへの第一歩を踏み出してみませんか？今なら、迷っている方でも気軽に相談できるチャンスです！
