Projects from Karel, including ML5 and ZIM and more!

Idea of the challange april2024, to keep a circle into a boundary
https://forum.zimjs.com/t/code-challenge-01-4-26-2024/645/4
is now possible with 2 circles into a square to move the circles
image

into a cave (original motionController

I converted to ml5 https://zimjs.com/ml5/finger
I found out it with this cave idea

but even funnier is to use it as eyes of
so the minions eyes into glasses follow the fingers of the webcam

anybody a simple idea how to make this

how cool!
greetZ

The last one is not working for me - just stays stuck in the middle and I would also rethink your layout.

image

Perhaps put your instructions on a Pane() or at least not on top of one another and try never to have a button that has more than one word - two at the most. And I don't think you have eye tracking - it is fingers so that is confusing? Or does eye tracking place the eyes on the head at the right place? Anyway - it does not fit on the interface nor does Allow Camera nor does Cancel.

What is wrong with our default?

image

I like drawing a lot as this example vodeo I made this drawing zapp

so I created this as zapp also (not yet clicking the colors, must be manual touch)

Ever used ZIM+ThreeJS with ml5 cam pinch gesture ! it works to turn a cube befor ethe cam!

My dream came true @Abstract . turning objects without mouse, only before the webcam
test it here

(now with annoations to click on it and open/close the annotation will come)


you have to pinch to turn the object up/down left/right , you can choose your hand

do you like it?
other ideas!?
tell me
greetz
dreamCoder Karel

with sliders

I think the code is not complete because you did not resave save after getting your screenshot.

1 Like

yes now it should need to work!

1 Like

so now also the ThreeJS objects can be used with the cam to know what is the hitTest to the floor .. so an object can be placed around into the stage.. new dream :slight_smile:

I works for glb/gltf files also now and functionality

  • pinch left hand : up/down = zoom in/out
  • pinch right hand : left<>right = turn left/right, up/down = turn up/down
    the rocket of tintin :slight_smile:

with 2 sliders

or with 3 sliders

thanks
tip: I took the image of the wiki https://en.wikipedia.org/wiki/Pinch_(action)
info Pinching is also a multi-touch gesture, done by squeezing one's fingers on a touchscreen.

  • A pinching gesture
  • A pinch is a grip of a flexible object in which a portion is taken between two fingers

also now the annotations work to click and open/close with pinch



so without annotations


and with annotations, I needed to ask it to chatGPT to get a transparent threeJS with the cam at bottom


so you can test it here

new amazing navigating system, joystick or ml5 can be used (only right finger)

now also into the ocean you can either show only the cam

or joystick and cam active on same page

position the shark
(game will come afterwards)
check the idea game

now also the app as the Octostudio Dpad does it (with ml5 camera also activated)

and the example of the video of Octostudio be be seen in 'real code' not blocks


see video example

greetZ

I fixed it to get the globe workable with sliders, touch and ml5 cam gestures!

do you like?

Nice! Well done - that would have blown our minds in the past.

Seems a little jittery. Sometimes easing can help smoothen things, but if you are good - that's great.

1 Like

fly into the room , touch the screens, the classroom of the future

I had to take care because ThreeJS and webXR have problem for startposition: solved by this article
https://discourse.threejs.org/t/initial-webxr-position-same-as-camera-position/36682/7


test the zapp at

Have lotZ of Fun!

I made it possible to crop pictures and directly upload to github
you need to specify the crop dimensions by the sliders

Works - your url has a typo - you have karelrosseel/alldrwanpics/ where the a and w are mixed up.

1 Like

thanks to report
I have made a masking pic-to-blob also
can you test it

so I can learn kids how to make selections from a big picture
to be using into SLATE , and they start with straight lines, and need to double click to make it curved, so the same way https://Zimjs.com/paths works

.. as Scratch and Octostudio also do .. ZIM can do also now..
would be lovely if ZIM can have this as basic idea
zo a paths2 version where TRACING and EXPORTING to download.png should work

1 Like

Nice. You have your instructions on a pane. That is good. You can also put your buttons on a panel - that way they are collapsible and draggable and it looks more like a professional app. See

1 Like

almost .. much work..
can you make it easier to make a https://ZIMjs.com/croptracemaskpath app?

We might have a look at it one day - yes... probably be able to get that down to 1/10 the code.

1 Like