How to achieve smooth lines outside draw() function

Novezs

I'm trying to do a collaborative drawing website (very original, I know) but whenever the function for drawing a line is called when the other client sends out a data variable with the current and previous mouse positions, the lines look very pixelated as displayed in the screenshot below (right side is the one that drew, which happens in draw() and left side is the client that received it over the socket): https://gyazo.com/0c1e7b2fc823c1974c2b9fffac1c45f9

I'm using express and node to create it.

This is the current client code for drawing: http://pastebin.com/7DnTF8mn

If someone could point me in the right direction It'd be very appreciated!

GoToLoop

line() is issued both inside draw() & newDrawing() using the same coords.
That's gonna bold the pixels already drawn around those coords due to blending and smoothness.

Go to https://OpenProcessing.org/sketch/create & paste the code below & click at play button there:

"use strict";

function setup() {
  createCanvas(800, 600);
  noLoop();
  stroke(255).strokeCap(ROUND);
}

function draw() {
  background(0o50);

  line(100, 100, width - 100, height - 100); // once

  line(width - 100, 100, 100, height - 100);
  line(width - 100, 100, 100, height - 100); // repeated
}

As you can see, the 1st line is thinner, while the 2nd 1 is bolder b/c it was issued 2x. L-)

koogs

this?

https://forum.processing.org/two/discussion/8075/why-are-text-and-graphics-so-ugly-and-blocky

Novezs

@GoToLoop But the newDrawing() is called seperately from draw(), as one only draws when you yourself drags with the mouse, and the other is called when the other person is drawing. Also I really don't see a difference between the two lines in the code your pasted.

@koogs if I call background in draw it will keep erasing what I have drawn

Novezs

I think the issue lies in calling "line" outside of the draw, as the exactly same result can be achieved by calling line only in mouseDragged, as it will also produce the choppy looking line.

Try comparing these two for example:

function setup() {
  createCanvas(windowWidth, windowHeight); 
  background(100);  

} 

function mouseDragged(){
  line(mouseX,mouseY,pmouseX,pmouseY);
}

/*function draw() {
  if(mouseIsPressed==true){
  line(mouseX,mouseY,pmouseX,pmouseY);
  }
}*/

GoToLoop

... and the other is called when the other person is drawing.

I've never used such library before, but I guess socket.emit('mouse', data); inside mouseDragged() would trigger socket.on('mouse', newDrawing);, by calling back newDrawing(), right? /:)

So both line(mouseX, mouseY, pmouseX, pmouseY); from draw() & line(data.x, data.y, data.oldX, data.oldY); from newDrawing() would get executed when dragging the mouse, using same coords. 8-X

GoToLoop

Also I really don't see a difference between the two lines in the code your pasted.

It's subtle, but the 2nd / line() from the X drawing is slightly bolder than the 1st \, b/c the former is double-drawn. 3:-O

koogs

if I call background in draw it will keep erasing what I have drawn

yes. there are ways around that though. remember and redraw the lines every frame. or only draw the lines once to begin with.

Novezs

@GoToLoop Well no that's not how it works, since the message will only be broadcasted to all the other clients, except from the sender, so it will not draw it twice. As I said previously I think the core problem lies in not having the line statement inside draw. Try and use the code I pasted and then see the difference between the quality of the lines.

GoToLoop

I don't have that library, neither know its name.
When including libraries on fora, 1 should post all relevant info on how to run the posted code.
Better yet, have a link to a runnable example! *-:)

Novezs

@GoToLoop I posted a different code that I created in the link you posted (https://openprocessing.org/sketch/create)

Here it is again

function setup() {
  createCanvas(windowWidth, windowHeight); 
  background(100);  

} 

function mouseDragged(){
  line(mouseX,mouseY,pmouseX,pmouseY);
}

/*function draw() {
  if(mouseIsPressed==true){
  line(mouseX,mouseY,pmouseX,pmouseY);
  }
}*/

GoToLoop

Your code just proves my point: if you uncomment your draw(), there'll be double line() at same coords. :-?

Just like your original code which emit() inside mouseDragged(), thus invoking newDrawing(). =;

Novezs

@GoToLoop Ok clearly there is something you are not understanding here :P First of all, as I said it's not being called double since it's only emitting to the other clients, so you will not call both draw and newDrawing.

The point of my posted code was not to have both activated at once, it was to compare the two. So I want you to first run it as it was posted, look at how the lines look, then comment out the "mouseDragged()" and uncomment the draw. Notice the difference. Here's a gif showing the difference between the two: https://gyazo.com/c245efad4559ca508fc81085620d3450

GoToLoop

Perhaps adding return false; as the last statement for mouseDragged() might help: :-/
http://p5js.org/reference/#/p5/mouseDragged

Although in my SlimJet (Chromium-based) browser, mouseDragged() is fine either way! :P

Novezs

Adding return false didn't change anything really.

Does the line not look weird when you use mouseDragged to draw lines?

GoToLoop

Does the line not look weird when you use mouseDragged() to draw lines?

Nope! Same quality as line() inside draw() on my side here. ;;)
What's your browser, version & OS after all? :-\"

Be aware though the p5.js' version used by https://OpenProcessing.org isn't current. @-)
You're gonna need to test the code for yourself using latest p5.js' version:
http://CDN.JSDelivr.net/p5.js/latest/mainfile

Who knows the bug you're seeing on your side is fixed by now? [-O<

Otherwise, if latest version doesn't work, issue a bug report for it below: >-)
https://GitHub.com/processing/p5.js/issues

Novezs

@GoToLoop I'm using chrome and windows 10.

But I seem to have solved the problem. Instead I now create the data variable and initialize it in setup, and then updating the data values constantly in draw(), and using these values in both the draw() and newDrawing(). Thanks for your help anyways =)

This is the new code (ugly atm but will clean up) if anyone else happens to get this problem in the future:

http://pastebin.com/au5kNfDg

Although there is still a slight issue with the line not looking as smooth as the client-side one, but it's nowhere near as bad as before.

GoToLoop

Maybe there's some diff. between using touchpad & a proper mouse?
Phablets also got touchscreen for input as well.

For precaution, always use return false; for global events such as mouseDragged().

And of course, make sure you're getting latest p5.js version:
http://CDN.JSDelivr.net/p5.js/latest/mainfile

Novezs

I mean I downloaded p5 yesterday so I don't think that's an issue tbh.

I added return false; now, thanks :)