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

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?

1 Like

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

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

2 Likes

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

Thanks for the reply.

2 Likes

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()

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.

1 Like

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

1 Like

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:

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();
}

1 Like

@jeremydouglass

It also runs within the application.

thank you.

Thank you very much.

2 Likes