1

I have a paint application program I have programmed from scratch in processing.js and incorporated it into my markdown code on my GitHub page.

This means I would prefer to not use CSS (I would have to link to a JavaScript program that creates a link element to the CSS file and appends it to the head).

In the paint program, there is an eraser that just paints the background, but I want it to look more like they are using an eraser by changing the cursor to the eraser when they have the eraser selected. How could I implement this?

Research - What I have already Tried

At Custom Cursor Image CSS, it needs to be an image, but I want a function that I call inside the file so I can always update it. I also would like to use JavaScript, not CSS.

I have read up on https://processing.org/tutorials/interactivity/ but there is nothing in there about custom cursors, just named ones and images.

Update

I am using the createGraphics function but I can't get it to work as a cursor: http://processingjs.org/reference/createGraphics_/

Links

I host this program in these places

Marvin
  • 853
  • 2
  • 14
  • 38

1 Answers1

0

One approach is to set the cursor to none which will hide the cursor, and then draw the cursor however you want inside your Processing sketch. Here's a very basic example:

void draw(){
  background(32);
  ellipse(mouseX, mouseY, 20, 20);
}

This will show your cursor as an ellipse.

Another approach might be to use a data URI. You'd have to convert your drawing into a 64-bit endoded image, and then pass that into the CSS. I haven't actually tested this.

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • For your first example, I can't do it because the background is outside the draw function because my paint program really is just them smearing a shape's fill. That's why it has to be a cursor – Marvin Sep 13 '18 at 23:00
  • @Marvin Draw your painting to a buffer, the `createGraphics()` function is your friend. Then draw the buffer to the screen, and finally draw your cursor over top of it. – Kevin Workman Sep 14 '18 at 01:54
  • I used `var pg = createGraphics(80, 80, P3D); pg.beginDraw(); pg.background(102); pg.stroke(255); pg.line(40, 40, mouseX, mouseY); pg.endDraw();` and then cursor(pg) but then 'pg' does not show up. image(pg, 10, 10) works – Marvin Sep 15 '18 at 14:34
  • Why are you using `mouseX` and `mouseY` when you draw to `pg`? Just draw a static image to `pg`, and then draw `pg` where you want your cursor to show up. – Kevin Workman Sep 15 '18 at 16:19
  • If I do line(40, 40, 20, 20); everything goes blank and the canvas isn't drawn. The pg should _be_ the cursor' – Marvin Sep 15 '18 at 19:23
  • Never mind, I had an error, but either way, 'pg' is not showing up – Marvin Sep 15 '18 at 19:38
  • Start with my example. Get a circle working for the cursor. Then get it working with a `PGraphics`. If you still can't get it working, please post an updated [mcve] in a new question, and we'll go from there. Good luck. – Kevin Workman Sep 15 '18 at 19:42