How to track sphere with camera in p5.js? - p5.js

Question

I'm trying to replicate the game "slope" using p5.js web editor because I'm on a school Chromebook and no other way of coding. So far I have the camera following the sphere but it seems that once the sphere goes so far the camera retracts and the sphere disappears. The cube is there as a reference to see if the sphere is moving which it is but then it gets buggy after 10 seconds. Any ideas on how to fix this and have the camera continuously following the sphere as it travels down the z-axis. Once the sphere reaches a certain point the whole thing seems to invert.
let cam;
//let delta = 0.01
var ballX = 0;
var ballY = 0;
var ballZ = 0;
var score = 1;
var speed = 3;
//var speedZ = 2;
function setup() {
createCanvas(500, 500, WEBGL);
translate(0, 0, 0)
cam = createCamera()
}
function draw() {
background(200);
normalMaterial();
//camera
camera(ballX, ballY, ballZ - 500, ballX, ballY, 0, 0, 50, 0);
//test
box(20);
if (keyIsDown(RIGHT_ARROW)) {
ballX -= speed;
} else if (keyIsDown(LEFT_ARROW)) {
ballX += speed;
}
push();
translate(ballX, ballY, ballZ);
sphere(50);
pop();
ballZ += speed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

Answer 1

The fourth, fifth and sixth argument that the camera() function receives, mark the point that the camera is pointing to. In your case, the camera is always pointing to z = 0 which is why when the camera's z coordinate reaches zero, the sphere "disappears" (figuratively, the camera rotates 180 degrees).
Modify the camera's position like this:
camera(ballX, ballY, ballZ - 500, ballX, ballY, ballZ, 0, 50, 0);
so it's set to always point towards the sphere.
Here's your code lightly modified and with a small function that allows to check the "review mirror" when pressing backspace by alternating the cameras z-axis target between the sphere's position and 0
var ballX = 0;
var ballY = 0;
var ballZ = 0;
var speed = 3;
function setup() {
createCanvas(500, 500, WEBGL);
translate(0, 0, 0)
}
function draw() {
background(200);
//camera
camera(ballX, ballY, ballZ -500, ballX, ballY, mirror ? 0 : ballZ, 0, 50, 0);
//test
fill('red');
box(20);
normalMaterial();
if (keyIsDown(RIGHT_ARROW)) {
ballX -= speed;
} else if (keyIsDown(LEFT_ARROW)) {
ballX += speed;
}
push();
translate(ballX, ballY, ballZ);
sphere(50);
pop();
ballZ += speed;
}
let mirror = false;
function keyPressed(){
if(keyCode === BACKSPACE)
mirror =!mirror;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>