[p5.js 2.0 Beta Bug Report]: Update examples that use createCamera() to explicitly call setCamera()

[Forchapeatl]

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
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

No response

Web browser and version

No response

Operating system

No response

Steps to reproduce this

Steps:

1. Build on branch dev-2.0
2. the camera functions so not work as expected from the reference https://p5js.org/reference/p5/p5.Camera/

Snippet:

let cam;
let delta = 0.001;

function setup() {
  createCanvas(100, 100, WEBGL);

  // Create a p5.Camera object.
  cam = createCamera();

  // Place the camera at the top-center.
  cam.setPosition(0, -400, 800);

  // Point the camera at the origin.
  cam.lookAt(0, 0, 0);

  describe(
    'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'
  );
}

function draw() {
  background(200);

  // Turn the camera left and right, called "panning".
  cam.pan(delta);

  // Switch directions every 120 frames.
  if (frameCount % 120 === 0) {
    delta *= -1;
  }

  // Draw the box.
  box();
}

[webermayank]

Hey @Forchapeatl
Yes the camera is not moving as expected using tilit() and pan()
If it is okay with you , i would like to work on this issue

[Forchapeatl]

yes, you work on it. Thank you

[davepagurek]

Thanks for finding this @Forchapeatl! I think this might be an intentional change -- previously, createCamera would automatically set the new camera as the current camera, but that leads to unexpected behaviour sometimes, so in 2.0 we've updated how things work, and now you have to call setCamera(cam) after creating it. I think things work as expected again after doing that.

I'm going to turn this into a documentation issue (cc @perminder-17 and @GregStanton) to update the examples to include a setCamera call.

[perminder-17]

Hi @webermayank should I assign you the issue? Are you still interested in updating the docs?

[webermayank]

@perminder-17 Thank you for considering me Yes i would love to do this task

[Forchapeatl]

hello @webermayank . From the snippet above , the setup function has to be updated like the example below

function setup() {
  createCanvas(100, 100, WEBGL);

  // Create a p5.Camera object.
  cam = createCamera();
+  setCamera(cam)

  // Place the camera at the top-center.
  cam.setPosition(0, -400, 800);

  // Point the camera at the origin.
  cam.lookAt(0, 0, 0);

  describe(
    'A white cube on a gray background. The cube goes in and out of view as the camera pans left and right.'
  );
}

It has to be done in the dev 2.0 branch not the main branch

[webermayank]

@Forchapeatl
Yes i already done that part of the code but i though to test some code before actually pushing it and i got some error while running the existing example like https://github.com/processing/p5.js/blob/dev-2.0/src/webgl/p5.Camera.js#L239-L285

the error is regarding the font = await loadFont('assets/inconsolata.otf');
error - No glyph data for 'inconsolata', retrying as FontFace and Failed to decode downloaded font: http://localhost:5173/assets/inconsolata.otf

is it still under development phase ? because many example have some kind of issue when i run them in sketch.js

[davepagurek]

@webermayank The example code is referencing this assets folder here: https://github.com/processing/p5.js/tree/dev-2.0/test/unit/assets

Are you running your test code via preview/index.html and npm run dev? If so, you may have to make an assets folder inside of preview and paste inconsolata.otf into there.