# How to put an interactable 2D canvas in 3D?

**URL:** <https://discourse.processing.org/t/how-to-put-an-interactable-2d-canvas-in-3d/31320>\
**Category:** Processing for Android\
**Created:** [July 18, 2021, 5:08pm UTC](https://discourse.processing.org/t/how-to-put-an-interactable-2d-canvas-in-3d/31320 "2021-07-18T17:08:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![waldo1](https://avatars.discourse-cdn.com/v4/letter/w/bbce88/32.png) [@waldo1](https://discourse.processing.org/u/waldo1)\
**Post date:** [July 18, 2021, 5:08pm UTC](https://discourse.processing.org/t/how-to-put-an-interactable-2d-canvas-in-3d/31320/1 "2021-07-18T17:08:40Z")

</div>

So, I pretty much want to make this exact app, just in AR and with better brushes: [https://play.google.com/store/apps/details?id=com.TNInteractive.GraffitiPaint&hl=en](https://play.google.com/store/apps/details?id=com.TNInteractive.GraffitiPaint&hl=en)

One way to do it that I came up with would be to open a 2D sketch in which you draw in an interactive canvas/plane inside an other 3D sketch, but I have no idea how to do it.

Maybe there’s a way to put a 2D processing sketch into some other AR program that would let the player interact with it on a virtual screen, but I haven’t yet found anything like this so far.

I just want to find a way to paint like in 2D on a plane in 3D, but idk how. Please help me lol.

---

<div class="post-metadata">

**Author:** ![everythingability](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/everythingability/32/937_2.png) [@everythingability](https://discourse.processing.org/u/everythingability)\
**Post date:** [July 19, 2021, 5:30pm UTC](https://discourse.processing.org/t/how-to-put-an-interactable-2d-canvas-in-3d/31320/2 "2021-07-19T17:30:51Z")

</div>

Absolutely no idea, but I wondered if one could drop a live p5js canvas into A-Frame, and I know I’m probably not doing this right (someone please duplicate it and do it properly), but here:

[https://editor.p5js.org/tom.smith/sketches/jq64fiJV-](https://editor.p5js.org/tom.smith/sketches/jq64fiJV-)

[https://editor.p5js.org/tom.smith/sketches/jq64fiJV-](https://editor.p5js.org/tom.smith/sketches/jq64fiJV-)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 19, 2021, 6:19pm UTC](https://discourse.processing.org/t/how-to-put-an-interactable-2d-canvas-in-3d/31320/3 "2021-07-19T18:19:15Z")

</div>

```auto
PShader shader;
PGraphics canvas;
PImage img;
float []v = {0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0};
void setup() {
  size(640, 360, P3D);
  img = loadImage("b1.jpg");
  shader = loadShader("mean.glsl");
  shader.set("mult",2.1);
  shader.set("range",1.0);
  //shader.set("v",v);
  noStroke();
  canvas = createGraphics(width,height,P3D);
};

void draw() {
  
  canvas.beginDraw();
  canvas.background(0);
  canvas.translate(width / 2, height / 2);
  canvas.rotateX(map(mouseY, 0, height, -PI, PI));
  canvas.rotateY(map(mouseX, 0, width, -PI, PI));
  canvas.rotateZ(PI/6);
  canvas.beginShape();
  //canvas.texture(img);
  canvas.vertex(-100, -100, 0, 0, 0);
  canvas.vertex(100, -100, 0, img.width, 0);
  canvas.vertex(100, 100, 0, img.width, img.height);
  canvas.vertex(-100, 100, 0, 0, img.height);
  canvas.shader(shader);
  canvas.endShape();
  canvas.endDraw();
  image(canvas,0,0);
  
};

```

---

<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:** [July 20, 2021, 12:32pm UTC](https://discourse.processing.org/t/how-to-put-an-interactable-2d-canvas-in-3d/31320/4 "2021-07-20T12:32:39Z")

</div>

for real 3D (I think with keyboard)

see [Some Graphical Editors - #3 by Chrisir](https://discourse.processing.org/t/some-graphical-editors/5347/3)

see [3d drawing with mouse - #7 by Chrisir](https://discourse.processing.org/t/3d-drawing-with-mouse/27738/7)