# How to Can I turn a flat drawing into 3D?

**URL:** <https://discourse.processing.org/t/how-to-can-i-turn-a-flat-drawing-into-3d/23930>\
**Category:** Coding Questions\
**Created:** [September 18, 2020, 4:55am UTC](https://discourse.processing.org/t/how-to-can-i-turn-a-flat-drawing-into-3d/23930 "2020-09-18T04:55:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [September 18, 2020, 4:55am UTC](https://discourse.processing.org/t/how-to-can-i-turn-a-flat-drawing-into-3d/23930/1 "2020-09-18T04:55:55Z")

</div>

Can I turn a flat drawing into 3D?

I want to change it like a slanted picture like a 3D feel.

Is there any way?

 ![3d](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/92b95136ba1700edf7b639719ba4d9bd64e3c4c6.jpeg)

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 18, 2020, 6:53am UTC](https://discourse.processing.org/t/how-to-can-i-turn-a-flat-drawing-into-3d/23930/2 "2020-09-18T06:53:28Z")

</div>

the simplest way would probably be a texture on a cube.

> **[texture() \\ Language (API) \\ Processing 3+](https://processing.org/reference/texture_.html)**

if you want to “draw” on the cube’s surface (rect, ellipse, line, text) you can probably draw into a PGraphics and again use that as your texture.

poor pikachu will be flat on a cube either way, but only coding real 3d geometry will ease that particular pain of his 😉

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [September 18, 2020, 7:10am UTC](https://discourse.processing.org/t/how-to-can-i-turn-a-flat-drawing-into-3d/23930/3 "2020-09-18T07:10:56Z")

</div>

[![](https://img.youtube.com/vi/gvDgQVzRbwQ/hqdefault.jpg "스마트폰 어플 AR기능 만들기") ](https://www.youtube.com/watch?v=gvDgQVzRbwQ)

I am going to make it in addition to augmented reality.

Thanks for the reply.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 19, 2020, 5:23pm UTC](https://discourse.processing.org/t/how-to-can-i-turn-a-flat-drawing-into-3d/23930/4 "2020-09-19T17:23:35Z")

</div>

If you have:

1. an augmented reality feed and
2. the corner coordinates of your cube

…then you can map an image to the coordinates with `texture()` and `vertex()`

> **[texture() \\ Language (API) \\ Processing 3+](https://processing.org/reference/texture_.html)**

If you are using augmented reality with QR codes, use the BoofCV or OpenCV libraries for Processing and they have built-in support for mapping images on top of the QR codes.

 ![Example_qrcode_detection](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fc8fae10eb05786cc0a54cd213806e474c46fac9.jpeg)

> **[Example Detect QR Code - BoofCV](http://boofcv.org/index.php?title=Example_Detect_QR_Code)**

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 19, 2020, 5:31pm UTC](https://discourse.processing.org/t/how-to-can-i-turn-a-flat-drawing-into-3d/23930/5 "2020-09-19T17:31:34Z")

</div>

I think that you can just prior to image() use rotateY(angle); to achieve a rotation in 3D

Then you don’t need a box/texture

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 19, 2020, 6:41pm UTC](https://discourse.processing.org/t/how-to-can-i-turn-a-flat-drawing-into-3d/23930/6 "2020-09-19T18:41:39Z")

</div>

> [@Chrisir](#):
>
> you can just prior to image() use rotateY(angle); to achieve a rotation in 3D

This is true, it is just hard to use rotations in P3D to match up to a plane in an augmented reality feed – you may be able to detect the coordinates in the video feed, but not “detect” what rotations would cause a plane to match those coordinates.

However, if you are rendering a box at an arbitrary rotation, the rotateY method is faster and easier. Here is a demo of both:

```auto
PImage img;
PImage scaled;

void setup() {
  size(800, 600, P3D);
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Processing_3_logo.png/600px-Processing_3_logo.png");
  scaled = img.copy();
  scaled.resize(200,200);
}

void draw() {
  background(0);
  translate(width/2.0, height/2.0);

  pushMatrix();
  translate(-width/4.0, 0);
  rotateY(-PI/16);
  fill(255, 0, 0);
  box(240);
  translate(-100, -100, 121);
  fill(0, 0, 255);
  beginShape();
  texture(img);  
  vertex(0, 0, 0, 0);
  vertex(200, 0, 600, 0);
  vertex(200, 200, 600, 600);
  vertex(0, 200, 0, 600);
  endShape();
  popMatrix();
  
  pushMatrix();
  translate(width/4.0, 0);
  rotateY(PI/16);
  translate(-100, -100, 120);
  rect(0, 0, 200, 200);
  translate(0, 0, 1);
  image(scaled, 0, 0);
  popMatrix();
}

```

 ![Rotate3DSurfaceImage--screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1e51069956021b878db182c8abee545938c368ce.png)

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [September 20, 2020, 8:37am UTC](https://discourse.processing.org/t/how-to-can-i-turn-a-flat-drawing-into-3d/23930/7 "2020-09-20T08:37:10Z")

</div>

@jeremydouglass

It also runs within the application.

thank you.

 ![img](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4fb37cebba9471663246ef6a3ef1e15d1418e156.jpeg)

Thank you very much.