# Mix 2d and 3d drawings

**URL:** https://discourse.processing.org/t/mix-2d-and-3d-drawings/29125
**Category:** Coding Questions
**Created:** [April 5, 2021, 12:56am UTC](https://discourse.processing.org/t/mix-2d-and-3d-drawings/29125 "2021-04-05T00:56:10Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![KelvinLamptey](https://avatars.discourse-cdn.com/v4/letter/k/f14d63/32.png) [@KelvinLamptey](https://discourse.processing.org/u/KelvinLamptey)
#### Post date: [April 5, 2021, 12:56am UTC](https://discourse.processing.org/t/mix-2d-and-3d-drawings/29125/1 "2021-04-05T00:56:10Z")

</div>

Please how do I draw 2d shapes in 3d mode.  
With processing in Android.  
With the APDE.

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [April 5, 2021, 2:21pm UTC](https://discourse.processing.org/t/mix-2d-and-3d-drawings/29125/2 "2021-04-05T14:21:12Z")

</div>

Hi @KelvinLamptey ,

Welcome to the forum! 😉

Drawing 2d shapes in 3d mode is not specific to Android so the following code also works in Processing Java.

In order to do that, you need to draw your 3d shapes on a separate [`PGraphics()`](https://processing.org/reference/PGraphics.html) buffer that you can then display on your 2D canvas. Doing the opposite doesn’t work since drawing an image in 3d space is going to intersect with the 3d shapes you draw.

```auto
float angle = 0;

PGraphics canvas3D;

void setup() {
  size(300, 300, P2D);
  canvas3D = createGraphics(width, height, P3D);
}

void draw() {
  background(255);
  
  // 3D shape on a separate PGraphics
  canvas3D.beginDraw();
  canvas3D.background(255);
  
  canvas3D.translate(width / 2, height / 2);
  canvas3D.rotateX(QUARTER_PI * sin(angle));
  canvas3D.rotateY(PI / 3 * cos(angle));
  
  canvas3D.fill(0, 255, 0);
  canvas3D.box(100);
  
  canvas3D.endDraw();
  
  // Display 3D buffer
  image(canvas3D, 0, 0);
  
  // 2D shapes
  fill(255, 0, 0);
  translate(width / 2, height / 2);
  circle(-50, 0, 50);
  circle(50, 0, 50);
  circle(0, -50, 50);
  circle(0, 50, 50);
  
  angle += 0.05;
}

```

Which gives :

![2d3d](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/30bbaaee2a98ebff18fb50a45d243dcbd2ff08d3.gif)

Note that you must use P2D with P3D because they are compatible.

See the [documentation](https://processing.org/reference/size_.html) on the renderers available in Processing :

> The **renderer** parameter selects which rendering engine to use. For example, if you will be drawing 3D shapes, use **P3D**. In addition to the default renderer, other renderers are:
> 
> **P2D** (Processing 2D): 2D graphics renderer that makes use of OpenGL-compatible graphics hardware.
> 
> **P3D** (Processing 3D): 3D graphics renderer that makes use of OpenGL-compatible graphics hardware.