Mobile support?

[briansoule]

Before I go gallivanting off to search for a CSS touch intercept parameter, is there already a common method of allowing verlet to work with mobile? Currently touches seem to scroll the entire page instead of manipulating the canvas.

[subprotocol]

Unfortunately no, I made no consideration for mobile when initially building verlet-js. This would be a very welcome contribution.

[dcromer]

I don't think you need to do anything library-specific to get this behavior on mobile browsers. You should be able to intercept the touch events using javascript. I've never actually done this with touch per-se, but I've done it with other applications where I didn't want the default scroll behavior.

A quick google search yields this:

http://stackoverflow.com/questions/2890361/disable-scrolling-in-an-iphone-web-application

It's probably a good starting point.

[1j01]

PEP.js is good for this sort of thing. You have to handle multiple pointers, but it's pretty straightforward.

pointers = {}

canvas.setAttribute "touch-action", "none"

canvas.addEventListener "pointerdown", (e)->
    undoable()
    pointers[e.pointerId] =
        x: e.clientX
        y: e.clientY
        dragging: get_point_near(e.clientX, e.clientY)

canvas.addEventListener "pointermove", (e)->
    pointer = pointers[e.pointerId]
    if pointer
        pointer.x = e.clientX
        pointer.y = e.clientY

canvas.addEventListener "pointerup", (e)->
    delete pointers[e.pointerId]

canvas.addEventListener "pointercancel", (e)->
    delete pointers[e.pointerId]
    # NOTE: this is an active simulation we can't really cancel the drag since it's already taken effect.

# and then in the animation loop
for pointerId, pointer of pointers
    drag_point_to(pointer)

[MellongLau]

Hi guys, I have made a iOS one for verlet-js, https://github.com/MellongLau/ParticleAnimation