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

**URL:** https://discourse.processing.org/t/need-help-beginner-how-to-capture-image-and-use-the-image/11937
**Category:** Coding Questions
**Created:** [June 9, 2019, 3:25am UTC](https://discourse.processing.org/t/need-help-beginner-how-to-capture-image-and-use-the-image/11937 "2019-06-09T03:25:32Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![carriemarrie](https://avatars.discourse-cdn.com/v4/letter/c/e68b1a/32.png) [@carriemarrie](https://discourse.processing.org/u/carriemarrie)
#### Post date: [June 9, 2019, 3:25am UTC](https://discourse.processing.org/t/need-help-beginner-how-to-capture-image-and-use-the-image/11937/1 "2019-06-09T03:25:32Z")

</div>

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;
> 
> ```
> 
> }}

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [June 9, 2019, 7:38am UTC](https://discourse.processing.org/t/need-help-beginner-how-to-capture-image-and-use-the-image/11937/2 "2019-06-09T07:38:26Z")

</div>

-a- please format your code using

```auto
</> code tag

```

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

* * *

or better show a link to a project copy at  
[https://editor.p5js.org/](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 )

* * *