Drawing with ML5 HandCursor and ZIM Pen

[Ferudun]

First of all, thank you for these nice innovations. I couldn't figure out how to do it with mousedown for the pen. I tried a few times. I added MotionController for both mousedown and pressmove but I couldn't succeed.

[Abstract]

Hi Ferudun - I bet I know what it is... the cam is in the background and MotionController won't operate on it unless it is added to mousedown includes or a noMouse() is set to the cam. We should probably make the cam noMouse() by default... not sure if we should do that though. Then you could not drag it etc. So... will check setting noMouse() on the cam now...

[Ferudun]

const controller2 = new MotionController({
    target:pen2, 
    type:["pressmove","mousedown"],
    mousedownIncludes:[cizim_yeri1,cizim_yeri2,kumHavuzuResim,silgiCircle], // so we can mousedown on drawing and the motioncontroller will still work
    speed:70,

});
Is this correct usage? I add both pressmove and mousedown for the pen.

When I touch the place I marked in red, the container draws a line from point 0 to the place marked in red.

[Abstract]

No... it worked for me. So the cam() is already set to noMouse() by default. If I do set it to mouse() then it does not work. Here is and example:

Using ML5 Hand Tracking with ZIM Pen

We realized too that we had not uploaded the final version of cam - so now we have, make sure to clear your cache. Will just update the NPM now...

[Abstract]

Moved this to a new topic... the MotionController does not accept an array for a type so you would probably get the default type which is press and the object goes to where pressed.

So have a look at the example we posted...

[Ferudun]

I don't do it with glass. I use a normal pencil.

[Ferudun]

I edited it online. The ZIM018 I downloaded is probably not the latest. But if pen.end="round" is not set, it looks very small. How can I download the latest ZIM018?

[Ferudun]

My problem is solved. I was using a container for pen.paper. I was updating the container. I had to update lastSegment.dispose() first. I found it by trial and error.

pen2.on("stop", ()=>{

pen2Cont.updateCache(erase?"destination-out":"source-over");
pen2.lastSegment.dispose(); // get rid of the last drawn line in the paper
}); Thank you very much for everything. Especially today, thanks to you, I learned that we need to use noMouse() for passive texts or shapes.

[karelrosseel82]

I tested on phone but no result for the cam, can you test on Android?
cam also stretched.. how to solve because cam not appears , it stays black in app chrome..
at editor I get cam.prepairtrack is not a function

[Abstract]

You guys do not need to @danzen me - I am @Abstract here... @danzen is a second account I rarely log in to.

[karelrosseel82]

ok, Abstract

[karelrosseel82]

I made a zapp drawing tool for on the webcam

what do you think, funny for my kids
check out the zapp

ZIM+ml5 drawing ontop of webcam, with touch, or pinch (+pen settings) ENG

greetZ

[karelrosseel82]

i found also on linkedin this project idee with ml5 and p5

hand drawing demo

Gesture-Based Drawing with Machine Learning!
I built a hand gesture drawing app using ML5.js (a machine learning library for JavaScript) and P5.js! This project allows you to draw on a canvas using only your hand movements, without a mouse or keyboard.
How It Works?
Raise Your Index Finger () – Start drawing
Lower Your Finger – Stop drawing
Move Your Hand – Create smooth strokes on the canvas
Tech Stack:
ML5.js – Machine Learning model for hand tracking
P5.js – Interactive graphics & canvas
JavaScript (ES6)
HTML & CSS
Check out the live demo and GitHub repo below!
Live Demo: https://lnkd.in/dVTV_2ZS
GitHub Repo: https://lnkd.in/d_p7qwQp
I’d love to hear your thoughts! Drop a comment below and let me know what you think.
#MachineLearning
ml5
#P5
#HandTracking
#WebDevelopment
#JavaScript
#CreativeCoding
ai