P5.js 日本語リファレンス(debugMode) #JavaScript

このページでは「P5.js 日本語リファレンス」の debugMode 関数を説明します。

debugMode()

説明文

debugMode() は「地面」がスケッチのどこにあるかを示すグリッドと +X、+Y および +Z 方向を示す軸アイコンを追加することで、3D空間を視覚化するのに役立ちます。この関数は、パラメータなしで呼び出してデフォルトのグリッドと軸のアイコンを作成するか、例に従って呼び出してグリッドや軸アイコンのサイズと位置をカスタマイズできます。グリッドは、最後に設定されたストロークの色と太さを使用して描画されます。これらのパラメータを指定するには、draw() の最後の直前に stroke() およびstrokeWeight() の呼び出しを追加します。

デフォルトでは、グリッドは XZ 平面に沿ってスケッチの原点 (0,0,0) を通り、軸アイコンは原点からオフセットされます。グリッドと軸アイコンの両方が、現在のキャンバスサイズに従ってサイズ変更されます。グリッドはデフォルトのカメラビューと平行に実行されるため、グリッドの完全なビューを許可するには、orbitControl() と一緒に debugMode() を使用すると便利な場合があります。

構文

debugMode()

debugMode(mode)

debugMode(mode, [gridSize], [gridDivisions], [xOff], [yOff], [zOff])

debugMode(mode, [axesSize], [xOff], [yOff], [zOff])

debugMode([gridSize], [gridDivisions], [gridXOff], [gridYOff], [gridZOff], [axesSize], [axesXOff], [axesYOff], [axesZOff])

パラメタ

mode

定数：GRID または AXES。省略時は GRID と AXES の両方を指定するのと同じ
gridSize

Number：グリッドの片側のサイズ(オプション)
gridDivisions

Number：グリッドの分割数(オプション)
xOff

Number：原点からのX軸オフセット(オプション)
yOff

Number：原点からのY軸オフセット(オプション)
zOff

Number：原点からのZ軸オフセット(オプション)
axesSize

Number：軸アイコンのサイズ(オプション)
gridXOff

Number：(オプション)
gridYOff

Number：(オプション)
gridZOff a
Number：(オプション)
axesXOff

Number：(オプション)
axesYOff

Number：(オプション)
AxesZOff

Number：(オプション)

例1

function setup() {
  createCanvas(100, 100, WEBGL);
 // camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial() ;

  // パラメータ指定せず、グリッドと軸アイコンを描画します
  debugMode() ;
}

function draw() {
  background(200);
  orbitControl(5,5) ;
  box(15, 30);
}

実行結果

例2

function setup() {
  createCanvas(100, 100, WEBGL);
//  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial();

  // XZ平面にグリッドを描画します(軸アイコンは表示しません)
  debugMode(GRID);
}

function draw() {
  background(200);
  orbitControl(5, 5) ;
  box(15, 30);
}

実行結果

例3

function setup() {
  createCanvas(100, 100, WEBGL);
//  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial() ;

  // 軸アイコンを描画します(グリッドは表示しません)
  debugMode(AXES);
}

function draw() {
  background(200);
  orbitControl(5, 5) ;
  box(15, 30);
}

実行結果

例4

function setup() {
  createCanvas(100, 100, WEBGL);
//  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial() ;

  // グリッド表示のみ、グリッドサイズ(100)、グリッド分割数(4)、グリッドのZ方向オフセット(-50)
  debugMode(GRID, 100, 4, 0, 0, -50);
}

function draw() {
  background(200);
  orbitControl(5, 5) ;
  box(15, 30);
}

実行結果

例5

function setup() {
  createCanvas(100, 100, WEBGL);
  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial();

  // グリッドサイズ(100)、
  // グリッド分割数(4)、
  // グリッドXオフセット(0)、
  // グリッドYオフセット(0)、
  // グリッドZオフセット(0)、
  // 軸アイコンサイズ(20)、
  // 軸アイコンXオフセット(0)、
  // 軸アイコンYオフセット(-40)、
  // 軸アイコンZオフセット(0)  
  debugMode(100, 4, 0, 0, 0, 20, 0, -40, 0);
}

function draw() {
  noStroke() ;
  background(200);
  orbitControl(5, 5);
  box(15, 30);

  //グリッドの線の色と太さを設定します
  stroke(255, 0, 150);
  strokeWeight(0.8);
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。