| description |
<p>Sets an orthographic projection for the camera.</p>
<p>In an orthographic projection, shapes with the same size always appear the
same size, regardless of whether they are near or far from the camera.</p>
<p><code>myCamera.ortho()</code> changes the camera’s perspective by changing its viewing
frustum from a truncated pyramid to a rectangular prism. The frustum is the
volume of space that’s visible to the camera. The camera is placed in front
of the frustum and views everything within the frustum. <code>myCamera.ortho()</code>
has six optional parameters to define the viewing frustum.</p>
<p>The first four parameters, <code>left</code>, <code>right</code>, <code>bottom</code>, and <code>top</code>, set the
coordinates of the frustum’s sides, bottom, and top. For example, calling
<code>myCamera.ortho(-100, 100, 200, -200)</code> creates a frustum that’s 200 pixels
wide and 400 pixels tall. By default, these dimensions are set based on
the sketch’s width and height, as in
<code>myCamera.ortho(-width / 2, width / 2, -height / 2, height / 2)</code>.</p>
<p>The last two parameters, <code>near</code> and <code>far</code>, set the distance of the
frustum’s near and far plane from the camera. For example, calling
<code>myCamera.ortho(-100, 100, 200, -200, 50, 1000)</code> creates a frustum that’s
200 pixels wide, 400 pixels tall, starts 50 pixels from the camera, and
ends 1,000 pixels from the camera. By default, <code>near</code> and <code>far</code> are set to
0 and <code>max(width, height) + 800</code>, respectively.</p>
|
| example |
<div>
<code>
// Double-click to toggle between cameras.
let cam1;
let cam2;
let isDefaultCamera = true;
function setup() {
createCanvas(100, 100, WEBGL);
// Create the first camera.
// Keep its default settings.
cam1 = createCamera();
// Create the second camera.
cam2 = createCamera();
// Apply an orthographic projection.
cam2.ortho();
// Set the current camera to cam1.
setCamera(cam1);
describe('A row of white cubes against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');
}
function draw() {
background(200);
// Translate the origin toward the camera.
translate(-10, 10, 500);
// Rotate the coordinate system.
rotateY(-0.1);
rotateX(-0.1);
// Draw the row of boxes.
for (let i = 0; i < 6; i += 1) {
translate(0, 0, -40);
box(10);
}
}
// Toggle the current camera when the user double-clicks.
function doubleClicked() {
if (isDefaultCamera === true) {
setCamera(cam2);
isDefaultCamera = false;
} else {
setCamera(cam1);
isDefaultCamera = true;
}
}
</code>
</div>
<div>
<code>
// Double-click to toggle between cameras.
let cam1;
let cam2;
let isDefaultCamera = true;
function setup() {
createCanvas(100, 100, WEBGL);
// Create the first camera.
// Keep its default settings.
cam1 = createCamera();
// Create the second camera.
cam2 = createCamera();
// Apply an orthographic projection.
cam2.ortho();
// Set the current camera to cam1.
setCamera(cam1);
describe('A row of white cubes slither like a snake against a gray background. The camera toggles between a perspective and an orthographic projection when the user double-clicks.');
}
function draw() {
background(200);
// Translate the origin toward the camera.
translate(-10, 10, 500);
// Rotate the coordinate system.
rotateY(-0.1);
rotateX(-0.1);
// Draw the row of boxes.
for (let i = 0; i < 6; i += 1) {
push();
// Calculate the box's coordinates.
let x = 10 * sin(frameCount * 0.02 + i * 0.6);
let z = -40 * i;
// Translate the origin.
translate(x, 0, z);
// Draw the box.
box(10);
pop();
}
}
// Toggle the current camera when the user double-clicks.
function doubleClicked() {
if (isDefaultCamera === true) {
setCamera(cam2);
isDefaultCamera = false;
} else {
setCamera(cam1);
isDefaultCamera = true;
}
}
</code>
</div> |
|