Mocap-Driven Skeleton

Drag to rotate. Mousewheel to zoom.


  width  = 900
  height = 500

  # Create empty scene
  scene = new seen.Scene
    cullBackfaces    : false
    fractionalPoints : true
    model            : seen.Models.default()
    viewport         : seen.Viewports.center(width, height)

  seenModel = scene.model.append()

  # Add mouse-rotate
  dragger = new seen.Drag('seen-canvas', {inertia : true})
  dragger.on('drag.rotate', (e) ->
    xform = seen.Quaternion.xyToTransform(e.offsetRelative...)
    seenModel.transform(xform)
  )

  # Add mousewheel-zoom
  zoomer = new seen.Zoom('seen-canvas', {smooth : false})
  zoomer.on('zoom.scale', (e) ->
    xform = seen.M().scale(e.zoom)
    seenModel.transform(xform)
  )

  # Create a context with a dark fill layer and the scene layer
  context = seen.Context('seen-canvas')
  context.layer(new seen.FillLayer(width, height, '#444'))
  context.sceneLayer(scene)
  context.render()

  # Define a 'Shape Factory' for creating the shapes in our mocap model
  shapeFactory = (joint, endpoint) ->
    radius = switch true
      when /thumb|index|mid|ring|pinky/ig.test(joint.id) then 0.4
      when /hand/ig.test(joint.id) then 1
      when /abdomen|chest/ig.test(joint.id) then 6
      when /hip/ig.test(joint.id) then 4
      else 2

    color = switch true
      when /foot|hip|abdomen|chest/ig.test(joint.id) then '#FF88FF'
      when /shin/ig.test(joint.id) then '#FFFFFF'
      else '#FFD2A6'

    return seen.Shapes.pipe(seen.P(), endpoint, radius, 8).fill(color)

  $.get 'assets/05_11.bvh', {}, (contents) ->
    # Parse the file and generate the shapes and transforms
    mocap = seen.Mocap.parse(contents).createMocapModel(shapeFactory)

    # Add the shapes to our scene
    seenModel.append().translate(0,-50,0).add(mocap.model)

    # Animate the frame from the file
    animator = new seen.MocapAnimator(mocap)
    animator.onFrame(context.render)
    animator.start()