b-11 3Dの座標を使う

2011年12月12日

このエントリーをはてなブックマークに追加

3Dの回転(x軸, y軸, z軸)

2Dの回転をもとに動きを付けてみる

void setup() {
  size(100, 100);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotate(frameCount*PI/60);
  rect(0, 0, width/2, height/2);
}

x軸 rotateX

void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateX(frameCount*PI/60);
  rect(0, 0, width/2, height/2);
}

y軸 rotateY

void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateY(frameCount*PI/60);
  rect(0, 0, width/2, height/2);
}

矩形の描画位置を変更した場合

void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateY(frameCount*PI/60);
  rect(width/2, 0, width/2, height/2);
}

z軸 rotateZ

void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateZ(frameCount*PI/60);
  rect(0, 0, width/2, height/2);
}

x軸, y軸の両方

void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateX(frameCount*PI/60);
  rotateY(frameCount*PI/60);
  rect(0, 0, width/2, height/2);
}

3Dの移動

z軸方向に移動したい場合は、translate関数の引数を1つ追加する。

void setup() {
  size(100, 100, P3D);
  rectMode(CENTER);
}

void draw() {
  background(0); 
  translate(width*2/5, height/2);
  rotateY(PI/6);
  for (int i = 0; i < 5; i++) {
    pushMatrix();
    translate(0, 0, i*10);
    rotateZ(frameCount*(i+1)*PI/600);
    fill(255, 51);
    rect(0, 0, width/2, height/2);
    popMatrix();
  }
}

3Dのオブジェクトを描画する

直方体 box

void setup() {
  size(100, 100, P3D);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateY(frameCount*PI/60);
  box(40, 30, 20); // 幅, 高さ, 奥行きの順。引数を1つにすると立方体になる。
}

sphere

lights関数を用いると光が当たっている状態をシミュレートできる。

void setup() {
  size(100, 100, P3D);
}

void draw() {
  background(0);
  lights();
  translate(width/2, height/2);
  rotateY(frameCount*PI/120);
  translate(50, 0);
  noStroke();
  sphere(10); //半径30pxの球
}
このエントリーをはてなブックマークに追加

Archives

以下の記事は、2011年度に筆者が大学での授業で利用していた補足資料です。現在、これらをベースに本ウェブサイトを再構築しています。完了するまで一時的に掲載します。


About

筆者: @mathatelle

ジェネラティブ・アート -Processingによる実践ガイド Processing: A Programming Handbook for Visual Designers and Artists Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction (Morgan Kaufmann Series in Computer Graphics and Geometric Modeling) Processingをはじめよう (Make: PROJECTS) Built with Processing[Ver. 1.x対応版] -デザイン/アートのためのプログラミング入門 Processing アニメーションプログラミング入門 デザイン言語 Processing入門 - 楽しく学ぶコンピュテーショナルデザイン Processingプログラミング入門―Javaベースのオープンソース統合開発環境 ProcessingでかんたんAndroidプログラミング FORM+CODE -デザイン/アート/建築における、かたちとコード Form+Code in Design, Art, and Architecture (Design Briefs) Generative Art: A Practical Guide Using Processing Generative Gestaltung ビジュアライジング・データ ―Processingによる情報視覚化手法 ARプログラミング—Processingでつくる拡張現実感のレシピ— Arduinoをはじめよう 第2版 (Make:PROJECTS) +GAINER―PHYSICAL COMPUTING WITH GAINER Beyond Interaction ―メディアアートのためのopenFrameworksプログラミング入門 ビューティフルビジュアライゼーション ビジュアル・コンプレキシティ ―情報パターンのマッピング