drawing rectangle on screen

General Discussion Other

mtx1983

in General Discussion • Other • 2 months ago

hello, perhaps silly question but i struggle with it as beginner.

i want to create rectangle using mouse coordinates. so desired behviour would be like this:

mouse pressed -> set starting position of upper-left corner of rect...
mouse dragged -> setting end position of rectangle (lower-right corner)
mouse released -> end of drawing the rect.

so pretty much the same as 'selection tool' in many graphic applications.

how can i program this in processing?
rect() function allow me to create rectangles only based on predefined coordinates...

thanks for help.

Replies(6)

ashleyjam..

Re: drawing rectangle on screen

2 months ago

simplest way is to store 4 variables and pass those into the rect(a,b,c,d);

use mouseDragged and mousePressed

roughly like this

int a, b, c, d;
void setup() {
size(800, 600);
a=0;
b=0;
c=0;
d=0;
}
void draw() {
background(0);
stroke(255);
strokeWeight(2);
noFill();
rect(a, b, c, d);
}
void mousePressed() {
a=mouseX;
b=mouseY;
}
void mouseDragged() {
c=mouseX-a;
d=mouseY-b;
rect(a, b, c, d);
}

mtx1983

Re: Re: drawing rectangle on screen

2 months ago

this is nice and simple but unfortunately when i use mouseDragged() then, if i keep pressing mouse button but stop moving it then the rect will halt to draw.

dimkir

Re: drawing rectangle on screen

2 months ago

In order to accomplish this you have to model what you want to accomplish.

You know that your sketch runs at (let's say) 30 frames per second. So you know that your void draw() will be runnign 30 frames per second. So

Again it's easier to represnt things mechanically.

The confusion you see is because what want to see finally on the screen is the RENDERING of your model. But not your model yourself.

For example if you think of bouncing ball sketch, then what you see is a rendring of a bouncing ball. However what happens.

BouncingBallModel model = new BouncingBall(width, height);
/**
* I do not like using draw() method directly, because it's name suggests
* that it's drawing what happens every step. Which is not true.
* On every step there're two actions which are happening:
model_update();
&
model_render();
* If you think of the bouncing ball as an example, then in model_update() we will update the coordinates
* of the ball.
* And in model_render() we will render the ball at the coordinates calculated in the previous step.
This is why I just call them in draw, and then continue thinking abstractly in terms of model&rendering of the model.
*/
void draw(){
model_update();
model_render();
}
/**
* Here we will execute code which
* will update THE MODEL which we see on the screen.
*/
void model_update(){
}
/**
* Here we will execute code, which will
* simply RENDER the already updated earlier model, without modifying it.
*/
void model_render(){
}

So again, if we want to have complete example with bouncing ball, then it may look like this:

void setup(){
size(400,300);
background(0);
noStroke();
ballModel = new BouncingBallModel(width, height); // here we initialize model which model coordinates of the ball bouncing in the rectangle of given width and height.
}
BouncingBallModel ballModel; // this is just convenience class which you can copy/paste into separate tab.
// we don't write code directly in draw(), but in mode_xxxx() methods,
// but just because FOR HUMANS it's more convenient to think about what happens
// as of two steps (update model and render model). For computer or Java it makes no difference
// where we put the code.
void draw(){
model_update();
model_render();
}
/**
* Here we will execute code which
* will update THE MODEL which we see on the screen.
*/
void model_update(){
ballModel.update(); // this is convenience method, which calculates next coordinate of the bouncing ball
}
/**
* Here we will execute code, which will
* simply RENDER the already updated earlier model, without modifying it.
*/
void model_render(){
float ball_x = ballModel.getX();
float ball_y = ballModel.getY();
background(0);
fill(255);
ellipse(ball_x, ball_y, 20,20);
}

And the sketch would give you the following result:

This sketch is simple, but it's good for the illustration of the principle of separation of the model from rendering.

This separtion is really good, because now by modifying only rendering part (model_render() method), we can get different effects. Let's say we change code of model_render() to this:

void model_render(){
float ball_x = ballModel.getX();
float ball_y = ballModel.getY();
// background(0);
fill(255);
rect(ball_x, ball_y, 20,20);
}

Now we get a white square moving around and it's not erased eveyr frame, so it leaves trail.

We can even randomize the size of the square like this:

// code

void model_render(){
float ball_x = ballModel.getX();
float ball_y = ballModel.getY();
// background(0);
fill(255);
float rand_side_length = random(20, 40);
rect(ball_x, ball_y, rand_side_length, rand_side_length);
}

to get effect like this:

you can even make image fly around the screen just by modifying model_render():

// just put image "apple2.png" into the data folder of your sketch.
void model_render(){
float ball_x = ballModel.getX();
float ball_y = ballModel.getY();
// background(0);
PImage ballImage = loadImage("apple2.png"); // for simplicity of example, i load image every from from disk
imageMode(CENTER);
background(0);
image(ballImage, ball_x, ball_y);
}
void model_render(){
float ball_x = ballModel.getX();
float ball_y = ballModel.getY();
// background(0);
PImage ballImage = loadImage("apple2.png");
imageMode(CENTER);
background(0);
image(ballImage, ball_x, ball_y);
}

Or we can fade the screen to get the trail of an image:

void model_render(){
float ball_x = ballModel.getX();
float ball_y = ballModel.getY();
// fade screen for nicer effect
fill(0, 2);
rect(0,0, width, height);
PImage ballImage = loadImage("apple2.png");
imageMode(CENTER);
image(ballImage, ball_x, ball_y);
}

So you can see, that just by playing with model_render() you can achieve pretty good effects. However just modifying the renderer of the model has certain limitations.

Limitation 1:

What if you want your image to rotate?

if you want to rotate image by random angle you can still use model_render() and perform it like this:

void model_render(){
float ball_x = ballModel.getX();
float ball_y = ballModel.getY();
// fade screen for nicer effect
fill(0, 2);
rect(0,0, width, height);
PImage ballImage = loadImage("apple2.png");
imageMode(CENTER);
float randomRotationAngle = random(PI*2); // returns random angle from [0..PI*2]
// this code just draws _rotated_ image at given coordinates.
pushMatrix();
translate(ball_x, ball_y);
rotate(randomRotationAngle);
image(ballImage, 0, 0);
popMatrix();
}

to get:

But what if you want SMOOTH ANGLE ROTATION??? What if you want the apple to rotate slowly and smoothly, but not sproadically like in sketch:

Then you run exactly into limitation of playing only with model_render() . In order to smoothly change angle of the apple to rotate it, you need to store this angle somewhere... from the first glance you can do it this way:

float angleOfApple = 0;

void model_render(){

float ball_x = ballModel.getX();

float ball_y = ballModel.getY();

// fade screen for nicer effect

fill(0, 2);

rect(0,0, width, height);

PImage ballImage = loadImage("apple2.png");

imageMode(CENTER);

// float randomRotationAngle = random(PI*2); // returns random angle from [0..PI*2]

angleOfApple = angleOfApple + 0.1; // each step we turn 0.1 radians which is approx 6 degrees

// this code just draws _rotated_ image at given coordinates.

pushMatrix();

translate(ball_x, ball_y);

// rotate(randomRotationAngle);

rotate(angleOfApple);

image(ballImage, 0, 0);

popMatrix();

}

Now the sketch does what we wanted: allows ball to fly and change angle smootly around the screen, and it may seem that we have achieved success. But despite it's counter-intuitive: we commited a huge failure. We didn't follow the principle of separation of model update and model rendering. And despite working now, it will lead to great confusion, diffuculty in modifying sketch and trying new things and thus limiting creativity.

The evil of this problem is that it's hard to notice for an untrained eye and " sketch does what i want, right?". The problem is that now model_update() is not just renders model but it actually "modifies" model. When we decided to introduce rotation angle (or chanching color or radius) of an object, it IS A CHANGE OF THE MODEL not of the rendering. As human you perceive what's happening on the screen as "objects flying around screen". Which is not completely true. From computer perspective what you see on the screen is a RENDERING of underlying MODEL. If you want a good visualization of what model is than maybe this is what could help:

In the model of "bouncingBall" all there is : just two coordinates X and Y [222.0, 172.0] which are changing to simulate flying and bouncing. When you make apple rotate, than visually for you "object of apple is rotating" but that's not how computer or processing sees it. For computer what happens is:

"the model of bouncing ball now includes one more parameter ( angle) which is changes overtime by small value to simulate rotation

So now if we "x-ray the model" it may look like the picture below. You can see that angle value is chaning by approx 0.1 radian each step.

Now you can also see that ANGLE BELONGS TO MODEL NOT THE RENDERER! And because of that it should not be modified inside of of model_render() method.

So what would be the right way to simulate rotation?

The right way is:

a) include angle inside of the model of the object

b) update the model only from model_update()

c) the method model_render() only fetches information from the model and creatively displays it, but doesn't modify it.

The proper code would be something like:

void model_render(){
float ball_x = ballModel.getX();
float ball_y = ballModel.getY();
// here we request the angle from the model. In model_render() we're only concerned
// to fetch it and display (the model) and don't care how these things are calculated.
float angleOfApple = ballModel.getAngle();
// fade screen for nicer effect
fill(0, 2);
rect(0,0, width, height);
PImage ballImage = loadImage("apple2.png");
imageMode(CENTER);
// this code just draws _rotated_ image at given coordinates.
pushMatrix();
translate(ball_x, ball_y);
rotate(angleOfApple);
image(ballImage, 0, 0);
popMatrix();
}

But enough of introduction, let's see HOW DOES THIS APPLY TO YOUR RECTANGLE DRAWING PROBLEM:

dimkir

Re: drawing rectangle on screen

2 months ago

So let's think of your rectangle drawing task, imagine you want to draw this rectangle with the mouse:

Let's retrace the steps of how it's done:

First you just have blank screen. You can move your mouse around the screen and nothing happens.

Then you can click and start "drawing rectangle with your mouse"

And you can continue drawing it until you're done. And then you release the mouse and rectangle is there to stay.

That was how You (humans) see it. But that's not how computer or Processing sees or models it. As I was mentioning above, what you see is "rendering of the model" not "object". And let's think of what renderer does:

// first let's write our renderer, just thinking of
// what we have seen on the screen
void model_render(){
// render will query model,
// if there is rectangle to draw, we need to draw it
// if there's no rectangle to draw
// (eg. sketch just started), we don't draw anything
background(0); // clear screen
if ( rectModel.hasRectangle() ){
// get rect corners and render the rect.
PVector topLeft = rectModel.getTopLeft();
PVector bottomRight = rectModel.getBottomRight();
textSize(24);
rectMode(CORNERS);
fill(255);
noStroke();
rect(topLeft.x, topLeft.y, bottomRight.x, bottomRight.y);
}
else{
fill(255);
text("Model has no rectngls. U just started sketch", width/2, height/2);
}
}

This is a perfectly valid renderer. And it's simple to implement, because it complies with the visual of sketch which we have in our mind. As I mentioned earlier, humans are used to speak of what they see on the screen "i see rectangle is getting larger sides, whilst I drag mouse", but to think how computer thinks we must say "I see that renderer is rendering the model to correspond to the changes of the model. The model changes by updating the size of the rectangle as per mouse movement(coordinates)".

So now let's get to the meat of the task: what should we include in the model?

The simpliest is that we need to include the coordinates of the rectangle:

topLeft point coordinate
bottomRight point coodinate

also remember that when we start sketch the model is empty (doesn't have a rectangle yet). So we can include a boolean flag which denotes if the model has or doesn't contain a rect

hasRectangle boolean flag

In processing we can seal this model into a class (in PDE you can create new tab with name "RectangleModel"

class RectangleModel

{

    PVector topLeft = new PVector();

    PVector bottomRight = new PVector();

    boolean hasRectangle = false; // we start empty



}

And now let's write a skeleton sketch for the model:

http://studio.sketchpad.cc/sp/pad/view/RgPVoxbKp3/rev.489

The skeleton just implements model_render() and the model the according to our current understanding.

So let's go further and write mouse handing , the first step is just to write to the mouseXXXX() methods in plain English we think we want: Below is the mouse code and here's link to the code

void mousePressed(){
// i want to tell model,
// that we start drawing a rectangle
// that we need to use current mouse coordinates
// as a starting point and
// that the model gets ready to receive more of the
// coodinates, once mouse is dragged along the screen
}
void mouseDragged(){
// when i am in mouseDragged() we're assuming
// that mousePressed() was called before,
// thus preparing the model to receive new coordinate
// and that's why all I want to do here is to tell
// model to update the bottom right corner of the rect
}
void mouseReleased(){
// once we're here, it means that mousePressed/mouseDragged
// were called before, and we want to tell model that
// we have finished drawing the rectangle
}

In the next step what we do, is try to convert our "English description" into Processing language. You can see the lines of code I added in bold. As you can see, "English description" is way longer that it's concise processing counterpart.

void mousePressed(){
rectModel.startDrawingRectAt(mouseX, mouseY);
}
void mouseDragged(){
rectModel.updateBottomRight(mouseX, mouseY);
}
void mouseReleased(){
rectModel.finishDrawing();
}

But the code above won't run, because we haven't written methods

rectModel.startDrawingRectAt(mouseX, mouseY);
rectModel.updateBottomRight(mouseX, mouseY);
rectModel.finishDrawing();

But this is easy to accomplish (see code in bold and comments for code):

class RectangleModel
{
PVector mTopLeft = new PVector();
PVector mBottomRight = new PVector();
boolean mHasRectangle = false; // we start empty
boolean mIsInDrawingState = false; // this variable just helps us to know
// if we're expecting from the sketch
// more calls to update rect position.
void startDrawingRectAt(float xx, float yy){
mTopLeft.set(xx, yy);
mBottomRight.set(xx,yy);
mIsInDrawingState = true; // we start
mHasRectangle = true; // and now there's something to render
// despite it's just a point now
}
void updateBottomRight(float xx, float yy){
// this is just error checking code which makes sure that
// we always call startDrawingRectAt() before we start updating corners.
// it's not as much useful in current version of code, but will
// help you with debugging when you add functinality
if ( ! isInDrawingState() ){
throw new RuntimeException("You can only call updateBottomRight() after calling startDrawingRectAt(). Model currently is not in drawing state");
}
// that's all we do: just update the corner
mBottomRight.set(xx, yy);
}
boolean isInDrawingState(){
return mIsInDrawingState;
}
// this method just tells model to switch off "drawingState".
void finishDrawing(){
mIsInDrawingState = false;
}
// These are just "getters" for the variables, because we want to
// do be "cool" and try to code in "Java Object Oriented" style
PVector getTopLeft(){
return mTopLeft;
}
PVector getBottomRight(){
return mBottomRight;
}
boolean hasRectangle(){
return mHasRectangle;
}
}

And here you are, working sketch at http://studio.sketchpad.cc/sp/pad/view/RgPVoxbKp3/rev.1253

mtx1983

Re: Re: drawing rectangle on screen

2 months ago

Thanks for the reply, it was very descriptive and i learned a lot through this - especially the render-update 'phase' of draw method.

I have used vectors as well, my approach was to use
mousePressed event to get beginCorner initialized and
mouseReleased event to get endCorner initialized.

I used draw() to draw my rect only while button is pressed. i think the logic is ok here as there will be no mouseRelease event if there was no preceeding mousePressed event, right?

The only thing i am missing now is that the rectangle should basically disappear after it was created.
The purpose of this magic rect is to select over some multiple other objects and change their features (ie. to change their color) and then disapear ;)

Thanks a lot !

PVector beginCorner = new PVector();
PVector endCorner = new PVector();

void setup() {
size(500, 500);
smooth();
rectMode(CORNERS);
}

void draw() {
background(255);

if (mousePressed) {
rect(beginCorner.x, beginCorner.y, mouseX, mouseY);
}
else {
rect(beginCorner.x, beginCorner.y, endCorner.x, endCorner.y);
}
}

void mousePressed() {
beginCorner = new PVector(mouseX,mouseY);
}

void mouseReleased() {
endCorner = new PVector(mouseX,mouseY);
}

ashleyjam..

Re: drawing rectangle on screen

2 months ago

then just put a boolean switch in to ensure it draws on first click then dragging just moves it and then do a second click to finalise the rectangle

its really quite simple and as you only need it for a simple visual cue then it doesnt require massive code to achieve

Top Reply