[perl]scalar=$calar、array=@rray、hash=%演算？

カテゴリ: perl / author: uechoco / 2011年12月24日 16:10:27
この記事を読む時間：2分16秒くらい

ふと、perlのスカラ変数、配列、ハッシュの記号について思ったのが、

  • scalar = $calar（ドル記号がSに似ている）
  • array=@array（アットマーク記号がaに似ている）
  • hash=%演算（ハッシュを求める代表的な演算は、%記号で余りを求める方法）

なんじゃないかなーっと。Perlなんて時々スクリプトを見る程度だけど、昔（8年前くらいに）CGIゲームとかyybbsとか弄ってたときは、それぞれの記号が何を示しているのか、理解してなかったよなーって懐かしむ。

モイッチョおまけに、配列の最後の添字を取得する$#arrっていう書き方もあった気がするけど、

  • $#arr = arrという変数の#(番号=ここでは添字)を$(スカラー値)で返す
  • $#arr = arrという変数の$#(添字番号)を返す

という感じで#が番号っていう意味を知っていれば、すんなり受け入れらるよなーって。

ついでに配列やハッシュが@や%記号で扱ったり$記号で扱ったりしてこんがらがっていた時代もあったけど、これも簡単で、その時点でのコンテキスト(文脈)でどう扱っているかを記号で表しているだけじゃないかと。

ちなみに、ここで書いたのは勝手な想像であって、どこかで調べたわけじゃなくて、もしかしたら間違っているかもしれません。（それでも覚えやすいからいいかなっとｗ）

プログラミング歴が遊びも含めて10年を超えてくると、いろいろな知識も増えてきて、昔分からなかったことをすんなり分かるようになったりしてきます。自分の成長を実感できた瞬間でしたｗ

 

P.S. (2012/01/02 13:40):

今、初めてのPerl 第5版（通称：リャマ本）を読んでいるのですが、p53の脚注に、「Larryは、それぞれ$calar（scalar）と@rray（array）だから、ドル記号とアットマークを選んだと主張しています。」ということが書いてあり、公式見解として正しいようです。


[processing]魔方陣とかSF円とか(Processing Advent Calendar 2011 – 20日目)

カテゴリ: processing / author: uechoco / 2011年12月20日 01:02:20
この記事を読む時間：19分54秒くらい

Processing Advent Calendar 2011の2回目の登場です。
２０日目の担当ということで、最近Processingと疎遠でphpやらpythonやらと戯れている私は既にネタ切れですｗ

Processingは何かのプロダクトのプロトタイプを作ったり、自分が作りたいアニメーションを作ったりするのに向いていると言われています。
今回は私の趣味で、魔方陣とかSFちっくな円とか、そういうものを２種類公開いたします。

ミッドチルダ式魔方陣

PLAIN TEXT
Processing:
  1. /**
  2.  * ミッドチルダ式魔法陣 (元ネタ：魔法少女リリカルなのは)
  3.  *
  4.  * @title mugityax | 背景作成
  5.  * @link http://www.mugityax.com/weblog/2006/06/post_1.html
  6.  *
  7.  * @title ミッドチルダフォント置き場
  8.  * @link http://midfont.refy.net/
  9.  */
  10.  
  11. float rot1, rot2;
  12. PFont font1, font2;
  13.  
  15.   size(400, 400);
  16.   colorMode(HSB, 100);
  17.   frameRate(30);
  18.   smooth();
  19.   background(0);
  20.  
  21.   textAlign(CENTER, CENTER);
  22.  
  23.   font1 = loadFont("MID-CHILDA_Regular-30.vlw");
  24.   font2 = loadFont("MID-CHILDA_Regular-15.vlw");
  25.   //font1 = createFont("mid-childa_R.ttf", 30, true);
  26.   //font2 = createFont("mid-childa_R.ttf", 15, true);
  27.  
  28.   rot1 = rot2 = 0;
  29. }
  30.  
  32.   background(0);
  34.   {
  35.     noFill();
  36.     translate(width / 2, height / 2);
  37.     final float rl = 120 / sqrt(2); // 84.85281
  38.     final float ro = 149;
  39.    
  40.     // 固定円
  41.     {
  42.       drawLightEllipse(0, 0, 180*2, 180*2); // 外周円-二重外円
  43.       drawLightEllipse(0, 0, 175*2, 175*2); // 外周円-二重外円
  44.       drawLightEllipse(0, 0, 120*2, 120*2); // 外周円-内円
  45.       drawLightEllipse(0, 0, rl*2, rl*2); // 内周方形内-外円
  46.       drawLightEllipse(0, 0, 60*2, 60*2); // 内周方形内-内円
  47.     }
  48.    
  49.     // 外周小円・内周方形1
  50.     pushMatrix();
  51.     {
  52.       rotate(rot1);
  53.       // 外周小円
  54.       final float[] rm = {50, 45};
  55.       for (int i = 0; i <rm.length; i++) {
  56.         drawLightEllipse(0, -ro, rm[i], rm[i]);
  57.         drawLightEllipse(ro, 0, rm[i], rm[i]);
  58.         drawLightEllipse(0, ro, rm[i], rm[i]);
  59.         drawLightEllipse(-ro, 0, rm[i], rm[i]);
  60.       }
  61.       // 内周方形1
  62.       drawLightQuad(0,-120,120,0,0,120,-120,0);
  63.     }
  64.     popMatrix();
  65.    
  66.     // 内周方形2
  67.     pushMatrix();
  68.     {
  69.       rotate(rot2);
  70.       drawLightQuad(-rl,-rl,rl,-rl,rl,rl,-rl,rl);
  71.     }
  72.     popMatrix();
  73.    
  74.     final String[][] ot = {
  75.       {"Y","S","T","D","U","X","K","j","L","z","D","K","F","A","M","B","Y","o","h","Z","O","T","U","V","i"},
  76.       {"J","Z","p","V","A","Y","F","r","j","s","v","W","T","h","G","S","c","H","X","K","k","o","d","B","u"},
  77.       {"b","F","M","r","g","R","V","y","N","B","A","x","q","C","T","p","E","L","K","a","w","j","k","J","P"},
  78.       {"H","a","G","d","W","S","n","M","X","s","E","x","A","o","Z","C","b","f","k","U","V","i","Y","B","D"},
  79.       {"E","y","t","H","L","o","Q","W","T","h","a","d","C","B","b","w","v","D","s","Y","z","e","R","n","S"},
  80.       {"K","B","f","T","k","R","e","d","w","z","S","m","D","J","P","F","j","o","n","r","u","x","g","v","b"},
  81.       {"z","G","q","e","u","w","W","a","U","X","i","r","A","Y","D","t","N","V","k","P","Q","p","g","E","K"},
  82.       {"b","v","d","B","g","z","D","h","j","Q","n","U","G","Z","q","u","F","r","T","X","a","m","W","t","Y"},
  83.       {"Z","K","U","T","e","A","G","c","X","i","Q","o","R","F","k","t","p","D","J","d","r","q","n","V","E"},
  84.     };
  85.     final int[][] a_set = {
  86.       {14, 78, 4},
  87.       {102, 170, 4},
  88.       {192, 260, 4},
  89.       {282, 350, 4}
  90.     };
  91.  
  92.     // 外周文字
  93.     pushMatrix();
  94.     {
  95.       rotate(rot1);
  96.       fill(100);
  97.       textFont(font1);
  98.       for (int i = 0; i <4; i++) {
  99.         int c = 0;
  100.         for (int a = a_set[i][0]; a <a_set[i][1]; a+=a_set[i][2]) {
  101.           pushMatrix();
  102.           rotate(radians(a));
  103.           translate(ro, 0);
  104.           rotate(HALF_PI);
  105.           text(ot[i][c++], 0, 0);
  106.           popMatrix();
  107.         }
  108.       }
  109.     }
  110.     popMatrix();
  111.  
  112.     // 内周文字
  113.     pushMatrix();
  114.     {
  115.       rotate(rot2);
  116.       fill(100);
  117.       textFont(font2);
  118.       for (int i = 0; i <4; i++) {
  119.         int c = 0;
  120.         for (int a = a_set[i][0]; a <a_set[i][1]; a+=a_set[i][2]) {
  121.           pushMatrix();
  122.           rotate(radians(a));
  123.           translate(70, 0);
  124.           rotate(HALF_PI);
  125.           text(ot[i][c++], 0, 0);
  126.           popMatrix();
  127.         }
  128.       }
  129.     }
  130.     popMatrix();
  131.    
  132.   }
  133.   popMatrix();
  134.   update();
  135. }
  136.  
  137. void update() {
  138.   rot1 += 0.04;
  139.   rot2 -= 0.04;
  140. }
  141.  
  142. void drawLightEllipse(float a, float b, float c, float d) {
  144.   stroke(100, 100, 80, 40);
  145.   ellipse(a, b, c, d);
  147.   stroke(95, 100, 80, 60);
  148.   ellipse(a, b, c, d);
  150.   stroke(90, 100, 80, 80);
  151.   ellipse(a, b, c, d);
  152.   strokeWeight(1.5);
  153.   stroke(100);
  154.   ellipse(a, b, c, d);
  155. }
  156.  
  157. void drawLightQuad(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4) {
  159.   stroke(100, 100, 80, 40);
  160.   quad(x1, y1, x2, y2, x3, y3, x4, y4);
  162.   stroke(95, 100, 80, 60);
  163.   quad(x1, y1, x2, y2, x3, y3, x4, y4);
  165.   stroke(90, 100, 80, 80);
  166.   quad(x1, y1, x2, y2, x3, y3, x4, y4);
  167.   strokeWeight(1.5);
  168.   stroke(100);
  169.   quad(x1, y1, x2, y2, x3, y3, x4, y4);
  170. }
  171.  
  173.   save("mid_tilde_magic_circle.jpg");
  174. }

まずは、魔方陣です。魔法少女リリカルなのはというアニメの中に出てくるミッドチルダ式魔方陣というものです。元ネタは全く知らないのですが、魔方陣的に描きやすかったので、参考にしました。専用のフォントも使用しています。プログラムは４つの構成要素になっていて、外周や内周の固定や回転する円、内周の正方形、外周円の文字、内周円の文字となっています。rotate()とmatrixを上手く使用して、座標軸を回転させることで描画する方式をとっています。仕組みさえわかってしまえば簡単にバリエーションが作成できます。

SF円

PLAIN TEXT
Processing:
  1. float cx, cy;
  2. int ringCount = 0;
  3. Ring[] rings = new Ring[1];
  4.  
  6.   size(400, 400);
  7.   background(0);
  8.   noFill();
  9.   smooth();
  10.   strokeCap(SQUARE);
  11.   ellipseMode(RADIUS);
  12.  
  13.   cx = width / 2;
  14.   cy = height / 2;
  15.  
  16.   float pRadius = 20, pWeight = 2;
  17.   while (pRadius <180) {
  18.     Ring r = addRing();
  19.     r.setWeight(random(2, 25));
  20.     r.setPosition(cx, cy);
  21.     r.setRadius(pRadius + (pWeight + r.weight) / 2 + 1);
  22.     r.setRadians(random(TWO_PI)+PI/3, random(TWO_PI)+PI/3);
  23.     r.setColor(#ffffff);
  24.     r.setRot(random(-0.05, 0.05));
  25.     pRadius = r.r;
  26.     pWeight = r.weight;
  27.   }
  28. }
  29.  
  31.   background(0);
  32.   for (int i = 0; i <ringCount; ++i) {
  33.     rings[i].draw();
  34.     rings[i].move();
  35.   }
  36. }
  37.  
  38. Ring addRing() {
  39.   if (rings.length == ringCount) {
  40.     rings = (Ring[]) expand(rings);
  41.   }
  42.   Ring r = new Ring();
  43.   rings[ringCount++] = r;
  44.   return r;
  45. }
  46.  
  47. class Ring {
  48.   float x, y, r;
  49.   float weight;
  50.   float startRad, endRad;
  51.   float rot;
  52.   color c;
  53.  
  54.   void draw() {
  55.     stroke(c);
  56.     strokeWeight(weight);
  57.     arc(x, y, r, r, startRad, endRad);
  58.   }
  59.  
  60.   void move() {
  61.     startRad += rot;
  62.     endRad += rot;
  63.     if (startRad> TWO_PI && endRad> TWO_PI) {
  64.       startRad -= TWO_PI;
  65.       endRad -= TWO_PI;
  66.     }
  67.   }
  68.  
  69.   void setPosition(float x, float y) {
  70.     this.x = x;
  71.     this.y = y;
  72.   }
  73.  
  74.   void setRadius(float r) {
  75.     this.r = r;
  76.   }
  77.  
  78.   void setRadians(float start, float end) {
  79.     this.startRad = start;
  80.     this.endRad = end;
  81.   }
  82.  
  83.   void setWeight(float weight) {
  84.     this.weight = weight;
  85.   }
  86.  
  87.   void setColor(color c) {
  88.     this.c = c;
  89.   }
  90.  
  91.   void setRot(float rot) {
  92.     this.rot = rot;
  93.   }
  94. }
  95.  
  97.   save("sf_arc_ring_magic_circle.jpg");
  98. }

正式に何といったらよいのかわかりませんが、SF映画とかのコンソール画面とかの後ろ側で無駄にかっこ良く回ってるアレですｗ　プログラムの仕組みとしては、円弧(arc)を何十にも重ねてそれぞれ別々の弧の長さや回転速度を持たせているだけです。プログラム上の工夫としては、円弧の部分をRingというクラスにまとめ、draw()ループから呼び出すメソッドはRing.draw()やRing.move()に限定することで、draw()ループを見やすくしています。このように、似たような動作をするオブジェクトをクラスとして定義して、パラメータの違いによって動作を変え、描画や移動の時はdraw()やmove()などのメソッドを作成して呼ばせるような手法は、プログラムをすっきりとさせるし、動作の塊がオブジェクトとしてまとまっているので、大変見やすくなっています。

最後に

と、今回は２つの作品の紹介で終わりでちょっと物足りなかったかと思います。

私はCGクリエイターと言うよりはCGに興味があるプログラマーなので、自分が作りたいものが作れれば良いという考えではなく、「この作品を作るにはどういうプログラムにすると上手く書けるか」という視点でProcessingのコードを書くことが多いです。前回の伝統模様の記事でも、いろんな書き方で伝統模様を書いていたのをご覧になっているかと思います。私の目標としては"CG自体の美"の次くらいに"プログラムコードの美"を追求していきたいと思っています。

めちゃめちゃなコードでもその場限りで描ければ良しとする考えもあるのですが、数カ月後とか、１年後とかにProcessingのコードを見て、何やっているかわからないと困る場合もありますよね。その点、プログラムコードの美しさも最初から追求していれば、後から読んでも読みやすいプログラムなので、理解がしやすいかと思います。

とまぁ、作品紹介ついでに本職プログラマーならではのプログラミングの視点をご紹介してみました。


[Django]ChoiceFieldのchoicesに関数を指定したい

カテゴリ: python / author: uechoco / 2011年12月14日 17:23:14
この記事を読む時間：3分13秒くらい

Djangoのformで、ChoiceFieldのchoicesには固定のtupleを指定したり、ModelForm任せだったりすることがほとんどだったのですが、独自に加工した一覧を出したくて、choicesに関数を指定しようとしました。

ただ、素直に関数名をforms.ChoiceField(choices=func_name)と指定しただけだと、
「'function' object is not iterable」
と怒られてしまいました。

どうしたものかとググっていたら、見つけました

python - Lazy choices in Django form - Stack Overflow

djangoのlazyというユーティリティを使って関数を与える方法が書いてありました！

PLAIN TEXT
PYTHON:
  1. from django.utils.functional import lazy
  2.  
  3.     forms.ChoiceField(choices=lazy(func_name, tuple)())

こんな感じですね。これは使える！

とか思ってたけど、やりたいことこれじゃないよ！あと１歩だった。
ModelFormにinstanceをセットして、そのinstanceの中身によって変動するchoicesって作れるのかな？（こっちが知りたかった

P.S.
結局やりたい事はModelChoiceFieldでした。知らなかった。querysetを適切に与えてやるためにFormの__init__()を上書きして必要なインスタンスを渡してあげています。だいたい以下のような感じ

PLAIN TEXT
PYTHON:
  1. class HogeForm(forms.ModelForm):
  2.     foo = forms.ChoiceField(choices=())
  3.     bar = None
  4.  
  5.     class Meta:
  6.         model = Hoge
  7.         fields = ('foo', )
  8.  
  9.     def __init__(self, bar, *args, **kwargs):
  10.         super(HogeForm, self).__init__(*args, **kwargs)
  11.         self.bar = bar
  12.         self.fields['foo'] = forms.ModelChoiceField(queryset=Foo.objects.filter(bar=bar))
  13.  
  14.     def save(self, commit=False):
  15.         hoge = super(HogeForm, self).save(commit=False)
  16.         hoge.bar = self.bar
  17.         return hoge.save()


[processing]伝統模様を描いてみよう(Processing Advent Calendar 2011 – 9日目)

カテゴリ: processing / author: uechoco / 2011年12月09日 00:01:56
この記事を読む時間：22分13秒くらい

Processingの記事を書くのは本当に久しぶりです。
Processing Advent Calendar 2011に参加しておりまして、9日目の担当ということで執筆いたします。

みなさんは、伝統模様と聞いてパッとイメージが浮かぶでしょうか？
たぶん着物やハンカチなどの絵柄に使われているのを見たことがあるかもしれません。

伝統模様は

  • 同じパターンが繰り返し使われている
  • 幾何学的な模様が多い

といった観点からとても不思議な模様で、またProcessingの練習で描いてみる題材としても適していると思っています。

百聞は一見にしかず、いくつか私の描いたものをコード付きでご紹介します。

青海波(せいがいは)

PLAIN TEXT
Processing:
  1. // 青海波(せいがいは)
  2.  
  3. int r = 80;
  4. int r2 = r * 2;
  5.  
  7.   size(400, 400);
  8.   background(255, 255, 255);
  9.   smooth();
  10.   noLoop();
  11. }
  12.  
  14.   noStroke();
  15.   background(255, 255, 255);
  16.  
  17.   boolean flag = true;
  18.   for (int y = 0; y <height + r2; y += r) {
  19.     int x_base = flag ? 0 : r / 2 ;
  20.     for (int x = x_base; x <width + r2; x += r) {
  21.       drawPattern(x, y);
  22.     }
  23.     flag = !flag;
  24.   }
  25. }
  26.  
  27. void drawPattern(float cx, float cy) {
  28.   ellipseMode(CENTER_RADIUS);
  29.   int script[][] = {
  30.     {80, 0, 0, 0},
  31.     {75, 255, 255, 255},
  32.     {65, 0, 0, 0},
  33.     {60, 255, 255, 255},
  34.     {50, 0, 0, 0},
  35.     {45, 255, 255, 255},
  36.     {35, 0, 0, 0},
  37.     {30, 255, 255, 255},
  38.     {20, 0, 0, 0},
  39.     {15, 255, 255, 255},
  40.     {5, 0, 0, 0}
  41.   };
  42.   for (int i = 0; i <script.length; i++) {
  43.     int len = script[i][0];
  44.     fill(script[i][1], script[i][2], script[i][3]);
  45.     ellipse(cx, cy, len, len);
  46.   }
  47. }

青海波は文字通り波をイメージした模様です。私のコードでは、2重のfor文でx, y座標をずらしながら、
パターン化した白黒の円を上から塗り重ねることで、青海波っぽく描いています。

星七宝繋ぎ(ほししっぽう)

PLAIN TEXT
Processing:
  1. // 星七宝繋ぎ(ほししっぽう)
  2.  
  3. int r = 80;
  4. int r2 = r * 2;
  5.  
  6. float ct[] = new float[360];
  7. float st[] = new float[360];
  8.  
  10.   size(400, 400);
  11.   background(0, 0, 0);
  12.   smooth();
  13.   noLoop();
  14.  
  15.   ellipseMode(CENTER_RADIUS);
  16.  
  17.   for (int d = 0; d <360; d++) {
  18.     ct[d] = cos(radians(d));
  19.     st[d] = sin(radians(d));
  20.   }
  21. }
  22.  
  24.   background(0, 0, 0);
  25.  
  27.   stroke(255, 255, 255);
  28.  
  29.   noFill();
  30.   boolean flag = true;
  31.   for (int y = -20; y <height + r2; y += r) {
  32.     int x_base = -20 + (flag ? 0 : r);
  33.     for (int x = x_base; x <width + r2; x += r2) {
  34.       drawPattern(x, y);
  35.     }
  36.     flag = !flag;
  37.   }
  38.  
  39.   fill(0, 0, 0);
  40.   flag = true;
  41.   for (int y = -20; y <height + r2; y += r) {
  42.     int x_base = -20 + (flag ? 0 : r);
  43.     for (int x = x_base; x <width + r2; x += r2) {
  44.       drawPattern2(x, y);
  45.     }
  46.     flag = !flag;
  47.   }
  48. }
  49.  
  50. void drawPattern(float cx, float cy) {
  51.  
  52.   float p[][] = {
  53. //    {cx + r, cy - r, 0, 90, 180, 270},
  54. //    {cx - r, cy - r, 90, 180, 270, 360},
  55.     {cx - r, cy + r, 180, 270, 0, 90},
  56.     {cx + r, cy + r, 270, 360, 90, 180}
  57.   };
  58.  
  59.   for (int i = 0; i <p.length; i++) {
  60.     float tx = p[i][0];
  61.     float ty = p[i][1];
  62.     int crad_begin = (int)p[i][2];
  63.     int crad_end = (int)p[i][3];
  64.     int trad_begin = (int)p[i][4];
  65.     int trad_end = (int)p[i][5];
  66.  
  67.     beginShape(LINES);
  68.     for (int d = crad_begin; d <crad_end; d++) {
  69.       vertex(cx + ct[d] * r, cy - st[d] * r);
  70.     }
  71.     for (int d = trad_begin; d <trad_end; d++) {
  72.       vertex(tx + ct[d] * r, ty - st[d] * r);
  73.     }
  74.     endShape(CLOSE);
  75.   }
  76. }
  77.  
  78. void drawPattern2(float cx, float cy) {
  79.   ellipse(cx + r, cy, 10, 10);
  80.   ellipse(cx, cy + r, 10, 10);
  81. }

七宝模様は、円を重ね合わせることで、円の弧が星のように見える模様です。
私のコードはちょっと複雑ですね。たしか円を並べただけだと七宝模様に近づかなかったので、
円弧をvertex()で描いていったのだと記憶しています。

花亀甲（はなきっこう）

PLAIN TEXT
Processing:
  1. // 花亀甲（はなきっこう）
  2.  
  3. float ROOT_3 = (float)Math.sqrt(3);
  4. float ROOT_3_DIV_2 = ROOT_3 / 2.0;
  5.  
  6. float ROOT_2 = (float)Math.sqrt(2);
  7. float ONE_DIV_ROOT_2 = 1 / ROOT_2;
  8.  
  9. int ix = -20;
  10. int iy = -20;
  11. int r = 50;
  12. int r2 = r * 2;
  13. int in_r = r - 8;
  14.  
  15. float ct[] = new float[360];
  16. float st[] = new float[360];
  17.  
  19.   size(400, 400);
  20.   background(255, 255, 255);
  21.   smooth();
  22.   noLoop();
  23.  
  24.   for (int d = 0; d <360; d++) {
  25.     ct[d] = cos(radians(d));
  26.     st[d] = sin(radians(d));
  27.   }
  28. }
  29.  
  31.   background(255, 255, 255);
  32.  
  33.   boolean flag = true;
  34.   for (float y = iy; y <height + r2; y += r * 3 / 2) {
  35.     float x_base = ix + (flag ? 0 : r * ROOT_3_DIV_2);
  36.     for (float x = x_base; x <width + r2; x += r * ROOT_3) {
  37.       drawPattern(x, y);
  38.     }
  39.     flag = !flag;
  40.   }
  41. }
  42.  
  43. void drawPattern(float cx, float cy) {
  44.  
  45.   float out_len = r;
  46.   float in_len = r - 5;
  47.  
  48.   int deg_list[] = {30, 330, 270, 210};
  49.   int deg_list2[] = {30, 330, 270, 210, 150, 90, 30};
  50.  
  51.   // 外側の亀甲
  52.   stroke(0, 0, 0);
  54.   noFill();
  55.   drawTortoiseshell(cx, cy, r, deg_list);
  56.  
  57.   // 内側の亀甲
  59.   drawTortoiseshell(cx, cy, in_r, deg_list2);
  60.  
  61.   // 中央文様
  62.   drawFlower(cx, cy, 7, 30, 20);
  63. }
  64.  
  65. void drawTortoiseshell(float cx, float cy, float r, int[] deg_list) {
  66.   float ox = ct[deg_list[0]] * r;
  67.   float oy = -st[deg_list[0]] * r;
  68.   for (int i = 1; i <deg_list.length; i++) {
  69.     float nx = ct[deg_list[i]] * r;
  70.     float ny = -st[deg_list[i]] * r;
  71.     line(cx + ox, cy + oy, cx + nx, cy + ny);
  72.     ox = nx;
  73.     oy = ny;
  74.   }
  75. }
  76. void drawFlower(float cx, float cy, int thin, int len, int len2) {
  77.   noStroke();
  78.   fill(0, 0, 0);
  79.  
  80.   // 上の葉(90〜270)
  81.   // 下の葉(-90〜90)
  83.   for (int i = 0; i <360; i++) {
  84.     float x = - st[safe_degrees(i * 2)] * len / thin;
  85.     float y = ct[safe_degrees(i)] * len;
  86.     vertex(cx + x, cy + y);
  87.   }
  88.   endShape(CLOSE);
  89.  
  90.   // 右の葉(-90〜90)
  91.   // 左の葉(90〜270)
  93.   for (int i = 0; i <360; i++) {
  94.     float x = ct[safe_degrees(i)] * len;
  95.     float y = - st[safe_degrees(i * 2)] * len / thin;
  96.     vertex(cx + x, cy + y);
  97.   }
  98.   endShape(CLOSE);
  99.  
  100.   // 左下の葉(90〜270)
  101.   // 右上の葉(-90〜90)
  103.   for (int i = 0; i <360; i++) {
  104.     float x = - st[safe_degrees(i * 2)] * len2 / thin;
  105.     float y = ct[safe_degrees(i)] * len2;
  106.     float dx = -1 * ONE_DIV_ROOT_2 * (x - y);
  107.     float dy = -1 * ONE_DIV_ROOT_2 * (x + y);
  108.     vertex(cx + dx, cy + dy);
  109.   }
  110.   endShape(CLOSE);
  111.  
  112.   // 右下の葉(90〜270)
  113.   // 左上の葉(-90〜90)
  115.   for (int i = 0; i <360; i++) {
  116.     float x = ct[safe_degrees(i)] * len2;
  117.     float y = - st[safe_degrees(i * 2)] * len2 / thin;
  118.     float dx = -1 * ONE_DIV_ROOT_2 * (x - y);
  119.     float dy = -1 * ONE_DIV_ROOT_2 * (x + y);
  120.     vertex(cx + dx, cy + dy);
  121.   }
  122.   endShape(CLOSE);
  123. }
  124.  
  125. int safe_degrees(int deg) {
  126.   while (deg>= 360) deg-=360;
  127.   while (deg <0) deg += 360;
  128.   return deg;
  129. }

亀甲模様に花柄がついた、花亀甲という模様です。コードもだいぶ複雑になって来ました。プログラムは太い亀甲を描くルーチン、細い内側の亀甲を描くルーチン、そして花柄模様を描くルーチンの３種類に分かれています。そしてそれらを１つのぱたーんとしてまとめあげて、亀甲の中心点を移動させることでパターン化しています。花柄を描くときやcos()やsin()に係数を掛けて、円を歪ませることで花びらの１枚１枚を描いています。

先ほどの星七宝のコードでも出てきたのですが、私のコードでは、cos()とsin()を0〜359度分、予め計算した状態で配列に確保しています。
これはコードの内部で使用する角度をを0〜359の整数に限定することで、描画中にcos()関数、sin()関数の結果がそれぞれ360通りに限定されるので、予め計算しておくことが出来るようになっています。小さな静止画を描くときはそこまで効力を発揮しないのですが、動く物体を描くときや、大量にcos()、sin()関数を使うときは非常に高速に計算ができます（関数を呼び出して計算させるより、予め計算結果を溜めておいたものを使用したほうが速のです）。

武田菱(たけだびし)

武田氏の家紋である「四つ割菱」の入った模様です。

PLAIN TEXT
Processing:
  1. // 武田菱（たけだびし）
  2.  
  3. float ROOT_3 = (float)Math.sqrt(3);
  4. float ROOT_3_DIV_2 = ROOT_3 / 2.0;
  5.  
  6. int ix = -60;
  7. int iy = -60;
  8. int block_w = 100;
  9. int block_h = 60;
  10. float ey = 10;
  11. float ex = ey * ROOT_3;
  12.  
  13. float ct[] = new float[360];
  14. float st[] = new float[360];
  15.  
  17.   size(400, 400);
  18.   background(0, 0, 0);
  19.   smooth();
  20.   noLoop();
  21.  
  22.   for (int d = 0; d <360; d++) {
  23.     ct[d] = cos(radians(d));
  24.     st[d] = sin(radians(d));
  25.   }
  26. }
  27.  
  29.   background(0, 0, 0);
  30.  
  31.   strokeJoin(MITER);
  32.  
  33.   boolean flag = true;
  34.   for (float y = iy; y <height + block_h; y += (block_h + ey) / 2) {
  35.     float x_base = ix + (flag ? (block_w + ex) / 2 : 0);
  36.     for (float x = x_base; x <width + block_w; x += block_w + ex) {
  37.       drawPattern(x, y, block_w, block_h);
  38.     }
  39.     flag = !flag;
  40.   }
  41. }
  42.  
  43. void drawPattern(float x, float y, float block_w, float block_h) {
  44.  
  45.   float subblock_w = block_w / 2;
  46.   float subblock_h = block_h / 2;
  47.   float cx = x + subblock_w;
  48.   float cy = y + subblock_h;
  49.   int m = 8;
  50.  
  51.   stroke(255, 255, 255);
  53.   noFill();
  54.   for (int i = m; i>= 4; i-=2) {
  55.     float w = lerp(0, subblock_w, i / (float)m);
  56.     float h = lerp(0, subblock_h, i / (float)m);
  57.     quad(
  58.       cx, cy - h,
  59.       cx - w, cy,
  60.       cx, cy + h,
  61.       cx + w, cy
  62.     );
  63.   }
  64.   float w = lerp(0, subblock_w, 4 / (float)m);
  65.   float h = lerp(0, subblock_h, 4 / (float)m);
  66.   line(cx - w / 2, cy - h / 2, cx + w / 2, cy + h / 2);
  67.   line(cx + w / 2, cy - h / 2, cx - w / 2, cy + h / 2);
  68. }
  69.  
  70. int safe_degrees(int deg) {
  71.   while (deg>= 360) deg-=360;
  72.   while (deg <0) deg += 360;
  73.   return deg;
  74. }

こちらのコードはそこまで複雑ではありません。四角形を描くquad()関数を多用して、上手く菱形を描いています。

おわりに

簡単ではありますが、伝統模様をお見せしました。
これ以外にも伝統模様はたくさんありますので、調べてみて、「この模様はどうやってProcessingで描いたら上手く書けるかな？」なんて考えてみてはいかがでしょうか。伝統模様に限らず、身近なデザインでも「Processingでどうやって書いたらいいかな？」って考えてみると、Processingの腕が上達するかもしれません。

それでは、次回は@reona396さんです。よろしくお願いします！


[Symfony2]入出力の文字エンコードを変換してみよう Symfony Advent Calender JP 2011 – 6日目-

カテゴリ: php,Symfony2 / author: uechoco / 2011年12月06日 10:00:00
この記事を読む時間：3分58秒くらい

@uechocoです。Symfony Advent Calendar JP 2011の6日目の記事です。@fivestrさんからのバトンタッチです。

日本Symfonyユーザー会に所属するスタッフとして、勢いで申し込んでみたものの、
普段職場でSymfonyを使ってないのでネタ探しに苦労しました。

そういえば去年のSymfony Advent 2010 : ATNDでは[Symfony2]PEAR::Net_UserAgent_MobileをDIコンテナから呼び出すという記事を書きました。
今年も似たような領域で、ガラケー向けのWebサイト開発で使えるかもしれないテクニックとして、入出力される値やコンテンツの文字コードを変換する方法をご紹介します。

symfony 1.x系ではMojavi由来のフィルタチェインの機構がありましたので、
MobileEncodingFilterなどのクラスを作って、入出力の前後でエンコードの変換をかませるというのが一般的だったかと思います。

Syfmony2系ではフィルタチェインという概念はなくなってしまいました。
代わりに処理の所々にイベントが定義されていて、リスナーを登録しておくと自動的にディスパッチしてくれるようなイベントドリブン方式に変わりました。

今回はSymfony2のHttpKernel機構に標準で設定されているkernel.requestイベントとkernel.responseイベントのリスナークラスとしてMobileEncodingListenerを作り、入出力のエンコード処理を行なっています。今回はSymfonyに標準で同梱されているAcme\DemoBundleの中に作成する前提です。

MobileEncodingListenerクラスの作成

まずはイベントリスナークラスを作成します。Symfony本体のFrameworkBundleやHttpKernelコンポーネントのディレクトリ構造の慣習に従ってAcme\DemoBundleの下にEventListenerディレクトリを作成し、その下にイベントリスナークラスを作成します。以下のようなMobileEncodingListnerクラスを作成してください。まだ中身は実装しません。

PLAIN TEXT
php:
  1. <?php
  2.  
  3. namespace Acme\DemoBundle\EventListener;
  4.  
  5. /**
  6.  * Convert input encoding or output encoding.
  7.  * @author uechoco <uechoco at gmail.com>
  8.  *
  9.  */
  10. class MobileEncodingListener
  11. {
  12. }

kernel.responseイベント

まずは簡単なkernel.responseイベントに対するメソッドを記述します。クラスの使用宣言を追加して、MobileEncodingListenerクラスにonKernelResponse()メソッドを実装します。

PLAIN TEXT
php:
  1. use Symfony\Component\HttpKernel\Event\FilterResponseEvent;
  2. use Symfony\Component\HttpKernel\HttpKernelInterface;

PLAIN TEXT
php:
  1. /**
  2.      * Convert output encoding of response.
  3.      * @param FilterResponseEvent $event
  4.      */
  5.     public function onKernelResponse(FilterResponseEvent $event)
  6.     {
  7.         if (HttpKernelInterface::MASTER_REQUEST !== $event->getRequestType()) {
  8.             return;
  9.         }
  10.  
  11.         $response = $event->getResponse();
  12.  
  13.         $response->setContent(mb_convert_encoding($response->getContent(), 'SJIS-win', 'UTF-8'));
  14.     }

中身の処理としては単純で、Resopnseオブジェクトを取得し、その中のコンテンツの文字コードを変換してまたセットしなおしているだけです。今回は説明の簡略化のために文字コードの部分を直書きしています。最初の行のマスターリクエスト以外なら何もしないという条件文がありますが、HttpKernelではリクエストの種別が２種類あり、マスターリクエストとサブリクエストと呼ばれています。そのマスターリクエストの時だけ処理したいので条件式を記述しています。FilterResponseEventクラスを受け取るというのはkernel.responseイベントとの仕様として決められています。

kernel.requestイベント

次にkernel.requestイベントに対するメソッドを記述します。先ほどと同様にクラスの使用宣言を追加して、MobileEncodingListenerクラスにonKernelRequest()メソッドを実装します。

PLAIN TEXT
php:
  1. use Symfony\Component\HttpKernel\Event\GetResponseEvent;

PLAIN TEXT
php:
  1. /**
  2.      * Convert input encoding of request.
  3.      * @param GetResponseEvent $event
  4.      */
  5.     public function onKernelRequest(GetResponseEvent $event)
  6.     {
  7.         if (HttpKernelInterface::MASTER_REQUEST !== $event->getRequestType()) {
  8.             return;
  9.         }
  10.  
  11.         $request = $event->getRequest();
  12.  
  13.         // GET
  14.         $get = $request->query->all();
  15.         mb_convert_variables('UTF-8', 'SJIS-win', $get);
  16.         $request->query->replace($get);
  17.         // POST
  18.         $post = $request->request->all();
  19.         mb_convert_variables('UTF-8', 'SJIS-win', $post);
  20.         $request->request->replace($post);
  21.     }

こちらもマスターリクエストのみ処理する記述が最初にあります。次にRequestオブジェクトを取得し、今回は$_GETと$_POSTに相当する変数だけを文字コード変換しました。$_GETと$POSTはRequestオブジェクトの$queryと$requestというパブリック変数に代入されています。形式としてはParameterBagというクラスでラッピングされて代入されています。ParameterBagクラスのインターフェースとしてall()メソッドで全配列を取得し、replace()メソッドで全配列を総取替しています。

イベントリスナーとして登録する

最後に、先ほど作ったクラスとメソッドをイベントリスナーとして登録します。登録手順はDIコンテナにサービスとして登録するのと同じですが、特別なタグを定義することでイベントリスナーとして認識されるようになっています。src/Acme/DemoBundle/Resources/config/services.xmlを開き、以下のように追記してください。

PLAIN TEXT
XML:
  1. <!-- 省略 -->
  2.  
  3.     <parameters>
  4.         <parameter key="mobile_encoding_listener.class">Acme\DemoBundle\EventListener\MobileEncodingListener</parameter>
  5.     </parameters>
  6.  
  7.     <services>
  8.         <!-- 省略 -->
  9.         <service id="acme.demo.mobile_encoding_listener" class="%mobile_encoding_listener.class%">
  10.             <tag name="kernel.event_listener" event="kernel.request" method="onKernelRequest" />
  11.             <tag name="kernel.event_listener" event="kernel.response" method="onKernelResponse" />
  12.         </service>
  13.     </services>
  14.  
  15.     <!-- 省略 -->

確認する

何事もなければデモ画面が正常に動作すると思います。プロファイラのEvent項を見てみると、リスナーが登録されていることが確認できます。

今回直書きだった文字コードの指定は、config.ymlなどの設定ファイルから取ってくるような仕様にしたり、UserAgentを判別して決定するような仕様にしたほうが汎用性が高いでしょう。

余談

今回の記事の参考にするために他のイベントリスナークラスを見ていましたが、イベントリスナークラスの実装は様々なパターンが存在しているようです。例えば１つのリスナークラスに2つ以上のイベントメソッドをもたせているものや、1クラス1イベントメソッドのもの、他の役割のあるクラスにイベントメソッドを持たせてリスナークラスを兼任させているものなどです。

SymfonyのHttpKernelにどのようなイベントがあるか知りたい方は、Symfonyの内部構造のドキュメントの一節にイベントについて書かれている部分がありますので、そちらを参照してください。

最後に

7日目はMongoDB JPにも所属している@madapajaさんです。よろしくお願いします。


« 前ページへ — 次ページへ »

Copyright © 2012 うえちょこ＠ぼろぐ. WP Theme created by Web Top.