Processing 1.0 - Processing Discourse - Two sketches in one window

laerad

Two sketches in one window
Aug 17^th, 2009, 5:56pm

Is it possible to divide the window into different areas, like frames on a website?

For example, in MS paint, the tools and all that is on the left side, while the drawing canvas is on the right, both are independent of each other.

Each frame will have it's own draw(), mouseX, mouseY, etc. Basically it's two sketches in one window.

Thanks.

Cedric YaBB Moderator Offline Posts: 1838	Re: Two sketches in one window Reply #1 - Aug 17^th, 2009, 7:30pm hmm dont know exactly what you are aiming for, but by creating 2 classes you actually have two setups, draws, etc. and in your main draw you then just have to write draw(){ class1.draw(); class2.draw(); } for example... you then just have to limit the sketches to different areas of the main sketch...
	twitter.com/CedricKiefer

laerad

Re: Two sketches in one window
Reply #2 - Aug 18^th, 2009, 1:09am

I'm basically trying to make something like a MS paint clone. It doesn't serve any real purpose for now, it's just to test out a few ideas.

I tried creating 2 classes but that would not work for some libraries like geomerative and NextText.

For example using NextText:

Code:

class class1{

Book b;

void setup(){
   size(100,100);
   book = new Book(this);
   }
}

This doesn't work because the Book constructor is expecting a PApplet object, whereas "this" refers to an object of class1.

Is there any way around this?

Thanks.

Cedric

Re: Two sketches in one window
Reply #3 - Aug 18^th, 2009, 1:20am

its not called setup then, and you cant put size in there, you have to limit is different. i made a really simple drawing sketch for somebody a while ago, where i simply draw a black rect under the interface. but you can also say something like this if(mouseX<100) {dont draw} else {draw.... http://www.dec32.de/public/p5/simpledrawing/
to limit your brushes to a special area.

check out this OOP tutorial : http://processing.org/learning/objects/

twitter.com/CedricKiefer

PhiLho

Re: Two sketches in one window
Reply #4 - Aug 18^th, 2009, 2:17am

laerad wrote on Aug 18^th, 2009, 1:09am:

This doesn't work because the Book constructor is expecting a PApplet object, whereas "this" refers to an object of class1.

Several ways, like getting the parent of your class, etc. but the simpler way might be to pass the PApplet instance reference to your class, like you do for library class constructors.

laerad

Re: Two sketches in one window
Reply #5 - Aug 18^th, 2009, 3:37am

Thanks for the links. I need 2 sketches because using background(0) to clear the screen clears the entire screen, even the buttons area that don't require clearing. It can also cause flickering when there are a lot of things to redraw.

But if I use one sketch to handle the output/display area, and the other to handle the actions/buttons area, and a 3rd sketch to control them, I can clear just the drawing area only or just the buttons area only with background(0) because both are independent of each other(with their own setup(), draw(), etc.).

PhiLho wrote on Aug 18^th, 2009, 2:17am:

Several ways, like getting the parent of your class, etc. but the simpler way might be to pass the PApplet instance reference to your class, like you do for library class constructors.

Do you mean something like
Code:

class1(PApplet p){} //constructor

and then doing
Code:

class1 c = new class(this);

That looks like it would work.

While searching the forums, I found this library that does exactly what I need.

http://www.soi.city.ac.uk/~jwo/processing/multiWindow/index.html

There are 2 ways I can think of to do this. 2 embedded sketches running in 1 window. Or 2 classes controlled by 1 sketch. They are not the same thing.

With 2 sketches, if I do background(0) in one, the other will not be affected. Also, 2 sketches means 2 drawing canvas/coordinate systems, making things a lot easier when deciding where to add buttons.

With 2 classes, doing background(0) will clear the entire thing.

That library works great, but I still can't use "this". Is there any way to get the PApplet in the current sketch besides using "this"?

Cedric YaBB Moderator Offline Posts: 1838	Re: Two sketches in one window Reply #6 - Aug 18^th, 2009, 3:47am instead of calling background(0); to clear the screen you can do it like i did in my little drawing sketch. Just call fill(0); rect(100,0,width-100,heigth); to leave the first 100px untouched. Thats the same as calling background
	twitter.com/CedricKiefer

antiplastik

Re: Two sketches in one window
Reply #7 - Aug 18^th, 2009, 5:30am

Quote:

There are 2 ways I can think of to do this. 2 embedded sketches running in 1 window. Or 2 classes controlled by 1 sketch. They are not the same thing.

IMHO, don't go that way! It's way too complicated for what you want to do.

Quote:

For example, in MS paint, the tools and all that is on the left side, while the drawing canvas is on the right, both are independent of each other.

The "tools and all that" part of your sketch is a user interface. You can use some librairies to do that (in most of the case they will be rendered over the main sketch window, so you can clear the background as often as you want) :
http://processing.org/reference/libraries/#interface

If you want to do your own stuff, do like Cedric says : draw your different parts separately on the same sketch. If it gets complicated, use buffers :
http://processing.org/reference/createGraphics_.html

You can draw the left pane in a buffer, draw the right pane in another, then paste both buffers on your main sketch window.

NoChinDeluxe

Re: Two sketches in one window
Reply #8 - Aug 18^th, 2009, 6:40am

There is absolutely no way you need to do multiple sketches for the program you are describing. You just need to learn how to use and manipulate classes a little. You're definitely over-thinking the whole thing. For this, I would pretty much put all of my clearing methods and everything in their own classes, kind of how Cedric described above. So that way, the interface takes care of its own thing, the drawing part takes care of its own thing, etc. So in your main draw() method, you pretty much just have:
Code:


void draw(){
     buttonsInterface.update();
     buttonsInterface.draw();
     drawingCanvas.update();
     drawingCanvas.draw();
     ... 
}

So as you can see, it's pretty much the same thing as having multiple sketches, but much less complicated.

laerad

Re: Two sketches in one window
Reply #9 - Aug 18^th, 2009, 5:33pm

I would like 2 sketches because the tool area and the drawing area should be separate. Like it will be possible to hide/move the toolbar. Also, the problem with doing it all in one sketch is the coordinates. I would like the top left of the drawing canvas to be 0,0 and the first button/tool to also be 0,0. Mainly because it's easier to not have to calculate the offsets.

Using a PGraphics buffer resolves the coordinates problem and causes another one, NextText is unable to draw on a PGraphics canvas. But NextText is unable to draw stroke/outlines correctly anyway. Geomerative is able to draw on PGraphics, the stroke/outlines in geomerative are still broken, but at least it works.

I got the idea of using another sketch when looking through the ControlP5 documentation for the ControlCanvas.

There will be a text-editor feature later on, kinda like the one available here when making a new post. Since that is independent and can work on it's own, it's better to put it into another sketch. I think I know what to do now. I'll split what I have into different classes first.

Thanks for the help.

NoChinDeluxe

Re: Two sketches in one window
Reply #10 - Aug 18^th, 2009, 6:11pm

laerad wrote on Aug 18^th, 2009, 5:33pm:

I would like 2 sketches because the tool area and the drawing area should be separate. Like it will be possible to hide/move the toolbar. Also, the problem with doing it all in one sketch is the coordinates. I would like the top left of the drawing canvas to be 0,0 and the first button/tool to also be 0,0. Mainly because it's easier to not have to calculate the offsets.

But that's kind of my point. To do the coordinates thing, you could easily just translate() your coordinates so that you could treat them like they were at (0,0). I just think you're not exhausting the power of the standard API before you are going for a more complicated solution. There are little tricks like this (such as the black rectangle clearing solution by Cedric) that are much easier to implement, that's all. But you go for what works for you. But if you need any more help on this stuff, feel free to ask.

laerad YaBB Newbies Offline Posts: 13	Re: Two sketches in one window Reply #11 - Aug 18^th, 2009, 6:39pm Yea, I forgot to mention it. I was looking at the Processing reference again and just found out about the translate/popMatrix/pushMatrix/matrix stack functions. So with that, I got everything I need to start working on my project. I'll be using those functions for coordinates and rect() to clear the screen. Thanks.