0

I am working on a game, quite simliar to skribbl io. To paint in the game i am drawing lines between mouseX/Y an pmouseX/Y with p5.js

if(mouseIsPressed){
  line(mouseX, mouseY, pmouseX, pmouseY);
}

as the code gets more complex the distance of the points are getting bigger and the drawing happens delayed and is "angular" when dragged fast:

example of not so round circles

Is there another way to paint in p5.js? I am looking for a solution making these "reverse C's" more round, not ~8 lines. so basically a higher rate of when coordinates are saved in pmouseX/Y.

CrackbuddyMethusalem
  • 21
  • 6
  • It's kind of unclear what you are asking. When you say "finer pencil possible?" are you asking about the thickness of tine lines? It's confusing because then in the body of your question you start taking about the "angular" nature of the lines you're drawing. Try to avoid subjective words like "better" and "nicer." Be as specific as possible about what behavior you would like to see. – Paul Wheeler Jun 18 '21 at 02:39
  • Also, it is always nice if you can include a runnable snippet of the code in question: https://stackoverflow.com/questions/67410651/how-do-i-include-a-runnable-p5-js-sketch-in-a-stackoverflow-question – Paul Wheeler Jun 18 '21 at 02:39
  • Thank you for your response. Give me more appropriate words then, english is not my first language. Of course i am not asking about thickness, i am asking for a hgher rate of lines when painting. I thnk there is no other part in my code relevant for this question - so what should i include? – CrackbuddyMethusalem Jun 18 '21 at 03:44
  • This issue also occurs if you have a empty project - just the 1 if(mouseIsPressed)-statement. - hope that helps understanding why i did not include further code – CrackbuddyMethusalem Jun 18 '21 at 04:03
  • Your edits made it much easier to understand what you goal is. Thank you. – Paul Wheeler Jun 18 '21 at 19:58
  • @CrackbuddyMethusalem would [interpolating between points](https://stackoverflow.com/questions/40673192/processing-draw-vector-instead-of-pixels/40677300#40677300) help ? (Paul Wheeler's suggestion regarding curveVertex() is also great) – George Profenza Jun 20 '21 at 00:18

1 Answers1

1

Here is what brought a huge improvement: I excluded as many functionalities from the draw function into their own functions and called these functions when neccessary. I guess thats normal but i did not see it before Paul Wheeler got me thinking about showing my further code. now the complexity of the code does not affect the painting.

But if you have other ways to paint in p5js you are still welcome to share with me!

CrackbuddyMethusalem
  • 21
  • 6
  • This is correct, because Javascript in browsers is single threaded, the more complex your draw function is the less frequently the browser will sample the mouse position, and so you will get these large changes resulting in long straight line segments. I haven't been able find any special way to get higher frequency mouse tracking in the browser. – Paul Wheeler Jun 18 '21 at 20:29
  • 1
    You could also try experimenting with curveVertex (https://p5js.org/reference/#/p5/curveVertex) to smooth your lines without actually having more points. – Paul Wheeler Jun 18 '21 at 20:30