3 images brush

by Nick Hulea

HTML

<script src="http://cdn.eyahuska.com/paper.js"></script>
<canvas resize="true" id="canvas-1" style="width:100%;"></canvas>
<script type="text/paperscript" canvas="canvas-1">
    var g, c, r, i, v;
    v = 0;
    v = isNaN(v) ? 0 : v;
    v++;
    var rArray = [],
        topGroup = new Group(),
        mousePath = null;

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

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

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

    var rasterc = new Raster({
        source: 'http://cdn.eyahuska.com/three.jpg',
        position: view.center,
        size: view.bounds
    });

    rasterb.on('load', function() {
        loaded = true;
        onResize();
        topGroup.addChild(rasterb);
        topGroup.insertChild(0, new Path());
        topGroup.clipped = true;
    });

    rasterc.on('load', function() {
        loaded = true;
        onResize();
    // topGroup.removeChild(rasterb);
    //topGroup.addChild(rasterc);
    //topGroup.insertChild(0, new Path());
        topGroup.clipped = true;
    });

    var brush = new Path.Circle({
        radius: 50,
        strokeColor: 'red'
    });

    tool.fixedDistance = 20;

    function onMouseMove(event) {
        brush.position = event.point;
    }

    function onMouseDown(event) {
        brush.position = event.point;
        mousePath = topGroup.children[0];
        addBrushStroke();
    }

    function onMouseDrag(event) {
        if (!mousePath) return;
        brush.position = event.point;
        addBrushStroke();
    
    }

    function onMouseUp(event) {
        mousePath = null;
        console.log(project.layers)
    }

    function onResize(event) {
        rastera.fitBounds(view.bounds, true);
       ...