うえちょこ＠ぼろぐ» processing

[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ちっくな円とか、そういうものを２種類公開いたします。

ミッドチルダ式魔方陣

Processing:

/**
 * ミッドチルダ式魔法陣 (元ネタ：魔法少女リリカルなのは)
 *
 * @title mugityax | 背景作成
 * @link http://www.mugityax.com/weblog/2006/06/post_1.html
 *
 * @title ミッドチルダフォント置き場
 * @link http://midfont.refy.net/
 */
 
float rot1, rot2;
PFont font1, font2;
 
void setup() {
  size(400, 400);
  colorMode(HSB, 100);
  frameRate(30);
  smooth();
  background(0);
  
  textAlign(CENTER, CENTER);
  
  font1 = loadFont("MID-CHILDA_Regular-30.vlw");
  font2 = loadFont("MID-CHILDA_Regular-15.vlw");
  //font1 = createFont("mid-childa_R.ttf", 30, true);
  //font2 = createFont("mid-childa_R.ttf", 15, true);
  
  rot1 = rot2 = 0;
}
 
void draw() {
  background(0);
  pushMatrix();
  {
    noFill();
    translate(width / 2, height / 2);
    final float rl = 120 / sqrt(2); // 84.85281
    final float ro = 149;
    
    // 固定円
    {
      drawLightEllipse(0, 0, 180*2, 180*2); // 外周円-二重外円
      drawLightEllipse(0, 0, 175*2, 175*2); // 外周円-二重外円
      drawLightEllipse(0, 0, 120*2, 120*2); // 外周円-内円
      drawLightEllipse(0, 0, rl*2, rl*2); // 内周方形内-外円
      drawLightEllipse(0, 0, 60*2, 60*2); // 内周方形内-内円
    }
    
    // 外周小円・内周方形1
    pushMatrix();
    {
      rotate(rot1);
      // 外周小円
      final float[] rm = {50, 45};
      for (int i = 0; i <rm.length; i++) {
        drawLightEllipse(0, -ro, rm[i], rm[i]);
        drawLightEllipse(ro, 0, rm[i], rm[i]);
        drawLightEllipse(0, ro, rm[i], rm[i]);
        drawLightEllipse(-ro, 0, rm[i], rm[i]);
      }
      // 内周方形1
      drawLightQuad(0,-120,120,0,0,120,-120,0);
    }
    popMatrix();
    
    // 内周方形2
    pushMatrix();
    {
      rotate(rot2);
      drawLightQuad(-rl,-rl,rl,-rl,rl,rl,-rl,rl);
    }
    popMatrix();
    
    final String[][] ot = {
      {"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"},
      {"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"},
      {"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"},
      {"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"},
      {"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"},
      {"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"},
      {"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"},
      {"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"},
      {"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"},
    };
    final int[][] a_set = {
      {14, 78, 4},
      {102, 170, 4},
      {192, 260, 4},
      {282, 350, 4}
    };
 
    // 外周文字
    pushMatrix();
    {
      rotate(rot1);
      fill(100);
      textFont(font1);
      for (int i = 0; i <4; i++) {
        int c = 0;
        for (int a = a_set[i][0]; a <a_set[i][1]; a+=a_set[i][2]) {
          pushMatrix();
          rotate(radians(a));
          translate(ro, 0);
          rotate(HALF_PI);
          text(ot[i][c++], 0, 0);
          popMatrix();
        }
      }
    }
    popMatrix();
 
    // 内周文字
    pushMatrix();
    {
      rotate(rot2);
      fill(100);
      textFont(font2);
      for (int i = 0; i <4; i++) {
        int c = 0;
        for (int a = a_set[i][0]; a <a_set[i][1]; a+=a_set[i][2]) {
          pushMatrix();
          rotate(radians(a));
          translate(70, 0);
          rotate(HALF_PI);
          text(ot[i][c++], 0, 0);
          popMatrix();
        }
      }
    }
    popMatrix();
    
  }
  popMatrix();
  update();
}
 
void update() {
  rot1 += 0.04;
  rot2 -= 0.04;
}
 
void drawLightEllipse(float a, float b, float c, float d) {
  strokeWeight(5);
  stroke(100, 100, 80, 40);
  ellipse(a, b, c, d);
  strokeWeight(3);
  stroke(95, 100, 80, 60);
  ellipse(a, b, c, d);
  strokeWeight(2);
  stroke(90, 100, 80, 80);
  ellipse(a, b, c, d);
  strokeWeight(1.5);
  stroke(100);
  ellipse(a, b, c, d);
}
 
void drawLightQuad(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4) {
  strokeWeight(5);
  stroke(100, 100, 80, 40);
  quad(x1, y1, x2, y2, x3, y3, x4, y4);
  strokeWeight(3);
  stroke(95, 100, 80, 60);
  quad(x1, y1, x2, y2, x3, y3, x4, y4);
  strokeWeight(2);
  stroke(90, 100, 80, 80);
  quad(x1, y1, x2, y2, x3, y3, x4, y4);
  strokeWeight(1.5);
  stroke(100);
  quad(x1, y1, x2, y2, x3, y3, x4, y4);
}
 
void mousePressed() {
  save("mid_tilde_magic_circle.jpg");
}

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

SF円

PLAIN TEXT

Processing:

float cx, cy;
int ringCount = 0;
Ring[] rings = new Ring[1];
 
void setup() {
  size(400, 400);
  background(0);
  noFill();
  smooth();
  strokeCap(SQUARE);
  ellipseMode(RADIUS);
  
  cx = width / 2;
  cy = height / 2;
  
  float pRadius = 20, pWeight = 2;
  while (pRadius <180) {
    Ring r = addRing();
    r.setWeight(random(2, 25));
    r.setPosition(cx, cy);
    r.setRadius(pRadius + (pWeight + r.weight) / 2 + 1);
    r.setRadians(random(TWO_PI)+PI/3, random(TWO_PI)+PI/3);
    r.setColor(#ffffff);
    r.setRot(random(-0.05, 0.05));
    pRadius = r.r;
    pWeight = r.weight;
  }
}
 
void draw() {
  background(0);
  for (int i = 0; i <ringCount; ++i) {
    rings[i].draw();
    rings[i].move();
  }
}
 
Ring addRing() {
  if (rings.length == ringCount) {
    rings = (Ring[]) expand(rings);
  }
  Ring r = new Ring();
  rings[ringCount++] = r;
  return r;
}
 
class Ring {
  float x, y, r;
  float weight;
  float startRad, endRad;
  float rot;
  color c;
 
  void draw() {
    stroke(c);
    strokeWeight(weight);
    arc(x, y, r, r, startRad, endRad);
  }
  
  void move() {
    startRad += rot;
    endRad += rot;
    if (startRad> TWO_PI && endRad> TWO_PI) {
      startRad -= TWO_PI;
      endRad -= TWO_PI;
    }
  }
  
  void setPosition(float x, float y) {
    this.x = x;
    this.y = y;
  }
  
  void setRadius(float r) {
    this.r = r;
  }
  
  void setRadians(float start, float end) {
    this.startRad = start;
    this.endRad = end;
  }
  
  void setWeight(float weight) {
    this.weight = weight;
  }
  
  void setColor(color c) {
    this.c = c;
  }
  
  void setRot(float rot) {
    this.rot = rot;
  }
}
 
void mousePressed() {
  save("sf_arc_ring_magic_circle.jpg");
}

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

最後に

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

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

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

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

Comments (0)

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

Posted under processing by uechoco on 金曜日 9 12月 2011 at 00 : 01 : 56

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

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

伝統模様は

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

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

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

青海波(せいがいは)

PLAIN TEXT

Processing:

// 青海波(せいがいは)
 
int r = 80;
int r2 = r * 2;
 
void setup() {
  size(400, 400);
  background(255, 255, 255);
  smooth();
  noLoop();
}
 
void draw() {
  noStroke();
  background(255, 255, 255);
  
  boolean flag = true;
  for (int y = 0; y <height + r2; y += r) {
    int x_base = flag ? 0 : r / 2 ;
    for (int x = x_base; x <width + r2; x += r) {
      drawPattern(x, y);
    }
    flag = !flag;
  }
}
 
void drawPattern(float cx, float cy) {
  ellipseMode(CENTER_RADIUS);
  int script[][] = {
    {80, 0, 0, 0},
    {75, 255, 255, 255},
    {65, 0, 0, 0},
    {60, 255, 255, 255},
    {50, 0, 0, 0},
    {45, 255, 255, 255},
    {35, 0, 0, 0},
    {30, 255, 255, 255},
    {20, 0, 0, 0},
    {15, 255, 255, 255},
    {5, 0, 0, 0}
  };
  for (int i = 0; i <script.length; i++) {
    int len = script[i][0];
    fill(script[i][1], script[i][2], script[i][3]);
    ellipse(cx, cy, len, len);
  }
}

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

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

PLAIN TEXT

Processing:

// 星七宝繋ぎ(ほししっぽう)
 
int r = 80;
int r2 = r * 2;
 
float ct[] = new float[360];
float st[] = new float[360];
 
void setup() {
  size(400, 400);
  background(0, 0, 0);
  smooth();
  noLoop();
  
  ellipseMode(CENTER_RADIUS);
  
  for (int d = 0; d <360; d++) {
    ct[d] = cos(radians(d));
    st[d] = sin(radians(d));
  }
}
 
void draw() {
  background(0, 0, 0);
  
  strokeWeight(2);
  stroke(255, 255, 255);
  
  noFill();
  boolean flag = true;
  for (int y = -20; y <height + r2; y += r) {
    int x_base = -20 + (flag ? 0 : r);
    for (int x = x_base; x <width + r2; x += r2) {
      drawPattern(x, y);
    }
    flag = !flag;
  }
  
  fill(0, 0, 0);
  flag = true;
  for (int y = -20; y <height + r2; y += r) {
    int x_base = -20 + (flag ? 0 : r);
    for (int x = x_base; x <width + r2; x += r2) {
      drawPattern2(x, y);
    }
    flag = !flag;
  }
}
 
void drawPattern(float cx, float cy) {
  
  float p[][] = {
//    {cx + r, cy - r, 0, 90, 180, 270},
//    {cx - r, cy - r, 90, 180, 270, 360},
    {cx - r, cy + r, 180, 270, 0, 90},
    {cx + r, cy + r, 270, 360, 90, 180}
  };
  
  for (int i = 0; i <p.length; i++) {
    float tx = p[i][0];
    float ty = p[i][1];
    int crad_begin = (int)p[i][2];
    int crad_end = (int)p[i][3];
    int trad_begin = (int)p[i][4];
    int trad_end = (int)p[i][5];
 
    beginShape(LINES);
    for (int d = crad_begin; d <crad_end; d++) {
      vertex(cx + ct[d] * r, cy - st[d] * r);
    }
    for (int d = trad_begin; d <trad_end; d++) {
      vertex(tx + ct[d] * r, ty - st[d] * r);
    }
    endShape(CLOSE);
  }
}
 
void drawPattern2(float cx, float cy) {
  ellipse(cx + r, cy, 10, 10);
  ellipse(cx, cy + r, 10, 10);
}

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

花亀甲（はなきっこう）

PLAIN TEXT

Processing:

// 花亀甲（はなきっこう）
 
float ROOT_3 = (float)Math.sqrt(3);
float ROOT_3_DIV_2 = ROOT_3 / 2.0;
 
float ROOT_2 = (float)Math.sqrt(2);
float ONE_DIV_ROOT_2 = 1 / ROOT_2;
 
int ix = -20;
int iy = -20;
int r = 50;
int r2 = r * 2;
int in_r = r - 8;
 
float ct[] = new float[360];
float st[] = new float[360];
 
void setup() {
  size(400, 400);
  background(255, 255, 255);
  smooth();
  noLoop();
  
  for (int d = 0; d <360; d++) {
    ct[d] = cos(radians(d));
    st[d] = sin(radians(d));
  }
}
 
void draw() {
  background(255, 255, 255);
  
  boolean flag = true;
  for (float y = iy; y <height + r2; y += r * 3 / 2) {
    float x_base = ix + (flag ? 0 : r * ROOT_3_DIV_2);
    for (float x = x_base; x <width + r2; x += r * ROOT_3) {
      drawPattern(x, y);
    }
    flag = !flag;
  }
}
 
void drawPattern(float cx, float cy) {
  
  float out_len = r;
  float in_len = r - 5;
  
  int deg_list[] = {30, 330, 270, 210};
  int deg_list2[] = {30, 330, 270, 210, 150, 90, 30};
  
  // 外側の亀甲
  stroke(0, 0, 0);
  strokeWeight(3);
  noFill();
  drawTortoiseshell(cx, cy, r, deg_list);
  
  // 内側の亀甲
  strokeWeight(1);
  drawTortoiseshell(cx, cy, in_r, deg_list2);
  
  // 中央文様
  drawFlower(cx, cy, 7, 30, 20);
}
 
void drawTortoiseshell(float cx, float cy, float r, int[] deg_list) {
  float ox = ct[deg_list[0]] * r;
  float oy = -st[deg_list[0]] * r;
  for (int i = 1; i <deg_list.length; i++) {
    float nx = ct[deg_list[i]] * r;
    float ny = -st[deg_list[i]] * r;
    line(cx + ox, cy + oy, cx + nx, cy + ny);
    ox = nx;
    oy = ny;
  }
}
void drawFlower(float cx, float cy, int thin, int len, int len2) {
  noStroke();
  fill(0, 0, 0);
  
  // 上の葉(90〜270)
  // 下の葉(-90〜90)
  beginShape();
  for (int i = 0; i <360; i++) {
    float x = - st[safe_degrees(i * 2)] * len / thin;
    float y = ct[safe_degrees(i)] * len;
    vertex(cx + x, cy + y);
  }
  endShape(CLOSE);
  
  // 右の葉(-90〜90)
  // 左の葉(90〜270)
  beginShape();
  for (int i = 0; i <360; i++) {
    float x = ct[safe_degrees(i)] * len;
    float y = - st[safe_degrees(i * 2)] * len / thin;
    vertex(cx + x, cy + y);
  }
  endShape(CLOSE);
  
  // 左下の葉(90〜270)
  // 右上の葉(-90〜90)
  beginShape();
  for (int i = 0; i <360; i++) {
    float x = - st[safe_degrees(i * 2)] * len2 / thin;
    float y = ct[safe_degrees(i)] * len2;
    float dx = -1 * ONE_DIV_ROOT_2 * (x - y);
    float dy = -1 * ONE_DIV_ROOT_2 * (x + y);
    vertex(cx + dx, cy + dy);
  }
  endShape(CLOSE);
  
  // 右下の葉(90〜270)
  // 左上の葉(-90〜90)
  beginShape();
  for (int i = 0; i <360; i++) {
    float x = ct[safe_degrees(i)] * len2;
    float y = - st[safe_degrees(i * 2)] * len2 / thin;
    float dx = -1 * ONE_DIV_ROOT_2 * (x - y);
    float dy = -1 * ONE_DIV_ROOT_2 * (x + y);
    vertex(cx + dx, cy + dy);
  }
  endShape(CLOSE);
}
 
int safe_degrees(int deg) {
  while (deg>= 360) deg-=360;
  while (deg <0) deg += 360;
  return deg;
}

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

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

武田菱(たけだびし)

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

PLAIN TEXT

Processing:

// 武田菱（たけだびし）
 
float ROOT_3 = (float)Math.sqrt(3);
float ROOT_3_DIV_2 = ROOT_3 / 2.0;
 
int ix = -60;
int iy = -60;
int block_w = 100;
int block_h = 60;
float ey = 10;
float ex = ey * ROOT_3;
 
float ct[] = new float[360];
float st[] = new float[360];
 
void setup() {
  size(400, 400);
  background(0, 0, 0);
  smooth();
  noLoop();
  
  for (int d = 0; d <360; d++) {
    ct[d] = cos(radians(d));
    st[d] = sin(radians(d));
  }
}
 
void draw() {
  background(0, 0, 0);
  
  strokeJoin(MITER);
  
  boolean flag = true;
  for (float y = iy; y <height + block_h; y += (block_h + ey) / 2) {
    float x_base = ix + (flag ? (block_w + ex) / 2 : 0);
    for (float x = x_base; x <width + block_w; x += block_w + ex) {
      drawPattern(x, y, block_w, block_h);
    }
    flag = !flag;
  }
}
 
void drawPattern(float x, float y, float block_w, float block_h) {
  
  float subblock_w = block_w / 2;
  float subblock_h = block_h / 2;
  float cx = x + subblock_w;
  float cy = y + subblock_h;
  int m = 8;
  
  stroke(255, 255, 255);
  strokeWeight(3);
  noFill();
  for (int i = m; i>= 4; i-=2) {
    float w = lerp(0, subblock_w, i / (float)m);
    float h = lerp(0, subblock_h, i / (float)m);
    quad(
      cx, cy - h,
      cx - w, cy,
      cx, cy + h,
      cx + w, cy
    );
  }
  float w = lerp(0, subblock_w, 4 / (float)m);
  float h = lerp(0, subblock_h, 4 / (float)m);
  line(cx - w / 2, cy - h / 2, cx + w / 2, cy + h / 2);
  line(cx + w / 2, cy - h / 2, cx - w / 2, cy + h / 2);
}
 
int safe_degrees(int deg) {
  while (deg>= 360) deg-=360;
  while (deg <0) deg += 360;
  return deg;
}

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

おわりに

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

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

Comments (1)

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

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

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

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

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

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

Comments (0)

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

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

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

っていう告知だけ。

Comments (0)

[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:

PFont font;
PVector position, velocity, acceleration;
final int WIDTH = 250, HEIGHT = 250;
final int STATUS_HEIGHT = 50;
 
void setup() {
  // 画面の初期化
  size(WIDTH, HEIGHT + STATUS_HEIGHT);
  
  noStroke();
  colorMode(RGB, 256);
  background(255, 255, 255);
  
  // フォントの初期化
  font = loadFont("ArialNarrow-14.vlw");
  textFont(font);
  
  // 自機の初期化
  position = new PVector(WIDTH / 2, HEIGHT / 2, 0);
  velocity = new PVector(3, 4, 0);
  acceleration = new PVector(0.01, 0.01, 0);
}
 
void draw() {
  // 背景消去
  fill(255, 255, 255, 30);
  rect(0, 0, WIDTH, HEIGHT);
  fill(255, 255, 255);
  rect(0, HEIGHT, WIDTH, STATUS_HEIGHT);
  
  // 自機描画
  fill(255, 0, 0);
  ellipse(position.x, position.y, 10, 10);
  
  // 速度表示
  fill(0, 0, 0);
  text("Position: " + position, 0, height - STATUS_HEIGHT + 14);
  text("Velocity: " + velocity.mag(), 0, height - STATUS_HEIGHT + 14 * 2);
  text("Acceleration: " + acceleration.mag(), 0, height - STATUS_HEIGHT + 14 * 3);
  
  // 場所の更新
  position.add(velocity);
  if (position.x <= 0 || position.x>= WIDTH) {
    velocity.x *= -1;
    acceleration.x *= -1;
    position.x += velocity.x;
  }
  if (position.y <= 0 || position.y>= HEIGHT) {
    velocity.y *= -1;
    acceleration.y *= -1;
    position.y += velocity.y;
  }
  velocity.add(acceleration);
}

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

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

Comments (0)

次ページへ »

Twitter

jigalorum

関連の記事

カテゴリー

アーカイブ

メタ情報

管理人サイト

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

ミッドチルダ式魔方陣

SF円

最後に

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

青海波(せいがいは)

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

花亀甲（はなきっこう）

武田菱(たけだびし)

おわりに

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

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

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

Twitter

jigalorum

関連の記事

人気の記事

カテゴリー

アーカイブ

メタ情報

管理人サイト

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

ミッドチルダ式魔方陣

SF円

最後に

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

青海波(せいがいは)

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

花亀甲（はなきっこう）

武田菱(たけだびし)

おわりに

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

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

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