Need help! Beginner! How to capture image and use the image

p5.js Coding Questions
1

Hello! I am trying to make an app for my first coding course but I am having some problems. By far I have made the first page, using camera and saving the picture. But my next step would be to USE the image that I took and add some 3D objects on it but I don’t know how to do it. Any help would be appreciated.

This is the code:

var rotX = 0;
var rotY = 0;
var rotZ = 0;
var _text;
let capture;
var buttonTakePicture;
var buttonSavePicture;
var PicTaken;
var mode = 0;
var confirmar
TakeSnap = false;

var screen = 0; // specifies which screen you are in

function setup() {

createCanvas(500, 700, WEBGL);
smooth();

_text = createGraphics(400,300);

_text.fill(100);
_text.textAlign(CENTER);
_text.textSize(50);
_text.text(‘Design’, 200, 50);
_text.text(‘My Home’, 200, 100);
_text.textSize(20);
_text.text(‘Press to start’, 200, 270);

capture = createCapture(VIDEO);

capture.hide();

capture.size(800, 640);

buttonTakePicture = createButton(“Use this picture”);
buttonTakePicture.position(width/2, height - 10);
buttonTakePicture.mousePressed(takeSnap);
buttonTakePicture.hide(); // hide button for now

buttonSavePicture = createButton(“Save picture”);
buttonSavePicture.position(width/2 - 100, height - 10);
buttonSavePicture.mousePressed(saveSnap);
buttonSavePicture.hide(); // hide button for now
}

function draw() {

if (screen == 0) { // draw stuff depending on screen value.
background(180, 80, 80);

push();
translate(0, 0, -50);
noStroke();
fill(200, 60, 40);
rect(-250, -380, 500, 800);
pop();

fill(255);
push();
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(random(80), random(80), random(80));
frameRate(25);
box(100);
pop();

push();
ambientLight(random(250), random(230));
noStroke();
fill(20);
ellipse(0, 230, 100, 100);
fill(250);
ellipse(0, 230, 80, 80);
fill(0);
ellipse(0, 230, 70, 70);
pop();

texture(_text);
noStroke();
plane(600, 600);

} else if (screen == 1) { // draw stuff depending on screen value.
background(180, 80, 80);
image(capture, -capture.width/2, -capture.height/2, capture.width, capture.height);
}
}

function takeSnap() {
tint(255);
image(capture, 20, 0);
PicTaken = capture.get();

confirmarTakeSnap = true;
}

function saveSnap() {
if(confirmarTakeSnap){
mode = 1;
}
}

function mousePressed(){
if (screen == 0) { // go to screen 1 when mouse is pressed
screen = 1;
buttonTakePicture.show(); // show buttons
buttonSavePicture.show();
} else if (screen == 1) { // when in screen 1, do specific stuff
if ((mouseX > 200) && (mouseX <= 280)) {
save(‘myCanvas.jpg’);
}
}
}

Here’s also the code for choosing 3D object that should go on top of the picture. The picture here is just the red rectangle.

var rotX = 0;
var rotY = 0;
var rotZ = 0;
var _text;

var screen = 0;

function setup() {
createCanvas(500, 700, WEBGL);
smooth();

_text = createGraphics(400,300);

_text.fill(100);
_text.textAlign(CENTER);
_text.textSize(20);
_text.text(‘Choose the design’, 200, 180);
_text.textSize(15);
_text.text(‘Continue’, 320, 270);

}

function draw() {

background(180, 80, 80);

if (screen == 0){

let locX = mouseX - height / 2;

let locY = mouseY - width / 2;

push();
translate(0, 0, -50);
noStroke();
fill(200, 60, 40);
rect(-250, -380, 500, 800);
pop();

push();
translate(0, 0, -50);
fill(235);
stroke(0);
rect(-235, -310, 140, 140);
rect(-70, -310, 140, 140);
rect(95, -310, 140, 140);
rect(-235, -120, 140, 140);
rect(-70, -120, 140, 140);
rect(95, -120, 140, 140);
rect(-125, 100, 250, 250);
pop();

fill(255);
push();
translate(-150, -220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(250, 0, 0);
box(70);
pop();

push();
translate(0, -210);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(250, 90, 0);
cylinder(50, 20);
pop();

push();

translate(150, -220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(20, 80, 150);
cone(50, 70);
pop();

push();
translate(-150, -45);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(90, 80, 200);
torus(30, 15);
pop();

push();
translate(0, -45);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(20, 190, 250);
box(60, 30, 40);

pop();

  push();

translate(150, -45);

rotateY(frameCount * 0.01);

rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(20, 250, 200);
ellipsoid(60, 15, 40);
pop();

push();
ambientLight(random(250), random(230));

noStroke();
fill(20);
ellipse(180, 230, 60, 60);
fill(250);
ellipse(180, 230, 43, 43);
fill(0);
ellipse(180, 230, 35, 35);
pop();

push();

if (mouseX < 180 && mouseY < 220) {
translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(250, 0, 0);
box(70);
} else if (mouseX < 320 && mouseY < 220){
translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(250, 90, 0);
cylinder(50, 20);
} else if (mouseX < 480 && mouseY < 220){
translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(20, 80, 150);
cone(50, 70);
} else if (mouseX < 180 && mouseY < 420){
translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(90, 80, 200);
torus(30, 15);
} else if (mouseX < 320 && mouseY < 420){
translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(20, 190, 250);
box(60, 30, 40);
} else if (mouseX < 480 && mouseY < 420){
translate(0, 220);
rotateY(frameCount * 0.01);
rotateX(frameCount * 0.01);
smooth();
ambientLight(60, 60, 60);
pointLight(255, 255, 255, locX, locY, 100);
frameRate(25);
fill(20, 250, 200);
ellipsoid(60, 15, 40);
}
pop();

texture(_text);
noStroke();
plane(600, 600);
} else if (screen == 1) {

background (200);

push();
translate (0, 0, -50);
fill(255, 0, 0);
rect(-250, -350, 500, 700);
pop();

fill(255);
push();
rotateY(rotY);
rotateX(rotX);
translate(mouseX - width/2, mouseY - height/2);
box(75, 100, 50);
pop();

}}

function mouseDragged(){
if (screen == 0) {
screen = 1;
} else if (screen ==1) {

rotY += (mouseX - pmouseX) * 0.01;
rotX += -(mouseY - pmouseY) * 0.01;

}}

2

-a- please format your code using

</> code tag

looks liek
```
type or paste code here
```

or better show a link to a project copy at
https://editor.p5js.org/

if you save a image from p5.js i expect that you are offered a download to your local computer

if you want use that file again ( in that or an other project )
you need to upload it manually ( or offer an interactive drag/drop page for a upload )

but possibly the file idea is wrong,
and what you want/need to do, is to load something into a pgraphic ( like image buffer )
and modify it later with overlay/add something?
( using no file at all )