Apple Pencil in P5.js

Gallery
1

Hey everyone,

I just made a basic drawing app in p5.js with support for the Apple Pencil.

It uses Pressure.js to handle the pointer events so it should work with other input devices too. Let me know if you try it with other pencils and/or tablets! [edit: it also works with regular touch events on iPhone]

Online demo: https://editor.p5js.org/SableRaf/full/PNSk4uR9v
Repository: https://github.com/SableRaf/PencilToP5

Here’s how it looks:

pencilToP5
pencilToP5.jpeg2224×1668 453 KB

Thanks to Abe Pazos (a.k.a Hamoid) for the help figuring out the tricky parts :slight_smile:

12 Likes
2

When I draw a line and release the mouse, drawing will not stop immediately, instead, it keeps going absurdly and leaves a long trail. Do you have a more optimized version? I am interested in it.

3

Hi Lucifer1004,

This is a feature of the pressure.js library I use to capture the levels of pressure of the Apple pencil. When using an input device that doesn’t have pressure (like your mouse), it simulates pressure in this way (rising slowly as you keep the button pressed, and falling slowly after you release). This can be configured in the parameters of the pressure.js library.

However, if what you need is a sketch that lets you draw with your mouse, you’d be better of with something like this tutorial: http://coursescript.com/notes/interactivecomputing/drawingapp/index.html

2 Likes
4

This is super cool! If you’ve got a minute, do you know if pressurejs supports Wacom tablets? Just out of curiosity for those of us who don’t have an iPad pro, haha.

EDIT: It looks like they do if anyone’s curious, I’d be super interested to see how its sensitivity/latency compares against the apple pencil or a surface.

1 Like