Processingを使って数式と図形の組み合わせでハリボーを描画してみた

1 Processingでハリボーを描きたい
2 ハリボーのとげとげ部分を描く
3 ハリボー完成

Processingでハリボーを描きたい

優秀なデザインソフトであるprocessingではさまざまな図形を出力することができます。

円形や三角形、四角形などはそれぞれ下記のようにコード1行で描けます。

ellipse()
triangle()
rect()

いろいろ描いているうちに、筆者のトレードマークでもあるハリボーの絵をコードで描けないか？という疑問が湧きました。

普段お絵描きはペンタブか鉛筆画ばかり使っていますが、コードでどの程度表現できるのかチャレンジしてみようと思います。

完成イメージの落書きはこんな感じ。

ハリボーのとげとげ部分を描く

Processingで描きやすいのは円形などののっぺりした形状。逆に描きにくいのはウニみたいなとげとげした形状。ハリボーはとげとげしすぎですね。難しすぎます。なんだこの形。

表現方法として考案したのは次の３つ。

基準円の周りに三角形を大量に並べる
2重の基準円から法則的にとげとげを描く
ペイントで描いたイラストから外形をトレースする

どれも実装はできそうですが、3. は少しやりたいことと異なります。

今回はコードで数式的に表現することを目指しています。

また、1. だと三角形を大量に並べるというのは美しい方法とは言えません。

というわけで、2. の方法で華麗にハリボーを描いていこうと思います。

作戦としては、ふたつの円を描いて外周を交互に結んでいくという方法を用います。

とげとげを描く作戦の概略図はこちら。

シンプルな星形を描くなら十分ですが、ハリボーのちょっとつぶれた饅頭のような形状が表現できるのか。

ハリボーのとげとげ部分のProcessingコードはこちら。

int toge_num = 40; //toge
int R; //radius
int e; //deviation
int Rb_os = 300; //radius_big_outside
int Rb_is = 250; //radius_big_inside
int Rs_os = 160; //radius_small_outside
int Rs_is = 140; //radius_small_inside
float x;
float y;

void setup() {
  size(1000, 1000);
  background(255);
  smooth();
}

void draw() {
fill(#95672f);
shape(Rb_os,Rb_is,50,500,500);
fill(#ebd8c0);
shape(Rs_os,Rs_is,20,500,640);
}

void shape(int R1,int R2,int e1,float x1,float y1){
beginShape();
for (int i=0; i<toge_num;i++){
  if(i%2==0){
    R = R1;
    e = 0;
  }else{
    R = R2;
    e = e1;
  }
  x = R*cos(radians(360/toge_num*i))+x1;
  y = R*sin(radians(360/toge_num*i))+y1+e;
  vertex(x,y);
}
endShape(CLOSE);
}

問題のとげとげ部分はとげの数を指定して円を区切り、下記の部分で座標を導出してvertexで描いています。

x = R*cos(radians(360/toge_num*i))+x1;
y = R*sin(radians(360/toge_num*i))+y1+e;

そして実行結果は…なんでしょう。これは。

とげとげではあっても、なんだか燃え盛る炎のようにも見えます。

ハリボー完成

とげとげ部分だけではわかりにくいのかもしれません。

draw関数内に目、はな、耳を楕円形を利用して記述し、それっぽくしてみます。

void draw() {
noStroke();
fill(#95672f);
shape(Rb_os,Rb_is,50,500,500);
fill(#ebd8c0);
shape(Rs_os,Rs_is,20,500,640);
ellipse(500,780,100,80);
//eye
fill(#000000);
ellipse(550,680,10,20);
ellipse(450,680,10,20);
//ear
fill(#ebd8c0);
translate(500,500);
rotate(PI/6);
ellipse(120,10,100,200);
rotate(-PI/3);
ellipse(-120,10,100,200);
rotate(PI/6);
translate(0,0);
}