プログラミングB #13

#13 3Dのプログラミング


高尾俊介(takawo@konan-wu.ac.jp)
甲南女子大学 文学部 メディア表現学科 講師


雑談



今日の授業内容


  • p5.jsで3DCGを扱う
  • 2Dのグラフィックスより複雑なのでしっかり理解しながら進めましょう

作例

復習:2Dでの描画



function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  angleMode(DEGREES);
}

function draw() {
  background(0, 0, 10);

  push(); //原点位置を保存
  translate(width / 2, height / 2); //原点位置を移動
  rotate(frameCount); //原点を中心に回転
  rectMode(CENTER);
  stroke(0,0,100);
  fill(0,80,100);
  rect(0, 0, 200, 200);
  pop(); //原点位置を復帰
}

p5.jsでの3D表現