Tumble Interaction

A tumble interaction allows the user to view the model from any angle by clicking and dragging in the canvas. Let the current position and orientation of the model be initialized and stored globally:

〈Interaction〉 ≡
  variable modelRotationX ← 0
  variable modelRotationY ← 0

We'll want a relative tumble, so we'll need to track whether a mouse drag is happening and where the pointer has been:

  variable draggingfalse
  variable lastClientX
  variable lastClientY

When the user presses the mouse button, make a note of it and start tracking the most recent mouse location.

  function onmousedown(event)
    draggingtrue
    lastClientXevent.clientX
    lastClientYevent.clientY

When the user releases the mouse button, stop tracking.

  function onmouseup(event)
    draggingfalse

When the user moves the mouse while the button is down, alter the orientation of the model accordingly.

  function onmousemove(event)
    if dragging
      dXevent.clientXlastClientX
      dYevent.clientYlastClientY

      modelRotationYmodelRotationY + dX
      modelRotationXmodelRotationX + dY

      if modelRotationX > 90.0
        modelRotationX ← 90.0
      if modelRotationX < −90.0
        modelRotationX ← −90.0

      Request a new animation frame.

    lastClientXevent.clientX
    lastClientYevent.clientY

These functions must be made properties of the canvas entity…