# Help with Extrusion from 2D to 3D

**URL:** <https://discourse.processing.org/t/help-with-extrusion-from-2d-to-3d/9656>\
**Category:** Coding Questions\
**Created:** [March 26, 2019, 5:59pm UTC](https://discourse.processing.org/t/help-with-extrusion-from-2d-to-3d/9656 "2019-03-26T17:59:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pierre](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@Pierre](https://discourse.processing.org/u/Pierre)\
**Post date:** [March 26, 2019, 5:59pm UTC](https://discourse.processing.org/t/help-with-extrusion-from-2d-to-3d/9656/1 "2019-03-26T17:59:06Z")

</div>

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

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

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

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 26, 2019, 7:00pm UTC](https://discourse.processing.org/t/help-with-extrusion-from-2d-to-3d/9656/2 "2019-03-26T19:00:36Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![Pierre](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@Pierre](https://discourse.processing.org/u/Pierre)\
**Post date:** [March 26, 2019, 9:39pm UTC](https://discourse.processing.org/t/help-with-extrusion-from-2d-to-3d/9656/3 "2019-03-26T21:39:15Z")

</div>

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 😉

Thanks again !

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 26, 2019, 10:33pm UTC](https://discourse.processing.org/t/help-with-extrusion-from-2d-to-3d/9656/4 "2019-03-26T22:33:38Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Pierre](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@Pierre](https://discourse.processing.org/u/Pierre)\
**Post date:** [March 27, 2019, 3:07pm UTC](https://discourse.processing.org/t/help-with-extrusion-from-2d-to-3d/9656/5 "2019-03-27T15:07:03Z")

</div>

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