Simple drawing with processing, a few questions.

Programming Questions

000gbt

Simple drawing with processing, a few questions.

in Programming Questions • 2 years ago

Hello,

I'm a Processing beginner.

I'd like to explore drawing with a mouse with Processing, a seemingly simple issue, but I fail.

the most basic code is the one following (not including the setup() method):

void draw() {
if (mousePressed) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
}

It has a drawback: curves are rendered by approximations (several straight lines) when moving the mouse fast,

as you can see here:

if a line is drawn fast, the differerence between mouse and pmouse is big, and connected by straight lines, which is obvious on this image...

I am trying to get rid of this behaviour, and I'm searching for a way to draw each pixel the mouse has gone over.

I have tried to replace the line function, by a curve function (and an array of four mouse positions: mouse, pmouse, and the previous pmouse, and the previous previous pmouse). It works somehow (no more nasty straight lines), but this solution has another drawback for the project I have:

I cannot control each pixel color, but only color of an entire curve. I'd like, for instance have darker pixels when the mouse is moved slowly (abs(mouse-pmouse) is small).

So how could I track the position of the mouse for everypixel it crosses, or at least at a higher rate than framerate?

I've tried to do a loop inside draw() to draw several time a line inside each frame:

void draw() {
for (int i = 0; i < 10; i++) {
if (mousePressed) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
}

but it doesn't work, which is easy to check by adding to the loop

println("loop: " + i +" mouseX: " + mouseX);

while i cycle from 0 to 9, mouseX doesn't change...

Do you have any hint?

thanks a lot.

Replies(6)

tfguy44

Re: Simple drawing with processing, a few questions.

2 years ago

The problem here is that the mouse doesn't go over each pixel.

When you move a modern mouse quickly, it moves a lot more than a pixel at a time!

The points that it does hit are given by mouseX and mouseY for each frame.

When you draw lines between your points, you get a jagged line because the mouse actually moves in a jagged line!

You could smooth out this line - as you have said you've tried - but the resulting curve isn't going to draw " each pixel the mouse has gone over" if you do.

000gbt

Re: Simple drawing with processing, a few questions.

2 years ago

Thanks a lot for your answer,

so there is no way to have a higher sampling frequency of the mouse position? (for instance instead of having an update of the mouse position 60 times in a second, every frame, having it 1000 times in a second).

If there is no way, is it a Processing limitation, or a system limitation?

amnon.owed

Re: Re: Simple drawing with processing, a few questions.

2 years ago

The default frameRate in Processing is capped to 60fps. You could uncap it by setting it manually to something higher.

void setup() {
size(500,500);
background(255);
frameRate(10000);
// frameRate(10); // at lower framerates it becomes even more apparent
}
void draw() {
if (mousePressed) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
}

Another solution would be to keep track of all the mouse coordinates by seperating it from draw().

ArrayList <PVector> points = new ArrayList <PVector> ();
void setup() {
size(500, 500);
noFill();
}
void draw() {
background(255);
beginShape();
for (PVector v : points) {
vertex(v.x, v.y);
}
endShape();
}
void mouseMoved() {
points.add(new PVector(mouseX, mouseY));
}

Finally, Toxiclibs has a very nice smoothDoodle example, which in the toxiclibs.js version looks like this.

PhiLho

Re: Simple drawing with processing, a few questions.

2 years ago

It is a system limitation, you will see similar behavior in a simple native paint application, for example (eg. Paint on Windows).
You can address the issue with curves with bezierPoint() or equivalent.

Greger

Re: Simple drawing with processing, a few questions.

2 years ago

You might be able to set up a custom MouseMotionListener that polls the mouse more often than once per frame in its own thread, and then store intermediate values in an array.

I am not sure if that will work, but could be worth looking into.

http://download.oracle.com/javase/1.4.2/docs/api/java/awt/event/MouseMotionListener.html

000gbt

Re: Simple drawing with processing, a few questions.

2 years ago

thanks a lot for all your answers:

I try to summarize:

about the rate of mouseX, mouseY update:

it is difficult to know what it is tied to in Processing:

it seems to be tied to the actual frameRate of the sketch, except with the example code below, where the mouse event are listened outside the draw() loop,

and except maybe when using Java synthax, one may access to lower level functions, and change the refresh rate of thoses variables. (that point for now is a little over my head, but I'll look into it).

I did the following experiment:

I tried to change the framerate to a higher value, but couldn't see a visible improvement.. it even lead me to think that the absolute max of frameRate was 60, which seems false anyway, because a print(frameRate) gave me max value around 200 400 on my computer. but I guess this number is not high enough to give me the results I seeks.

Still it may be a first step into that direction.

I even tried to do the drawing outside of the void draw() loop:

//array of four coordinates used to store mouse position, and to draw a curve from it
int[] xPos = new int[4];
int[] yPos = new int[4];
void setup() {
size(600, 600);
background(255);
frameRate(60);
smooth();
noFill();
for (int i = 0; i < 4; i++) {
xPos[i] = 0;
yPos[i] = 0;
}
}
// nothing in draw() !!!
void draw() {
}
// if mouse is moved, store the last position
void mouseMoved() {
for (int i = 0; i < 4; i++) {
xPos[i] = mouseX;
yPos[i] = mouseY;
}
}
// if mouse is dragged, draws.
void mouseDragged() {
for (int i = 0; i < 3; i++) {
xPos[i] = xPos[i+1];
yPos[i] = yPos[i+1];
}
xPos[3] = mouseX;
yPos[3] = mouseY;
stroke(0);
curve(xPos[0], yPos[0], xPos[1], yPos[1], xPos[2], yPos[2], xPos[3], yPos[3]);
stroke(255, 0, 0);
line(pmouseX, pmouseY, mouseX, mouseY);
stroke(0);
ellipse(mouseX, mouseY, 10, 10);
}
// BACKSPACE clears the screen, and SPACE saves a drawing.
void keyPressed() {
if (key == ' ') {
save("drawing.png");
}
else if (key == BACKSPACE) {
background(255);
}
}

But it didn't really gave much improvement, except here the mouseX refresh rate seems independant of the draw frameRate...

then what decide of this refresh rate?

(By the way it's funny because it's close to the example you pointed me to! (wrote it before your answer)).

Also, the example shows the second part of the answer: using curve instead of line. (bezier will come next).

Still searching...

Top Reply