I have this p5 project where using camera to output the feed from it in my game, but the camera output seems to say behind game and idk how to make it appear as a first layer to the top of the game. How can I do it? TIA!
Code for camera, I am using but it works here, since there is no game here
let cap;
function setup() {
createCanvas(400, 400);
cap = createCapture(VIDEO);
cap.hide();
imageMode(CENTER);
}
function draw() {
background(50);
image(cap, mouseX, mouseY, 160, 120);
}
In p5.js there are no layers or stacking order. In 2d mode elements are stacked in the order they are drawn. So the first thing you draw will be the bottom most, and the last thing you draw will be the top most. In WEBGL mode everything you draw does have a z position and each element may be hidden or clipped if it is behind things already drawn in the same frame. In between frames something called the "depth buffer" is cleared so that all elements drawn on the next frame will be displayed without regard for the elements drawn in the previous frame.
You can actually clear the depth buffer during a single frame to simplify layering things in WEBGL. For more info see this answer.