Using the Mouse as a Drawing Tool

[van326]

Hi! I am currently playing around with coding the ability to draw in p5.js, and so far it’s turning out okay, but I have a question about using the mouse as a brush. Ideally, I would like to have it where whenever the user clicks the mouse (mousePressed), the brush will stop making lines, and then continue making lines when it is pressed again. I currently also have it set to whenever the mouse is pressed, the background is cleared and recreated. When I tried typing in the code to have both the background reset and the brush stop/start, the brush stopped appearing.

Am I missing a step to add the ability to control when the brush is and isn’t being used, or am I ordering the information incorrectly? I have attached a link to my sketches; you can view the project that is named “Sketchy Sketch.” Thanks in advance!!

https://editor.p5js.org/van326/sketches

[colin]

Hi, @van326

By not displaying your background you managed to keep a track of the mouse of your user, but this trick wont be enough to go further.

There is plenty of way of doing a paint like sketch, I suggest you to use an array of vector.

Here is an example of how array works in p5
https://p5js.org/examples/arrays-array.html

And here is how to use vector
https://p5js.org/reference/#/p5/createVector

Feel free to ask if you need help

Also, you can share each of your sketches separately in the p5 editor in the file tab -> share

[kll]

BUT if you not want go from PAINT Mode to CONSTRUCT Mode
here a small idea of a nice paint tool i made in JAVA Mode but just now translated for you ( using my )

Mouse Wheel Plus Plus

p5.js Web Editor

use mouse LEFT press for paint, RIGHT press for erase 
MousewheelPlusPlus: press
[r] red
[g] green
[b] blue
[w] brush size
and turn mousewheel