raster/svg intersections working

this demo show dynamic svg intersections created on click

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">
    function contains(a, obj) {
        var i = a.length;
        while (i--) {
            if (a[i] === obj) {
                return true;
            }
        }
        return false;
    }

    var hitOptions = {
        segments: true,
        stroke: true,
        fill: true,
        raster: true,
        tolerance: 50
    };

    var g, l, r, i, v, n, lgroup;
    var intersections;
    var rArray = [];
    var dArray = [];
    var iArray = [];
    var i2Array = [];

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

    });

    var rasterb = new Raster({
        source: 'http://cdn.eyahuska.com/one.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 circlea = new Path.Circle({
        radius: 100,
        position: view.center,
        fillColor: 'red'
    });


    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';
        }

        //find the intersects start
        dArray.forEach(function(dArrays) {


            for (var i = 0; i < n.children.length; i++) {
                for (var j = 0; j < dArrays.children.length; j++) {

                    if (n.children[i] !== dArrays.children[j]) {

                        intersections = n.children[i].getIntersections(dArrays.children[j]);

                        for (var k =...

CSS

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