Processing 1.0 - Processing Discourse - Drawing with mouse in Processsing

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Programs › Drawing with mouse in Processsing

‹ Previous Topic | Next Topic ›

Pages: 1

Drawing with mouse in Processsing (Read 1649 times)

hype1

Drawing with mouse in Processsing
Nov 24^th, 2009, 3:04pm

Hi,

I am writing a program to draw with Processing. I am stuck in calculations to get smooth lines drawn (as you draw them in Photoshop). Whenever you will draw an object, i.e. rectangle or ellipse, on the mouse position, the next object will be on the mouse position of the next frame. How to draw objects between these frames or positions? I have used rectangles and calculated the angle at which they have to be placed, because later on I will use rectangle-shaped objects to draw. Increasing frameRate doesn't solve anything.

Any ideas on this?

Code:


float difY, difX;    // store differences in mouse position 
                     // to measure angle
float currRadians;   // current angle in radians
int rectWidth = 30;

void setup() {
  size(600, 600);
}

void draw() {
  difY = mouseY - pmouseY;
  difX = mouseX - pmouseX;
  if (difX != 0 && difY != 0) {
    currRadians = atan2(difY, difX);
  }
  translate(mouseX, mouseY);
  float speed = abs(difY) + abs(difX);
  rotate(currRadians);
  rect(0, 0, 5, rectWidth);
}

Giles Senior Member Offline Posts: 252	Re: Drawing with mouse in Processsing Reply #1 - Nov 24^th, 2009, 3:16pm That's because pmouseX and pmouseY are only updated once per frame when they are used in draw(); I think you need to use then in a mouseMoved() method instead. I could be wrong, but that is what I would try. Also, it looks much better as a sort of brush if you use the centre rectangle mode (rectMode(CENTER)).

hype1 YaBB Newbies Offline Posts: 27	Re: Drawing with mouse in Processsing Reply #2 - Nov 24^th, 2009, 3:20pm After taking a close look at Photoshop I was able to see that a brush stroke is really made out of dots too. This must be a difficult problem to solve.

hype1 YaBB Newbies Offline Posts: 27	Re: Drawing with mouse in Processsing Reply #3 - Nov 24^th, 2009, 3:22pm @Giles Well, even then you will not be able to draw more objects than the framerate. Also, these variables are only used to get the angle at which the rectangle has to be placed. edit: Thanks for the rectMode(CENTER) tip. I didn't knew this function existed. Was trying to find out a calculation for that too.

Giles Senior Member Offline Posts: 252	Re: Drawing with mouse in Processsing Reply #4 - Nov 24^th, 2009, 3:24pm You could store all of the x and ypositions between mouseX and pmouseX in an Array, and then draw them afterwards. This would force the computer to draw every pixel increment, even if it lagged behind the mouse position.

Giles Senior Member Offline Posts: 252	Re: Drawing with mouse in Processsing Reply #5 - Nov 24^th, 2009, 6:46pm Or, even easier (I just thought of this while in the bath), you could just divide the distance between (pMouseX, pMouseY) and (mouseX, mouseY) by 10 (or some appropriate number), and then draw a rect at each of the intermediate positions.

hype1

Re: Drawing with mouse in Processsing
Reply #6 - Dec 7^th, 2009, 7:25am

Thanks Giles. That worked out fine.

Having sorted this out, I came across another problem. It seems that in Processing while drawing in the draw() function, the variabels mouseX and mouseY give irregular mouse positions (or measures at irregular intervals of time), while drawing inside mouseMoved() gives much more regular mouse positions.

Check out the following programs:

Code:

void setup() {
  size(1000, 800);
  fill(0);
}

void draw() {
  ellipse(mouseX, mouseY, 10, 10);
}

versus:

Code:

void setup() {
  size(1000, 800);
  fill(0);
}

void draw() {
}

void mouseMoved(){
  ellipse(mouseX, mouseY, 10, 10);
}

The latter will draw circles with much more regular divisions between the dots. The former tends to draw on irregular moments. I have tested both with the same movement and speed of my mouse.

Can anyone give me an explanation why the one differs from the other? I would like to use draw() in my program, but with the regular intervals of mouseX and mouseY measures.

PhiLho

Re: Drawing with mouse in Processsing
Reply #7 - Dec 7^th, 2009, 7:57am

draw() is called at the rate of sketch refresh, set by frameRate(), defaulting to 60fps.
Rate isn't set in stone, if a draw() operation is longer than, say, 1/60th of second, it will skip a frame.
That's why tracking mouse is draw() isn't as reliable as using mouseMoved(), which is triggered by the system: you can have several mouse events occurring during a frame, they are queued by Processing.
So when draw() is called, all the drawing orders you have set in mouseMoved are dequeued and executed.
Hence the finer granularity of events.

"I would like to use draw() in my program"
Well, as shown, you have to use it, otherwise mouse events won't be processed.
draw() and mouseMoved() are not antagonist, they are complementary. Newbies prefer to use mouse and key checks in draw(), while more experienced coders use the event handlers.

Pages: 1

‹ Previous Topic | Next Topic ›