# 3D modeling from the front camera
**URL:** https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641
**Category:** Coding Questions
**Created:** [June 25, 2024, 10:39am UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641 "2024-06-25T10:39:54Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@mimi](https://discourse.processing.org/u/mimi)
#### Post date: [June 25, 2024, 10:39am UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/1 "2024-06-25T10:39:55Z")
Hello everyone, I will need to see help I am starting on processing. I have already started the code I would like to have but I can’t get a correct result, I attach an image of the result I would like.
I would like to:
- at the top left it is the camera that works live
- -at the top right it is the image of my live camera which moves according to the movement with gray levels ranging from black at 0cm to white 2cm in order to create a variation that will be applied to the other two parts as well and so for this one it will be the camera in front of it
-then the one below at the bottom right will be a side view we will be able to see a thickness with the variations a bit like the interface of rhinoceros 3d
– at the bottom left it will be a 3D view we can turn around the object using the mouse the wheat is rather organic
The goal is for the cameras to be live in motion
code :
```auto
import processing.video.*;
Capture video;
int reliefScale = 5; // Facteur d'échelle pour le relief
float[][] relief; // Tableau pour stocker les hauteurs du relief
void setup() {
size(800, 600, P3D); // Taille de la fenêtre pour les vues multiples
// Liste les périphériques vidéo disponibles
String[] devices = Capture.list();
if (devices.length == 0) {
println("Aucun périphérique vidéo trouvé");
exit();
} else {
println("Périphériques vidéo disponibles:");
for (int i = 0; i < devices.length; i++) {
println(devices[i]);
}
// Initialise la capture avec le premier périphérique trouvé
video = new Capture(this, devices[0]);
video.start();
}
// Initialise le tableau pour le relief
relief = new float[width][height];
}
void draw() {
background(0); // Fond noir
// Affichage de la vue principale (en haut à gauche)
if (video != null && video.available()) {
video.read();
}
if (video != null) {
image(video, 0, 0, width/2, height/2); // Affiche la vidéo en haut à gauche
// Convertit l'image en niveaux de gris
video.loadPixels();
for (int y = 0; y < video.height; y++) {
for (int x = 0; x < video.width; x++) {
int loc = x + y * video.width;
float grayValue = brightness(video.pixels[loc]);
// Ajuste la hauteur du relief en fonction de la luminosité
relief[x][y] = map(grayValue, 0, 255, -100, 100);
}
}
}
// Affichage de la vue 2D (en haut à droite)
translate(width/2, 0); // Déplace le repère au centre-droite
for (int y = 0; y < height/2; y += reliefScale) {
beginShape(TRIANGLE_STRIP);
for (int x = 0; x < width/2; x += reliefScale) {
vertex(x, y, relief[x][y]);
vertex(x, y + reliefScale, relief[x][y + reliefScale]);
}
endShape();
}
// Affichage de la vue de côté (en bas à droite)
translate(0, height/2); // Déplace le repère en bas-droite
for (int x = 0; x < width/2; x += reliefScale) {
beginShape();
for (int y = 0; y < height/2; y += reliefScale) {
vertex(x, y, relief[x][y]);
}
endShape();
}
// Affichage de la vue 3D (en bas à gauche)
translate(-width/2, 0); // Déplace le repère au bas-gauche
rotateX(PI/3); // Inclinaison pour la vue 3D
rotateY(PI/4); // Rotation pour la vue 3D
for (int y = 0; y < height/2; y += reliefScale) {
beginShape(TRIANGLE_STRIP);
for (int x = 0; x < width/2; x += reliefScale) {
vertex(x, y, relief[x][y]);
vertex(x, y + reliefScale, relief[x][y + reliefScale]);
}
endShape();
}
}
void keyPressed() {
if (key == 's' || key == 'S') {
save("modele3D.png");
println("Modèle 3D enregistré sous modele3D.png");
}
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [June 26, 2024, 7:36am UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/2 "2024-06-26T07:36:57Z")
Hello,
Welcome.
Please format your code and follow the guidelines when asking questions.
Take a look at the code you posted and you will understand.
You should be able to go back and edit it.
> [@Guidelines—Asking Questions](https://discourse.processing.org/t/guidelines-asking-questions/2147):
>
> Summary (TL;DR) Ask complete questions to get better answers! Be specific. For example: I want to load an image. I tried using createImg() , and I expected the image to be on canvas, but what happened instead was the image showing up below the canvas. Isolate your problem and work in small steps. Share only the code directly related to your problem if it is part of a bigger project, and if something isn’t working, try the smallest code that could do the thing you want. Can we run your code to …
`:)`
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [July 3, 2024, 1:33pm UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/3 "2024-07-03T13:33:59Z")
Unclear what you want to achieve
Upper left field is the camera of your laptop
Upper right field is a height map that uses brightness from the camera image? Is ghat correct?
Lower left field is cylinder which has the height field
drawn around it?
Lower right field is the side view of the height map?
Is that correct?
---
### Author:  [@mimi](https://discourse.processing.org/u/mimi)
#### Post date: [July 3, 2024, 1:50pm UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/4 "2024-07-03T13:50:15Z")
Yes !
That’s the idea! but it seems complex to me
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [July 3, 2024, 2:15pm UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/5 "2024-07-03T14:15:07Z")
At which points are you struggling?
---
### Author:  [@mimi](https://discourse.processing.org/u/mimi)
#### Post date: [July 3, 2024, 3:07pm UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/6 "2024-07-03T15:07:53Z")
For the image at the bottom left I can’t make it become a 3D shape
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [July 3, 2024, 4:59pm UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/7 "2024-07-03T16:59:18Z")
step 1:
your initial code
in a better format
```auto
import processing.video.*;
Capture video;
int reliefScale = 5; // Facteur d’échelle pour le relief
float[][] relief; // Tableau pour stocker les hauteurs du relief
float angleY=0;
// ----------------------------------------------------------------------------------------------
void setup() {
size(800, 600, P3D); // Taille de la fenêtre pour les vues multiples
// Liste les périphériques vidéo disponibles
String[] devices = Capture.list();
if (devices.length == 0) {
println("Aucun périphérique vidéo trouvé");
exit();
} else {
println("Périphériques vidéo disponibles:");
for (int i = 0; i < devices.length; i++) {
println(devices[i]);
}
// Initialise la capture avec le premier périphérique trouvé
video = new Capture(this, devices[0]);
video.start();
}
// Initialise le tableau pour le relief
relief = new float[width][height];
}// setup
// ----------------------------------------------------------------------------------------------
void draw() {
background(0); // Fond noir
// Affichage de la vue principale (en haut à gauche)
if (video != null && video.available()) {
video.read();
}
if (video != null) {
// Affiche la vidéo en haut à gauche
image(video, 0, 0, width/2, height/2);
// Convertit l’image en niveaux de gris
video.loadPixels();
for (int y = 0; y < video.height; y++) {
for (int x = 0; x < video.width; x++) {
int loc = x + y * video.width;
float grayValue = brightness(video.pixels[loc]);
// Ajuste la hauteur du relief en fonction de la luminosité
relief [x][y] = map(grayValue, 0, 255, -100, 100);
}
}
}
// Affichage de la vue 2D (en haut à droite)
translate(width/2, 0); // Déplace le repère au centre-droite
for (int y = 0; y < height/2; y += reliefScale) {
beginShape(TRIANGLE_STRIP);
for (int x = 0; x < width/2; x += reliefScale) {
vertex(x, y, relief[x][y]);
vertex(x,
y + reliefScale,
relief[x][y + reliefScale]);
}
endShape();
}
// Affichage de la vue de côté (en bas à droite) // bottom RIGHT
translate(0, height/2); // Déplace le repère en bas-droite
for (int x = 0; x < width/2; x += reliefScale) {
beginShape();
for (int y = 0; y < height/2; y += reliefScale) {
vertex(x, y, relief[x][y]);
}
endShape();
}
// Affichage de la vue 3D (en bas à gauche) // bootom LEFT
translate(-width/2, 0); // Déplace le repère au bas-gauche
rotateX(PI/3); // Inclinaison pour la vue 3D
angleY=PI/4;
rotateY(angleY); // Rotation pour la vue 3D
// angleY+=0.032;
for (int y = 0; y < height/2; y += reliefScale) {
beginShape(TRIANGLE_STRIP);
for (int x = 0; x < width/2; x += reliefScale) {
vertex(x, y, relief[x][y]);
vertex(x, y + reliefScale, relief[x][y + reliefScale]);
}
endShape();
}
}//draw
// ----------------------------------------------------------------------------------------------
void keyPressed() {
if (key == 's' || key == 'S') {
save("modele3D.png");
println("Modèle 3D enregistré sous modele3D.png");
}
}
// ----------------------------------------------------------------------------------------------
```
I don’t have time for more at the moment, apologies
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 3, 2024, 8:21pm UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/8 "2024-07-03T20:21:16Z")
Hello @mimi,
You can format the code in your original post as per instructions here:
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)
The link states:
> **Please help us help you!** Formatted code is easier to read, copy-paste, and run, making it easier for other community members to help you.
I will often skip over unformatted code.
`:)`
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [July 4, 2024, 1:54pm UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/9 "2024-07-04T13:54:24Z")
**A word about 3D**
Ok, 3D is tricky.
in 2D, you have x to the right and y to the top.
in 3D imagine things on a table, or on a stage:
- you have x to the right and
- z away from you into the screen (minus z is away, plus z is towards you)
- y to the top, above the table. That’s new.
**Demo for 3D**
```auto
void setup() {
size( 1300, 900, P3D );
} // setup
void draw() {
background(0);
lights();
drawFloor();
drawSphere();
} // draw
// ---------------------------------------------------------------
void drawFloor() {
stroke(111); // gray
fill(255, 2, 2); // red
float factor1=80.0; // dist between boxes
translate(width/2, height/2, 0);
for (int x=-55; x<55; x++) {
for (int z=-55; z<55; z++) {
pushMatrix();
translate(x*factor1 - (4*factor1/2),
height-111,
z*factor1 - (4*factor1/2) );
box(factor1-3); // size of 40 (width, height and depth)
popMatrix();
}
}
}
void drawSphere() {
pushMatrix();
translate(0, 0, 0);
noStroke();
fill(0, 255, 0);
sphere(30);
popMatrix();
}
//
```
**Circle**
Now for the cylinder let’s start with a circle. A lying circle (it’s lying on the table so its points are x,y,z and the circle itself is represented by x and z (!) ). This means y is constant, and x and z change:
```auto
void setup() {
size( 1300, 900, P3D );
} // setup
void draw() {
background(0);
lights();
drawFloor();
drawCircle();
} // draw
// ---------------------------------------------------------------
void drawFloor() {
stroke(111); // gray
fill(255, 2, 2); // red
float factor1=80.0; // dist between boxes
translate(width/2, height/2, 0);
for (int x=-55; x<55; x++) {
for (int z=-55; z<55; z++) {
pushMatrix();
translate(x*factor1 - (4*factor1/2),
height-111,
z*factor1 - (4*factor1/2) );
box(factor1-3); // size of 40 (width, height and depth)
popMatrix();
}
}
}
void drawCircle() {
for (int i = 0; i<360; i+=5) {
pushMatrix();
float radius = 260;
float centerX=0;
float centerZ=-630;
float x=cos(radians(i)) * radius + centerX; // x value !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
float z=sin(radians(i)) * radius + centerZ; // in 2D space this z value would be the y value
translate(x, height-111-296, z);
noStroke();
fill(0, 255, 0); // green
sphere(22);
popMatrix();
}
}
//
```
**Cylinder**
we can place the rings on top of each other (y) to show a kind of cylinder:
```auto
void setup() {
size( 1300, 900, P3D );
} // setup
void draw() {
background(0);
lights();
drawFloor();
drawCylinder();
} // draw
// ---------------------------------------------------------------
void drawFloor() {
stroke(111); // gray
fill(255, 2, 2); // red
float factor1=80.0; // dist between boxes
translate(width/2, height/2, 0);
for (int x=-55; x<55; x++) {
for (int z=-55; z<55; z++) {
pushMatrix();
translate(x*factor1 - (4*factor1/2),
height-111,
z*factor1 - (4*factor1/2) );
box(factor1-3); // size of 40 (width, height and depth)
popMatrix();
}
}
}
void drawCylinder() {
for (int height_i = 0; height_i<8; height_i+=1) { // the levels on top of each other !!!!!!!!
for (int angle_i = 0; angle_i<360; angle_i+=5) {
pushMatrix();
float radius = 260;
float centerX=0;
float centerZ=-630;
float x=cos(radians(angle_i)) * radius + centerX; // x value
float z=sin(radians(angle_i)) * radius + centerZ; // in 2D space this z value would be the y value
translate(x,
height-111-296-(height_i*55), // !!!!!
z);
noStroke();
fill(0, 255, 0); // green
sphere(22);
popMatrix();
}
}
}
//
```
**Cylinder as a Shape**
we can modify this to a shape using `beginShape(TRIANGLE_STRIP);` etc.
```auto
// 3D Cylinder using a shape
void setup() {
size( 1300, 900, P3D );
} // setup
void draw() {
background(0);
lights();
drawFloor();
drawCylinder();
} // draw
// ---------------------------------------------------------------
void drawFloor() {
stroke(111); // gray
fill(255, 2, 2); // red
float factor1=80.0; // dist between boxes
translate(width/2, height/2, 0);
for (int x=-55; x<55; x++) {
for (int z=-55; z<55; z++) {
pushMatrix();
translate(x*factor1 - (4*factor1/2),
height-111,
z*factor1 - (4*factor1/2) );
box(factor1-3); // size of 40 (width, height and depth)
popMatrix();
}
}
}// function
void drawCylinder() {
fill(0, 255, 0); // green
beginShape(TRIANGLE_STRIP);
fill(0, 255, 0); // green
for (int height_i = 0; height_i<8; height_i+=1) {
for (int angle_i = 0; angle_i<360; angle_i+=5) {
pushMatrix();
float radius = 260;
float centerX=0;
float centerZ=-630;
float x=cos(radians(angle_i)) * radius + centerX; // x value
float y=height-111-296-(height_i*55);
float z=sin(radians(angle_i)) * radius + centerZ; // in 2D space this z value would be the y value
// for the 2nd vertex, we say plus 1 (which must be in ())
float x2=cos(radians((angle_i+1))) * radius + centerX; // x value
float y2=height-111-296-((height_i+1)*55);
float z2=sin(radians((angle_i+1))) * radius + centerZ; // in 2D space this z value would be the y value
vertex(x, y, z);
vertex(x2, y2, z2);
noStroke();
fill(0, 255, 0); // green
//sphere(22);
popMatrix();
}//for
}//for
endShape(CLOSE);
}// function
//
```
**Next**
From here on you should be able to apply (add) `relief[x][y]` to the radius and thus get the height field drawn onto the surface of the cylinder (modify the surface).
**Remark**
Because your 3rd field is in the lower left corner, the cylinder will be shown from a camera angle looking from the right and the top onto the cylinder (bad maybe?). You won’t see the cylinder in a frontal perspective.
There are ways to avoid this: you can draw the cylinder on a 3D-PGraphics:
- create the PGraphics with ` pg = createGraphics(width/2, height/2, P3D);` (iirc) and
- then just draw the PGraphics using ` image(pg, 0, height/2);`.
See [PGraphics / Reference / Processing.org](https://processing.org/reference/PGraphics.html) etc.
Warm regards,
Chrisir
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 6, 2024, 1:12pm UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/10 "2024-07-06T13:12:15Z")
> [@mimi](#):
>
> For the image at the bottom left I can’t make it become a 3D shape
The Processing website has resources (tutorials, references, examples, etc.):
> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…
Rendering Techniques:
_[Render Techniques / Processing.org](https://processing.org/tutorials/rendering)_ \< See _Another drawing surface_ (PGraphics)
Reference:
_[PGraphics / Reference / Processing.org](https://processing.org/reference/PGraphics.html)_ \< At the bottom of every reference are additional related methods.
P3D:
_[P3D / Processing.org](https://processing.org/tutorials/p3d)_
I modified the example in the Rendering Techniques to separate the cubes instead of combine them:
Take a look at that example and try to place the cubes on the bottom left of a larger sketch window.
Once you understand that then create a shape and replace the box.
You can achieve these tasks (see picture below) in steps:
- Image on left
- rasterized image in middle
- create a 3D relief map (I used the _brightness()_ as the height of the _box()_ ) with PGraphics and rasterized image
It helps to center things (the origin) and easier to rotate about the origin in the center of the sketch or PGraphics:
```auto
translate(width/2, height/2) // If this is a PGraphics pg then it would be pg.width!
```
It helps to start with a minimal example and something we can run and build on that:
```auto
// Use image instead of video:
String url = "http://learningprocessing.com/code/assets/sunflower.jpg";
PImage img;
void setup()
{
size(600, 200, P3D);
img = loadImage(url);
image(img, 0, 0);
}
```
And it must be properly formatted if you want the community to take interest.
`:)`
---
### Author:  [@mimi](https://discourse.processing.org/u/mimi)
#### Post date: [July 6, 2024, 7:19pm UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/11 "2024-07-06T19:19:02Z")
thank you very much I understand better now! maybe it’s not better to avoid problems with the camera that I remove the idea of having 4 parts but rather keep the front camera at the top left in small still live but instead the rest of the screen is only the 3D view so I can turn around? and this shape would come from what the front camera sees !
Thanks you again :))
---
### Author:  [@mimi](https://discourse.processing.org/u/mimi)
#### Post date: [July 6, 2024, 7:22pm UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/12 "2024-07-06T19:22:56Z")
Good morning ! thank you for this answer, it’s true that I’m just starting out, I haven’t yet grasped the tips to have, whether in terms of formality or otherwise, I really like the example! I used several code fragments so it was complicated
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [July 6, 2024, 8:07pm UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/13 "2024-07-06T20:07:55Z")
> [@mimi](#):
>
> thank you very much I understand better now!
Can you use my cylinder with your brightness data?
---
### Author:  [@mimi](https://discourse.processing.org/u/mimi)
#### Post date: [July 8, 2024, 7:18am UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/14 "2024-07-08T07:18:27Z")
yes the cylinder works now I have to apply this cylinder on an image via the front camera
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [July 8, 2024, 9:13am UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/15 "2024-07-08T09:13:37Z")
I described how to map out your data onto your cylinder
You need to modify my cylinder with the data from
the array relief
---
### Author:  [@ProcessingOrg](https://discourse.processing.org/u/ProcessingOrg)
#### Post date: [July 10, 2024, 10:10am UTC](https://discourse.processing.org/t/3d-modeling-from-the-front-camera/44641/16 "2024-07-10T10:10:40Z")
Hello @mimi. Your original post has been edited to format the code for better readability. Please review our [FAQ](https://discourse.processing.org/t/guidelines-asking-questions/2147#is-your-post-formatted-9) for guidance on posting code. Thank you!