How To Real-time Multi-touch

1

// Listen for Touch Coordinates
PUBNUB.subscribe({
    channel  : 'touch-receive',
    callback : update_player
});

10

    e.cancelBubble = true;
    e.returnValue  = false;
    e.preventDefault();
    e.stopPropagation();

11

// Create UUID
PUBNUB.uuid(function(uuid) {
    console.log(uuid);
});

12

// Get Current Timestamp
PUBNUB.time(function(time) {
    console.log(time);
});

13

body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
        overflow-y: hidden;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-text-size-adjust: none;
    }

14

    <meta
        name=viewport
        content='width=320,height=480,user-scalable=0'>
    <meta
        name=apple-mobile-web-app-capable
        content=yes>
    <meta
        name=apple-mobile-web-app-status-bar-style
        content=black-translucent>

2

// Set Browser to Gaming Mode
PUBNUB.bind(
    'mouseup,mousedown,mousemove,touchmove,' +
    'touchstart,touchend,selectstart',
    document,
    update_pointer
);

3

// Capture Touch Coordinates
function update_pointer(e) {
    var pointers    = current_player.pointers = mouse(e)
    ,   offset_top  = offset( painter, 'Top' )
    ,   offset_left = offset( painter, 'Left' );

    // Apply Touch Offset
    each( pointers, function(pointer) {
        pointer[0] -= offset_left + 20;
        pointer[1] -= offset_top  + 60;
    } );

    // Draw Touches Locally
    update_player({
        pointers : current_player.pointers,
        uuid     : '',
        now      : now()
    });

    // Send Coordinate Information
    publish_updater();
}

4

function mouse(e) {
    // Bubble if No Touch Coordinates
    if (!e) return [[0,0]];

    // Detect Touch Coordinates Available
    var tch  = e.touches && e.touches[0]
    ,   mpos = [];

    // Touch Coordinates
    if (tch) {
        PUBNUB.each( e.touches, function(touch) {
            mpos.push([ touch.pageX, touch.pageY ]);
        } );
    }
    // Mouse Coordinates
    else if (e.pageX) {
        mpos.push([ e.pageX, e.pageY ]);
    }
    // Mouse Coordinates IE
    else { try {
        mpos.push([
            e.clientX + body.scrollLeft + doc.scrollLeft,
            e.clientY + body.scrollTop  + doc.scrollTop
        ]);
    } catch(e){} }

    // Return Captured Coordinates
    return mpos;
}

5

[ [x,y], [x,y], [x,y] ]

6

// Create UUID
PUBNUB.uuid(function(uuid) {
    console.log(uuid);
});

7

// Provide Rate Limited Function Call
function updater( fun, rate ) {
    var timeout, last = 0;

    // Return Rate Limited Function
    return function() {
        var right_now = now();

        // Time to Execute Function?
        if (last + rate > right_now) {
            clearTimeout(timeout);
            timeout = setTimeout( runnit, rate );
        }
        else {
            last = now();
            fun();
        }
    }
}

8

// Called on Touch Move Events
var publish_updater = updater( function() {
    // Must be Ready Before Sending.
    if (!current_player.ready) return;

    // Send Player Touch Coordinates.
    PUBNUB.publish({
        channel : 'touch-receive',
        message : {
            pointers : current_player.pointers,
            uuid     : current_player.info.uuid,
            last     : last++
        }
    });
}, wait );

9

// Called for All Touch Events (from everyone)
function update_player(message) {
    var uuid     = message['uuid'] || 'self'
    ,   last     = message['last']
    ,   pointers = message['pointers']
    ,   i        = 0;

    // Leave if transmitted coords from yourself.
    if (!current_player['info']) return
    if (uuid == current_player.info.uuid) return;

    
    // Is this a New Touch?
    if (!points[uuid]) {
        points[uuid] = {
            last    : last,
            touches : []
        };
    }

    // For Each Pointer
    each( pointers, function(point) {
        // Create Sprite DIV for the Pointer
        if (!points[uuid].touches[i]) {
            points[uuid].touches[i] = {
                xy     : point,
                sprite : sprite.create({
                    image : {
                        url    : 'print.png',
                        width  : 40,
                        height : 60,
                        offset : {
                            top  : 0,
                            left : 0
                        }
                    },
                    cell : {
                        count : 1
                    },
                    left : point[0],
                    top  : point[1],
                    framerate : 60
                })
            };

            
            // Set Random Fingerprint Opacity
            var opacity = Math.random();
            css( points[uuid].touches[i].sprite.node, {
                opacity :
                    opacity < 0.5 ?
                    0.5           :
                    opacity
            } );
        }

        
        // Draw Self Touches
        if (uuid == 'self') {
            css( points[uuid].touches[i].sprite.node, {
                left : point[0],
                top  : point[1]
            } );
        }
        
        // Draw Remote Touches (From other People)
        else {
            sprite.move( points[uuid].touches[i].sprite, {
                left : point[0],
                top  : point[1]
            }, wait );
        }

        // Next Pointer
        i++;
    } );
}