Creating a drawing environment in 3D


#1

Hi!
School project and I’m sort of a processing amateur but I get confused with a lot of stuff so
I want to create a canvas in 3D that I can draw on, like literally draw continous lines and have other things around that update normally.

The way you draw in 2D is by not calling a background() function (in the draw() mode) and then just stacking lines, but in 3D when theres other stuff updating around how would I create a canvas where my mouse could draw lines on ?

I tried looking a the noLoop() reference, or even creating a color[][] double array that would fill() over a grid of rects everytime the mouse goes over it but that last option lags too much.
Any ideas or solutions ?
concept wise, if there was a way to not loop a certain area in 3D that would help right ? but no idea how to do that.


#2

Wow…!

If I were at home… I could help you more.

1st : a 3D canvas is not a canvas but a room or stage, since it has a depth (z). Hence, when you draw with the mouse, you have different x,y but the same z. So you either need a 3D mouse or some trick to change z (Keyboard, mouse scroll wheel…).

2nd : Anyway. Concerning lines: store the lines in an ArrayList. Draw the scene from there. This way its possible to rotate the scene etc.


#3

#4

A few 3D sketches


#5

Yes sorry, I meant canvas as in inside the 3D space, there would be a 2D canvas to draw on.

okay so what you’re suggesting is since its in a draw mode, having the lines that are made on the spot stored into an ArrayList and then have a enhanced for loop to display them, I’ll give it a try! Not too excited on how I’ll have to fill()/stroke() the lines later but whatever.

I’ll take a look at the other links too, thanks Chrisir


#6

You are welcome!

Chrisir


#7

I think you can load the whole zip from github, but this sketch might be the most useful:

ThreeDMover4

Here you can move blocks in 6 directions

When you decrease step/speed to 5 or 1 you can draw

I think data are stored, just replace boxes by lines


#8

Also see current box as a 3D cursor (your 3D drawing pen)

Make this box much smaller please


#9

I did it and you were right, the ArrayList was the correct idea,
thanks for the 3D sketches too, translate() and stuff is a lot clearer now.
I’m not sure if I should post the code but basically, I created a brushStroke class

class brushS {
int x, y, x_end, y_end, thick;
color fill;
brushS(int x1, int y1, int x2, int y2, int weight, color c) {
x = x1;
y= y1;
x_end = x2;
y_end = y2;
thick = weight;
fill = c;
}

void display() {
stroke(fill);
strokeWeight(thick);
line(x, y, x_end, y_end);
}
}
and then later had an arraylist of that class called “canvas” :

if (mousePressed && inRect()) {
canvas.add(new brushS(phandX, phandY, handX, handY, 2, color(0)));
}
for (brushS b : canvas) {
b.display();
}

//handX is mouseX
Thanks again!
The project, however, is nowhere near completion so I’ll be back!


#10

Great progress here, congratulations!


#11

Just minor thoughts:

Well done!

If you don’t know it, check out library peasyCam. Allows fantastic rotating of your drawings in 3D
You can set it active (for looking at drawing) and inactive (for drawing itself)

Search HUD in the old or new forum to get some info about how to place stuff in 3D that is 2D and is attached to the screen surface (as if they were 2D) like buttons for example.
Look at HUD in Wikipedia. Peasycam has a HUD but even without it you can make a HUD.

Use lights() in 3D - nice command.

There is a 3D version of line() command !!! Not fully sure why you don’t use it. In fact you should if I understand you correctly (unless you want to draw on a canvas in 3D). See reference for line(). You can then use p/l to change the z position of your 3D cursor and draw into the depth of the screen. The brush class needs additional z and z_end variables/fields.parameters: from xyz and TO xyz.


#12

https://processing.org/tutorials/p3d/

Nice tutorial.

If you really go 3D your size() command uses P3D as 3rd parameter. Do you have this?

Then you can draw e.g. a cube by having points not only in one plane/canvas but behind and in front of the canvas. Thus drawing e.g. a cube. Drawing in space instead of on a canvas.

Next: For example you could different views:

From top

From north

From east

From south

From west

Or all 360 degrees inbetween

In each view mouseX and mouseY signify a different plane (view from top: x/z plane; view from north: x/y; from east, y/z etc.)

Next

When drawing instead of drawing continuously with the mouse you could have a mode where you position your 3D cursor freely (using cursor keys and p/l e.g.) and then on return draw (store) a line from last point to 3D cursor position.

Remark

I just realized that you indeed plan to have a 2D canvas inside a 3D environment. I wasn’t reading precisely what you have written. Your description was correct. So most of my points are useless. Sorry for that. :wink:

Remark II

since I am not allowed to post a new post, I have to edit / extend this post :frowning:

for the drawing in an ArrayList thing:

I advice to check if the new point was already recorded.

Because when you hold the mouse without moving it for a second, it will easily store 60 times the same point.

Something like this (in 3D, you can modify it for 2D and for your code):

// Minor 

void addPointIfNew() {

  boolean allowedToAddNewPoint=true; // default

  if (canvas.size()>0) {
    // get last point
    Line3D l3D = canvas.get(canvas.size()-1);
    // if 3D point is the same ignore it
    if (l3D.x==cursor3D.x && 
      l3D.y==cursor3D.y && 
      l3D.z==cursor3D.z) 
      allowedToAddNewPoint=false; // deny
  }//if

  if (allowedToAddNewPoint) {
    canvas.add(new Line3D(previousPoint.x, previousPoint.y, previousPoint.z, 
      cursor3D.x, cursor3D.y, cursor3D.z, lineWeightCurrent, cursor3D.colBox));
    previousPoint = cursor3D.getPos();
  }//if
}//func

#13

Yep! haha it was a 2D canvas in 3D but if I have the time I’ll try to have it so you can draw in 3D aswell. The end goal would be to have a painting environment in VR as if you were an artist painting on a canvas. (Yes it does involve cameras/blob detection and some oscP5 action too)

I see what you mean by checking if a point was already created, the arraylist would start getting really long. (even in VR when the hand wouldnt be moving)
Thanks alot Chrisir, I would have never of thought of something like that.
cool beans