3D modeling from the front camera

[mimi]

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 :

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");
  }
}

[glv]

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

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 …

:)

[Chrisir]

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?

[mimi]

Yes !

That’s the idea! but it seems complex to me

[Chrisir]

At which points are you struggling?

[mimi]

For the image at the bottom left I can’t make it become a 3D shape

[Chrisir]

step 1:

your initial code
in a better format

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

[glv]

Hello @mimi,

You can format the code in your original post as per instructions here:

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.

:)

[Chrisir]

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

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:

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:

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.

// 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 etc.

Warm regards,

Chrisir

[glv]

@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!

Rendering Techniques:
Render Techniques / Processing.org < See Another drawing surface (PGraphics)

Reference:
PGraphics / Reference / Processing.org < At the bottom of every reference are additional related methods.

P3D:
P3D / Processing.org

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:

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:

// 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.

:)

[mimi]

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 :))

[mimi]

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

[Chrisir]

@mimi

thank you very much I understand better now!

Can you use my cylinder with your brightness data?

[mimi]

yes the cylinder works now I have to apply this cylinder on an image via the front camera

[Chrisir]

I described how to map out your data onto your cylinder

You need to modify my cylinder with the data from
the array relief

[ProcessingOrg]

Hello @mimi. Your original post has been edited to format the code for better readability. Please review our FAQ for guidance on posting code. Thank you!