raster/svg base version click v1 edit

3 images need to some how create a layer that adds a count for intersections to the object

by Nick Hulea

HTML

<script src="http://cdn.eyahuska.com/paper.js"></script>
<canvas resize="true" id="canvas-1"></canvas>
<script type="text/paperscript" canvas="canvas-1">
    var g, l, r, i, v, n, lgroup;
    var intersections = 0;
    var rArray = [];
    var dArray = [];
    var iArray = {};
    var nArray = [];
    var oneArray = [];
    var twoArray = [];
    var threeArray = [];

    var rastera = new Raster({
        source: 'http://cdn.eyahuska.com/one.jpg',
        position: view.center,
        size: view.bounds
        //opacity: 0.5

    });

    var rasterb = new Raster({
        source: 'http://cdn.eyahuska.com/two.jpg',
        position: view.center,
        size: view.bounds

    });

    rastera.on('load', function() {
        loaded = true;
        onResize();
    });

    rasterb.on('load', function() {
        loaded = true;
        onResize();
    });

    l = project.importSVG(document.getElementById('logo'));

    var group = new Group();
    group.addChild(rastera);
    group.addChild(rasterb);
    group.clipped = true;

    function onMouseDown(event) {

        r = new Raster();

        if (intersections == 0) {
            r.source = 'http://cdn.eyahuska.com/two.jpg';
            //console.log('blue');
        }

        r.position = view.bounds;
        rArray.push(r);
        r.on('load', function() {
            loaded = true;
            onResize();
        });
        lgroup = l.children.triangle;
        n = lgroup.clone();
        n.transformContent = true;
        //console.log(dArray);
        g = new Group([n, r]);
        g.clipped = true;
        dArray.push(n);
        n.position = event.point;
        var shape_mouse_click_id = n.id
        iArray[shape_mouse_click_id] = 0;
        //n.bounds.selected = true;
        //console.log(n.bounds.x);
        console.log(iArray);

        //find the intersects start
        var totalIntersections = 0;
        var num = 0;
        dArray.forEach(function(dArrays) {
            for (var i = 0; i <...

CSS

html {
    overflow:hidden;
}
body {
    margin:0;
}