このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の torus関数を説明します。

torus()

説明文

指定された半径(トーラスの中心点とチューブの中心点を結ぶ長さ)とチューブ半径でトーラスを描画します

DetailX と detailY は, トーラスのx方向とy方向の分割数を指定します。分割数を増やすとトーラスがより滑らかに見えます。 detailX と detailY のデフォルト値と最大値はそれぞれ24と16です。それらを4や6などの比較的小さな値に設定すると, トーラス以外の新しい形状を作成できます。

構文

torus([radius], [tubeRadius], [detailX], [detailY])

パラメタ

radius
Number：トーラスの中心点とチューブの中心点を結ぶ長さ(オプション、デフォルト値は50)
tubeRaduis
Number：チューブの半径(オプション、デフォルト値は10)
detailX
Integer：x方向の分割数。分割数が大きいほど滑らかにまる。(オプション、デフォルト値は24)
detailY
Integer：y方向の分割数。分割数が大きいほど滑らかにまる。(オプション、デフォルト値は16)

例1

function setup(){
  createCanvas(100, 100, WEBGL);
}

function draw(){
  background(205, 102, 94);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  torus(30, 15); // 半径30、チューブ径15
}

実行結果

例2

//スライダを動かして, x(円周)方向の分割数を変更します
let detailX;
function setup(){
  createCanvas(100, 100, WEBGL);
  // スライダの最低値3、最大値24、デフォルト値3を指定
  detailX = createSlider(3, 24, 3);   detailX.position(10, height + 5);
  detailX.style( 'width',  '80px');
}

function draw(){
  background(205, 102, 94);
  rotateY(millis()/ 1000);
  // 半径30、チューブ径15、x(円周)方向の分割数はスライダ指定値、
  // y方向の分割数は12を設定
  torus(30, 15, detailX.value(), 12);
}

実行結果

著作権

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) に従います。