Daily Creative Coding

元「30 min. Processing」。毎日、Creative Codingします。

p5.jsの3D基本図形

/*
 * 3D primitives
 *
 * @author aadebdeb
 * @date 2017/02/03
 */

var X_SPACE = 200;
var Y_SPACE = 250;
var X_NUM = 4;
var Y_NUM = 2;

function setup() {
  createCanvas(800, 600, WEBGL);
}

function draw() {
  background(255);

  push();
  translateTo(0, 0);
  plane(100, 100);  
  pop();
  
  push();
  translateTo(1, 0);
  box(100);
  pop();
  
  push();
  translateTo(2, 0);
  sphere(50);
  pop();
  
  push();
  translateTo(3, 0);
  cylinder(50, 100);
  pop();
  
  push();
  translateTo(0, 1);
  cone(50, 100);
  pop();
  
  push();
  translateTo(1, 1);
  ellipsoid(50, 70, 100);
  pop();
  
  push();
  translateTo(2, 1);
  torus(50, 20);
  pop();

}

function translateTo(x, y) {
  translate((x - (X_NUM - 1) / 2) * X_SPACE, (y - (Y_NUM - 1) / 2) * Y_SPACE);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  rotateZ(frameCount * 0.01);
}
f:id:aa_debdeb:20170129211710p:plain