touch draw

by paulftw

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />

<div id=container>
    <canvas id=main width=270 height=270>
    </canvas>
</div>
<div id=log></div>

CSS

#container {
    margin: 5px;
    border: 2px dashed #ccc;
}

canvas {
    box-shadow: 0 0 10px 0 #333;
}

div, canvas {
    padding: 0;
}

JavaScript

var dbg = ''
var log = function() {
    for (var i = 0; i < arguments.length; i++) {
        dbg += ' ' + arguments[i];
    }
    $('#log').text(dbg);
};



var Input = {};
_.extend(Input, Backbone.Events);

var foo = {
    colors: [
             ['fff', 'fff', 'fff', ],
             ['fff', 'fff', 'fff', ],
             ['fff', 'fff', 'fff', ],
            ],
};
_.extend(foo, Backbone.Events);

foo.listenTo(Input, 'touchend', function(e) {
    console.log('touchend', e);
    log('end', e.changed.length);
    if (e.changed.length != 1) return;
    
    var x = Math.floor(e.changed[0].x / 90);
    var y = Math.floor(e.changed[0].y / 90);
    log('rnd', x, y);
    foo.colors[x][y] = ('' + Math.random()).substr(2, 6);
              
});

var $canvas = $('canvas#main');
var ctxt = $canvas[0].getContext("2d");
var render = function() {
    for (var x = 0; x < 3; x++) {
        for (var y = 0; y < 3; y++) {
            ctxt.fillStyle = '#' + foo.colors[x][y];
            ctxt.fillRect(x*90, y*90, 90, 90);
        }
    }
    requestAnimationFrame(render);
};
requestAnimationFrame(render);


var canvas_x = $canvas.offset().left;
var canvas_y = $canvas.offset().top;
var canvas_zoom = 1;
var touchPos = function(touch) {
    return {
        x: (touch.pageX - canvas_x) / canvas_zoom,
        y: (touch.pageY - canvas_y) / canvas_zoom,
    };
};

var currentTouches = {};

$canvas.on('touchstart', function(e) {
    e = e.originalEvent;
    log('start', e.changedTouches.length);
    var changed = [];
    for (var i = 0; i < e.changedTouches.length; i++) {
        var tp = e.changedTouches[i];
        var id = tp.identifier;
        var pos = touchPos(tp);
        var touch = {
            id: id,
            startX: pos.x,
            startY: pos.y,
            x: pos.x,
            y: pos.y,
        };
        log(pos.x, pos.y);
        changed.push(touch);
        currentTouches[id] = touch;
    }
    Input.trigger('touchstart', {
        touches: currentTouches,
       ...