Help with Extrusion from 2D to 3D

Processing Coding Questions
1

Hello everyone ! It’s my first post and I’m glad to be new member of the community :slight_smile:

I’m attempting to write a code that allows me to create a 3D image out of a 2D image. I’ve tried this code (see bellow) but it seems not to work (for I’m sure a very obvious reason I can’t find for 4 whole days now… ).

My idea is to create a box() for each pixel of my image with its z parameter linked to the brightness of each pixel of my image (the x and the y stays the same as the x and the z of each pixel).

But running the code bellow only create a sort of big white rectanglish cube…

If anyone can get me out of the infinite loop I’ve put myself in for the past 4 days, I’ll be more than grateful.

Thanks a lot in advance !

THE WRONG CODE :

PImage img;

void setup() {
  size(600, 400, P3D);
  img = loadImage("Test.jpg");
  img.loadPixels();
  noStroke();
}

void draw() {
  background(125);
  lights();
  translate(width/2, height/2);
  rotateX(mouseY * 0.01);
  rotateY(mouseX * 0.01);

  for (int x=0; x<img.width; x++) {
    for (int y=0; y<img.height; y++) {
      float bri = brightness(img.get(x, y));
      box(x, y, bri);
    }
  }
}
2 Likes
2

Close. The 3D box() function doesn’t take position and a size. It takes a width, height, a depth. To position the boxes you need to make better use of the 3D translation functions. Sample code:

PImage img;
boolean mono = false;

void setup() {
  size(600, 400, P3D);
  img = loadImage("http://www.tfguy44.com/MyIcon1.PNG");
  img.loadPixels();
  noStroke();
}

void draw() {
  background(mono?127:0);
  lights();
  translate(width/2, height/2);
  rotateX(-map(mouseY,0,height,-PI,PI));
  rotateY(map(mouseX,0,width,-PI,PI));
  scale(5);
  translate(-img.width/2, -img.height/2);
  fill(255);
  for (int x=0; x<img.width; x++) {
    for (int y=0; y<img.height; y++) {
      float bri = map(brightness(img.get(x, y)),0,255,0,1);
      pushMatrix();
      translate(x,y,0);
      if( !mono ) fill(img.get(x, y));
      box(bri);
      popMatrix();
    }
  }
}

void mousePressed(){
  mono=!mono;
}
3 Likes
3

Thank you v much for ur response. It helps a lot ! I still have to figure out how to make each box “taller” or “deeper” according to the brightness value, but hey, need to learn fishing instead of getting fishes for free :wink:

Thanks again !

1 Like
4

Right, well, the parameters to the box() function are the size of each box. Set x and y to 1, and vary the z size based on the brightness. You also want to adjust the position because boxes are drawn from their centers:

PImage img;
boolean mono = false;

void setup() {
  size(600, 400, P3D);
  img = loadImage("http://www.tfguy44.com/MyIcon1.PNG");
  img.loadPixels();
  noStroke();
}

void draw() {
  background(mono?127:0);
  lights();
  translate(width/2, height/2);
  rotateX(-map(mouseY,0,height,-PI,PI));
  rotateY(map(mouseX,0,width,-PI,PI));
  scale(5);
  translate(-img.width/2, -img.height/2);
  fill(255);
  for (int x=0; x<img.width; x++) {
    for (int y=0; y<img.height; y++) {
      float bri = map(brightness(img.get(x, y)),0,255,0,10);
      pushMatrix();
      translate(x,y,bri/2);
      if( !mono ) fill(img.get(x, y));
      box(1,1,bri);
      popMatrix();
    }
  }
}

void mousePressed(){
  mono=!mono;
}

This isn’t a fish for you. This is a picture of me wearing my fisherman hat and holding my fishing rod and eating some fish. Study the elements that this snapshot presents and understand what they are for and how you can use them.

3 Likes
5

I think you’ve helped me craft my very first fishing rod :)) Thx a lot !

1 Like