0
101
Viewscamera has a sort of fisheye
I am toying around with p5js, and while generating some cubes, it appeared to me that the "camera" the "render" deforms around the edges, kind of like a fisheye to me.
Here is the bit of code :
function setup() {
createCanvas(800, 850, WEBGL);
angleMode(DEGREES);
}
function draw() {
//background color
background("#ece5d8");
//don't draw faces, only vertices
noFill();
//color of the strokes
stroke(0);
//save the following state
push();
//we save that we don't draw, that we face the edge, and that we're at the left
//start drawing at the left
translate(-200, 0, 0);
//draw our cubes
for (let i = 0; i < 10; i++) {
push();
translate(i * 150, 0, 0);
box(150);
pop();
}
pop();
}
I only translate and never rotate or anything, why aren't the cube perfectly aligned with their edges, and why is it curving ?
Thanks
1 answers
Answer question0
In WEBGL mode the default camera projection is perspective().
The edges don't curve like they would with fish-eye lens, they are straight, but the edge dimensions change based on depth.
If you want to render the cubes and have the edges simply use a parallel projection using ortho():
function setup() {
createCanvas(800, 850, WEBGL);
ortho(-width / 2, width / 2, height / 2, -height / 2, -3000, 3000);
angleMode(DEGREES);
}
function draw() {
//background color
background("#ece5d8");
orbitControl();
//don't draw faces, only vertices
noFill();
//color of the strokes
stroke(0);
//save the following state
push();
//we save that we don't draw, that we face the edge, and that we're at the left
//start drawing at the left
translate(-200, 0, 0);
//draw our cubes
for (let i = 0; i < 10; i++) {
push();
translate(i * 150, 0, 0);
box(150);
pop();
}
pop();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>Note Based on the dimensions and positioning of the boxes I've increased near/far clipping distances (last arguments of ortho()). I've also added orthoControl(): this is totally optional, but helpful to illustrate the ortho view (since by default a front view will look the same as using 2D rect() calls )