3

The problem: I'm trying to create a simple drawing app using p5.js. Instead of the standard cursor image, I'd like to show a circle at my cursor location that represents the size of the drawing brush.

Potential solution 1: Replace the cursor using the cursor() function native to p5.

Why it doesn't work: The p5 cursor function only takes the following parameters:

ARROW, CROSS, HAND, MOVE, TEXT, or WAIT, or path for image

As such, there's no native way to replace the cursor using the ellipse class.

Potential solution 2: Use the noCursor() function and then draw the circle at the cursor location, while also drawing the background, as such:

var brushSize = 50;

function setup() {
  createCanvas(1080,720);
  noCursor();
}


function draw() {
  background(100);
  ellipse(mouseX,mouseY,brushSize);

}

Why it doesn't work: While this solution gets the desired effect i.e. replacing the cursor with a circle the size of the brush, the constantly updating background prevents me from actually drawing to the canvas with the brush when I want to.

Is there some way I can replace the cursor without actually drawing the ellipse to the canvas? Is there any way to save and then instantly reload a canvas in p5? I couldn't find such a method searching through the API docs. Any hints are appreciated.

Skylar Kennedy
  • 357
  • 1
  • 8
  • 18

2 Answers2

1

According to the reference, you can pass a URL into the cursor() function to set an image.

If you want to use an image that you draw, you're going to have to draw them ahead of time and save them to files, and then use those files. Something like this:

cursor('images/ellipse-15.png');

Where ellipse-15.png is an image that you generated ahead of time, to match when brushSize is 15, for example.

Btw P5.js is just setting the cursor CSS property. You can read more about it here.

If you want to go with the noCursor() approach and draw the ellipse yourself, you could draw your drawing to a buffer (the createGraphics() function is your friend) and then draw the ellipse on top of that every frame. I'd still probably use a cross cursor just because there's going to be some annoying lag if you draw it yourself.

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • Hey Kevin, thanks for the response! Do you know if there's any way to use `createGraphics()` to generate a circular buffer or will it always be a rectangular object blocking out a portion of the canvas? – Skylar Kennedy Apr 07 '18 at 03:07
  • Actually, I've thought of a different solution but run into another problem altogether. I've used `createGraphics()` to span the entire canvas, rendering the cursor ellipse on top of the new buffer and regenerating the background of the buffer. I'm trying to make the background transparent relative to the canvas, but I can only make it transparent relative to itself. Do you know of a workaround where I can recreate a transparent background thereby achieving the intended result? – Skylar Kennedy Apr 07 '18 at 04:41
  • @SkylarKennedy Please ask follow-up questions in their own posts. I don't understand what you mean by "transparent relative to itself". The buffer returned from `createGraphics()` is transparent by default. – Kevin Workman Apr 07 '18 at 15:07
  • Thanks Kevin, I asked the follow-up question [here](https://stackoverflow.com/questions/49710913/how-can-i-make-backgrounds-in-p5-js-transparent-but-continue-to-hide-elements-dr) – Skylar Kennedy Apr 07 '18 at 19:00
0

Create a circular DIV inside the canvas container and show it on top of the actual canvas.

Bugs
  • 4,491
  • 9
  • 32
  • 41
artur bień
  • 111
  • 5
  • Welcome. Please expand your answer to contain more information and maybe code to show how this can be done. At the moment you run the risk of your answer being deleted as it is currently more like a comment. Please see [answer]. – Bugs Oct 04 '18 at 07:35