Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example on the learn page is broken #1467

Open
1 of 17 tasks
diyaayay opened this issue Dec 14, 2023 · 8 comments
Open
1 of 17 tasks

Example on the learn page is broken #1467

diyaayay opened this issue Dec 14, 2023 · 8 comments
Labels

Comments

@diyaayay
Copy link

diyaayay commented Dec 14, 2023

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • 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:
issue1

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

@diyaayay diyaayay added the Bug label Dec 14, 2023
Copy link

welcome bot commented Dec 14, 2023

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 diyaayay changed the title Due to #6621, example on the learn page is broken Due to #6621, example on the learn page is broken Dec 14, 2023
@diyaayay
Copy link
Author

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

@inaridarkfox4231
Copy link

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

@diyaayay diyaayay changed the title Due to #6621, example on the learn page is broken Due to #6216, example on the learn page is broken Dec 14, 2023
@inaridarkfox4231
Copy link

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
Copy link

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
Copy link

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

さくれい1

さくれい2

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 diyaayay changed the title Due to #6216, example on the learn page is broken Example on the learn page is broken Dec 14, 2023
@diyaayay
Copy link
Author

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

@davepagurek
Copy link
Contributor

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.

@davepagurek davepagurek transferred this issue from processing/p5.js Dec 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants