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

Posted under processing by uechoco on 火曜日 20 12月 2011 at 01 : 02 : 20

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のコードを見て、何やっているかわからないと困る場合もありますよね。その点、プログラムコードの美しさも最初から追求していれば、後から読んでも読みやすいプログラムなので、理解がしやすいかと思います。

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


[p5]Processing情報発信サイト「proce55ing.walker(α)」リリースしました

Posted under processing by uechoco on 日曜日 5 4月 2009 at 14 : 18 : 26

proce55inginfo-captureed-image以前にも告知していましたが、Processingの情報発信サイト「proce55ing.walker」を本日公開いたしました。

管理人が私を含めて3人おり、まずはブログ形式でprocessing関連の入門記事、バージョンアップ情報、関数の使い方、ライブラリの使いあた、マニアックな使い方などを発信していく予定です。

また、フォーラム（質問掲示板）を設置してありますので、随時processingに関する質問、およびサイトに関する質問・要望を受け付けています。

ゆくゆくは日本で一番のprocessingポータル・コミュニティサイトにしていこうという意気込みです。processingに興味のある方は是非ご覧になってください。また「こんなコンテンツがあるといいよね」「こんな記事書いてほしい」などのご要望がありましたら、お気軽にフォーラムに書き込んでいただけると助かります。


[processing]新サイトを準備中です

Posted under processing by uechoco on 日曜日 15 3月 2009 at 19 : 43 : 24

Processingだけを扱った新サイトを準備中です。私だけでなく、共同で立ち上げを予定しています。そのうちこのブログに投稿したProcessing関連の記事の多くを寄稿する予定です。近日中に開設する予定です。

っていう告知だけ。


[Processing]PVectorサンプル(1.0リリース記念)

Posted under processing by uechoco on 水曜日 3 12月 2008 at 22 : 45 : 12

Processing 1.0リリース記念として、いくつか新しい機能のサンプルコードを書いてみました。

まずはPVectorクラス。リファレンスには英語で主な使い方は書いてあるものの、実際のソースコードはありませんでした。

リファレンスに従い、position(位置)、velocitiy(速度)、acceleration(加速度)をPVectorクラスで表した実用的なサンプルを書いてみたので、PVectorクラスの1つの使い方として参考にしてみてください。

PLAIN TEXT
Processing:
  1. PFont font;
  2. PVector position, velocity, acceleration;
  3. final int WIDTH = 250, HEIGHT = 250;
  4. final int STATUS_HEIGHT = 50;
  5.  
  7.   // 画面の初期化
  8.   size(WIDTH, HEIGHT + STATUS_HEIGHT);
  9.  
  10.   noStroke();
  11.   colorMode(RGB, 256);
  12.   background(255, 255, 255);
  13.  
  14.   // フォントの初期化
  15.   font = loadFont("ArialNarrow-14.vlw");
  16.   textFont(font);
  17.  
  18.   // 自機の初期化
  19.   position = new PVector(WIDTH / 2, HEIGHT / 2, 0);
  20.   velocity = new PVector(3, 4, 0);
  21.   acceleration = new PVector(0.01, 0.01, 0);
  22. }
  23.  
  25.   // 背景消去
  26.   fill(255, 255, 255, 30);
  27.   rect(0, 0, WIDTH, HEIGHT);
  28.   fill(255, 255, 255);
  29.   rect(0, HEIGHT, WIDTH, STATUS_HEIGHT);
  30.  
  31.   // 自機描画
  32.   fill(255, 0, 0);
  33.   ellipse(position.x, position.y, 10, 10);
  34.  
  35.   // 速度表示
  36.   fill(0, 0, 0);
  37.   text("Position: " + position, 0, height - STATUS_HEIGHT + 14);
  38.   text("Velocity: " + velocity.mag(), 0, height - STATUS_HEIGHT + 14 * 2);
  39.   text("Acceleration: " + acceleration.mag(), 0, height - STATUS_HEIGHT + 14 * 3);
  40.  
  41.   // 場所の更新
  42.   position.add(velocity);
  43.   if (position.x <= 0 || position.x>= WIDTH) {
  44.     velocity.x *= -1;
  45.     acceleration.x *= -1;
  46.     position.x += velocity.x;
  47.   }
  48.   if (position.y <= 0 || position.y>= HEIGHT) {
  49.     velocity.y *= -1;
  50.     acceleration.y *= -1;
  51.     position.y += velocity.y;
  52.   }
  53.   velocity.add(acceleration);
  54. }

実行画面(クリックで拡大)

サンプルコードのダウンロード：PVectorSample.zip


[Processing]1.0リリース

Posted under processing by uechoco on 水曜日 3 12月 2008 at 19 : 23 : 31

そういえば、いつのまにかProicessingの正式版となる1.0がリリースされました。内部リビジョン番号は0162です。

Processing 1.0での変更点

  • ライブラリの変更
  • P2Dレンダラの復活
  • PShapeクラスによるSVG読み込みの対応
  • PVectorクラスの追加
  • コンパイラの変更
  • ソースコードのUTF-8化
  • JRE(JDK) 6.0 update 10への対応（ただし、genericsや拡張for文などのJava 1.5文法は未対応）
  • etc...

まだまだ知名度は低いものの、徐々に名前は広まっています。特に情報デザイン工学などを勉強している学生にとっては、常識に近くなっている気がします。

また、最近では、processing.jsなど、エンジンを移植する人もいるようです。

ゆっくりと、着実にProcessingは浸透していきます。


次ページへ »

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