何か懐かしいお絵描き

  • 投稿日:
  • by
  • カテゴリ:

とある話でProcessingなるものを聞いて、使ってみた。
Javaベースで、インタープリタっぽい感じ。
コーディングをして再生ボタンを押すと描画される。
「ドラえもんを描こうとしたら目がつながらなかった」というのでドラえもんを。
絵描き歌通りに書いたら超絶不格好になるので、サンリオのドラえもんの絵を参照しながら描いてみた。
結果はこちら。若干バランスがおかしいのは数値指定でやってる限界です。
ご笑覧ください。

doraemon.png

約50行ほどのコード。もっと圧縮できそうだけど、面倒なので普通に描いた。

void setup() {
size(600, 600);
background(255);
}

void draw() {
// DEBUG: 座標が分かりづらいのでグリッドを書く
/*
stroke(128);
for (int i = 0; i < 600; i += 25) {
line(0, i, 600, i);
line(i, 0, i, 600);
}
*/

// 描画に関する属性を指定
stroke(0);
strokeWeight(5);
smooth();

// 植木鉢ー
//noFill();
fill(0, 200, 255);
ellipse(300, 300, 400, 400);
// 植木鉢ー
fill(255);
ellipse(300, 325, 350, 350);

// 丸書いてチョン
ellipse(225+(75/2), 150, 75, 80);
ellipse(300+(75/2), 150, 75, 80);
fill(0);
ellipse(275, 150, 10, 20);
ellipse(325, 150, 10, 20);
// 芽が出て
line(300, 200, 300, 375);
// お豆に
fill(255, 0, 0);
ellipse(300, 200, 40, 40);
// ドーラえもん
noFill();
arc(300, 275, 250, 200, 0, PI);

// おヒゲをつけたーら
line(175, 225, 225, 235);
line(165, 260, 220, 265);
line(175, 300, 225, 290);
line(425, 225, 375, 235);
line(435, 260, 380, 265);
line(425, 300, 375, 290);

// 下の方が開いたので首輪をつけてそれ以外をカット
stroke(255);
fill(255);
rect(145, 425, 310, 100);
stroke(0);
fill(255, 0, 0);
quad(145, 425, 455, 425, 430, 450, 170, 450);
// 鈴(という名のUFO)
fill(255, 255,0);
ellipse(300, 450+25/2, 75, 75);
rect(260, 450, 80, 15);
fill(0);
ellipse(300, 480, 15, 15);
line(300, 480, 300, 495);
}

レイヤの概念があるのかどうか分からないので、基本下から順番に描画します。
なので絵描き歌とは順番が違いますね。
細かい調整をしたので数値は適当です。
こういう作業をするときグリッドを先に引いておくととても楽です。
億劫だったので寝室にあるMacで作りましたが、Windows版もあります。
プログラミングの練習にどうぞ。