Moving the camera around

p5.js Coding Questions
1

I’m trying to move the the camera (with the keyboard) in my 3d sketch but can’t get things working.
i’ve tried with and without the Camera() function
the result is always a mess !
Could someone give me an hint : for example if I turn left by an angle of 0.1 rad what argument of the function camera should I move ?
With this help I could hopefully do the rest (moving forewards and backwards)

Cheers

1 Like
2

First off is it essential that you use the keyboard? Because if you’re willing to use the mouse. I suggest orbitControl() it’s plug and play.

If you’d like to use the keyboard and you don’t need full control. I suggest rotateX(), rotateY(), and rotateZ().

If you would like full control camera() is the function to use. However it’s difficult to understand. The first 3 numbers are the coordinates of the camera itself. The next 3 are the coordinates of where it’s looking normally you want 0, 0, 0. The last 3 are the vector indicating camera’s yaw, pitch, and roll. This stack overflow describes the method that’s basically going on behind the scenes in p5. I found it helpful.

I would use a vector for each of these sets that might change and then update them. Below is a basic sketch that uses the camera() function and a vector to store the location. It’s working correctly but it might not seem like it is because it’s not intuitive at all. To get what you want you’ll have to do a lot of trigonometry. That’s why I’d suggest using some of the built in methods if possible so you don’t have to figure it out yourself. If that is something you want to do I suggest looking at how the orbitControl() method is implemented and working from there.

let cameraLocation;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  cameraLocation = createVector(0, 0, (height/2.0) / tan(PI*30.0 / 180.0));
}

function draw() {
  background(51);
  updateCameraLocation();
  // console logging camera location helps to conceptialize what's happening
  // console.log(`Camera: x:${cameraLocation.x}, y:${cameraLocation.y}, z:${cameraLocation.z}`)
  camera(cameraLocation.x, cameraLocation.y, cameraLocation.z, 0, 0, 0, 0, 1, 0);
  normalMaterial();
  torus(50, 15);
}

function updateCameraLocation() {
  if (keyIsDown(LEFT_ARROW)) cameraLocation.x -= 5;
  if (keyIsDown(RIGHT_ARROW)) cameraLocation.x += 5;
  if (keyIsDown(UP_ARROW)) cameraLocation.z -= 5;
  if (keyIsDown(DOWN_ARROW)) cameraLocation.z += 5;
}
2 Likes
3

First of all : tahnk you so much for the time you took to answer my question !
I apreciate that very much

If I modify your code a little I get the right result when the camera moves left or right !

let cameraLocation;
let sketchLocation;


function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  cameraLocation = createVector(0, 0, (height/2.0) / tan(PI*30.0 / 180.0));
  sketchLocation = createVector(0, 0,0);
}

function draw() {
  background(51);
  updateCameraLocation();
  camera(cameraLocation.x, cameraLocation.y, cameraLocation.z, sketchLocation.x, sketchLocation.y, sketchLocation.z, 0, 1, 0);
  normalMaterial();
  torus(50, 15);
}

function updateCameraLocation() {
  if (keyIsDown(LEFT_ARROW)) sketchLocation.x -= 5;
  if (keyIsDown(RIGHT_ARROW)) sketchLocation.x += 5;
  if (keyIsDown(UP_ARROW)) cameraLocation.z -= 5;
  if (keyIsDown(DOWN_ARROW)) cameraLocation.z += 5;
}
2 Likes
4

I wonder if it would not be better to make an array of objects (like the torus)
and show move rotate them according to the viewer point of view.
Because the torus should not be visible if it is behing my “back” and if I turn back passed it I should see then other side and so on

5

Actually processing should take care of this automatically since it handles where everything is in the 3D scene / room and where the camera is and where it looks at.

Note that the solution above is confusing imho since the crs change both camera pos and camera look at.

one sculpture / center

When you have one sculpture that your sketch produces and you always want to look at it, your camera lookAt is fixed but your camera position is variable. The crs keys should then only change the latter.

You could also imagine the camera is traveling on a circle around the sculpture and the camera changes its angle, radius (and height).

Many sculptures or centers

We could also image a first person perspective (fps) camera where you can run straight or in curves but always look ahead. Like in a fps shooter game. In this scenario you can run around freely (= as in move your camera Position) and go and look everywhere. Good when you have several sculptures standing around in different spots or whatever.

Chrisir

6

That’s the later I need

7

With some luck there is a library around as has been said

In processing java that would be queasycam don‘t know about p5.js

8

I have just forked https://github.com/Maximilian-R/first-person-camera
It’s a nice work Maximilian has done. I’d like the camera to rotate with left and right keys instead of translating the scene it seems he is also working on it

1 Like
9

https://philippemarcmeyer.github.io/first-person-camera/

use WASD or arrow keys

99% of the work by Maximillian

1 Like
10

There is p5 librairy : https://github.com/diwi/p5.EasyCam
I don’t know if it’s possible to parameter it to be used as a first person camera
it’s mouse based ans everything revolves around the center