プログラミングB #12

#12 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表現


  • p5.jsはP2D(デフォルトレンダラー)とWEBGLという2つのレンダリングモードがある.
  • キャンバス上でWEBGLの「コンテキスト」を有効にすることで2Dと3Dの両方で描画できる.
  • 2Dと3Dの両方で描画でWEBGLを有効にするには、createCanvas()関数で3番目のパラメータとして指定する.

function setup(){
    //レンダリングオプションを変更する
    createCanvas(400, 400, WEBGL);