(p5camera).camera

def setup
  createCanvas(100, 100, WEBGL)
  @cam = createCamera
end

def draw
  background(204)
  @cam.camera(0, 0, 150 + sin(frameCount * 0.03) * 40, 0, 0, 0, 0, 1, 0)
  plane(10, 10)
end
def setup
  @sliderGroup = []
  @h = 15

  createCanvas(100, 100, WEBGL)
  @cam = createCamera
  # create sliders
  (0..5).each do |i|
    if i == 2
      @sliderGroup[i] = createSlider(1000, 2000, 1500)
    else
      @sliderGroup[i] = createSlider(-400, 400, 0)
    end
    h = map(i, 0, 6, 5, 85)
    @sliderGroup[i].position(10, height + @h * i)
    @sliderGroup[i].style('width', '80px')
  end
end

def draw
  background(60)
  # assigning sliders' value to each parameters
  x = @sliderGroup[0].value
  y = @sliderGroup[1].value
  z = @sliderGroup[2].value
  centerX = @sliderGroup[3].value
  centerY = @sliderGroup[4].value
  centerZ = @sliderGroup[5].value
  @cam.camera(x, y, z, centerX, centerY, centerZ, 0, 1, 0)
  stroke(255)
  fill(255, 102, 94)
  box(85)
end

p5.jsリファレンス(参考情報)

[p5.js] (p5.Camera.obj).camera

概要

カメラの位置などを設定します。

書式

obj.camera([x] [, y] [, z] [, centerX] [, centerY] [, centerZ] [, upX] [, upY] [, upZ])

引数

引数名内容備考オプションデフォルト値
xカメラの位置の x座標カメラが置かれている位置0
yカメラの位置の y座標0
zカメラの位置の z座標800
centerXカメラの視界の中心位置の x座標カメラがフォーカスしている位置0
centerYカメラの視界の中心位置の y座標0
centerZカメラの視界の中心位置の z座標0
upXカメラの上向き方向をあらわすベクトルの x軸成分カメラの上向き方向0
upYカメラの上向き方向をあらわすベクトルの y軸成分1
upZカメラの上向き方向をあらわすベクトルの z軸成分0

戻値

obj (メソッドを呼び出した p5cameraオブジェクト自身)

備考

・p5.jsのバージョンアップに伴い、以下のようにデフォルト値が変更されています。

引数名内容デフォルト値旧仕様のデフォルト値
zカメラの位置の z座標800(height/2) / tan(PI/6)

・rbCanvas/p5の v0.5.1までとは 3Dの見え方が若干異なりますので、
 (p5camera).perspectiveメソッドや (p5camera).frustumメソッドの
 デフォルト値変更の情報もあわせて参照して、各パラメータなどを調整してください。

関連

camera
(p5camera).setPosition
(p5camera).lookAt