Example on the learn page is broken

[diyaayay]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [x] WebGL
• [ ] Build Process
• [ ] Unit Testing
• [ ] Internalization
• [ ] Friendly Errors
• [ ] Other (specify if possible)

p5.js version

1.9.0

Web browser and version

Chrome

Operating System

Windows11

Steps to reproduce this:

Steps:

1. Go to : https://p5js.org/learn/getting-started-in-webgl-appearance.html
2. The example explaining, how one camera can be active at a time, the default single perspective camera can be changed by calling either perspective() (with new parameters) or ortho() fails drawing when uncommented to change the perspective camera to orthographic.

Snippet:

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  debugMode()
  // uncomment to change the perspective camera to orthographic
  // ortho();

  // setting initial camera position
  camera(200,-40, 200);

  describe('a 3d scene with a sphere on the bottom and box on the top');
}

function draw() {
  background(220);

  let sphere_x = 0;
  let sphere_y = 90;
  let sphere_z = 0;

  let box_x = 0;
  let box_y = -90;
  let box_z = 0;

  // uncomment to point camera at sphere
  // camera(
  //   400,-40, 400, // camera position
  //   sphere_x, sphere_y, sphere_z // position to look at
  // );

  // uncomment to point camera at box
  // camera(
  //   400,-40, 400, // camera position
  //   box_x, box_y, box_z // position to look at
  // );

  push();
  translate(sphere_x, sphere_y, sphere_z);
  sphere(40,8);
  pop();

  push();
  translate(box_x, box_y, box_z);
  box();
  pop();
}

Screenshots:

Uncommenting ortho as directed in the example to demonstrate the change of default perspective, the drawing fails.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[diyaayay]

Maybe fixed by processing/p5.js#6621, which I'm currently working on.

[inaridarkfox4231]

sorry, but ”due to processing/p5.js#6216” is correct... I think. not processing/p5.js#6621.

[inaridarkfox4231]

I think the problem is probably unrelated to processing/p5.js#6216. The value of eyeZ is set to 200 by the function, so it will not be 800. I don't know why it's not displayed, but it's probably not related to processing/p5.js#6216.

[inaridarkfox4231]

In processing/p5.js#6216, changes were made regarding the initial settings when no camera is specified. This affects code that does not use camera functions, such as the following:

function setup() {
  createCanvas(400, 400, WEBGL);
  ortho();
}
function draw() {
  background(220);
  box(100);
}

However, this code specifies the camera in setup(), so processing/p5.js#6216 is irrelevant. The problem with this code is that the canvas size is 150x220. As a result, the value of far when ortho() is called without arguments will be 220. On the other hand, the distance between the viewpoint and the center is about 280, which is greater than 220. Therefore it is not displayed.

The current ortho() specification specifies the far value according to the canvas size. However, this code determines the camera position using absolute values, so the example settings are inappropriate.

To resolve this, you will need to modify the example or modify the specifications of ortho(). At least processing/p5.js#6216 is completely unrelated, so I think it would be safer to leave it out of the title.

I'll leave it up to you to decide what to do with this issue. I'm not interested in this issue, so I won't get involved any further.

[inaridarkfox4231]

However, there are a few examples that are influenced by processing/p5.js#6216.

In these examples, the objects are unnecessarily enlarged. The cause is that the camera's default fov value was changed by processing/p5.js#6216. So, instead of changing the title, I think there is a way to modify these examples. In any case, the example given at the beginning of this issue has nothing to do with processing/p5.js#6216.

[diyaayay]

I would like to work on this issue. Waiting for a reviewer to confirm and direct.

[davepagurek]

I think that's correct, the examples can be modified, either by changing the camera position to be farther back, or changing the camera perspective.

The source code for those are in the p5.js-website repo over here: https://github.com/processing/p5.js-website/blob/main/src/templates/pages/learn/getting-started-in-webgl-coords-and-transform.hbs I'll transfer the issue to that repo, as that's where the changes will need to be made.