Blend and 2d Translate distorted image

dfliess commented 7 years ago

When Blending two images and applying a 2D effect for changing one image position you get a strange behaviour where pixels get repetead.

<!DOCTYPE html>
<html>
<head>
    <title>Seriously.js Camera Demo</title>
</head>
<body>
    <canvas id="target" width="4096" height="2048"></canvas>

    <img style="display:none" id="backimg" src="../images/panorama.jpg">
    <img style="display:none" id="front" src="../images/pencils.jpg">

    <script src="../../seriously.js"></script>
    <script src="../../effects/seriously.blend.js"></script>

    <script>
    (function() {
        //main code goes here

        // declare our variables
        var seriously, // the main object that holds the entire composition
            blend, // edge detection effect
            target, // a wrapper object for our target canvas
            position; //effect to move front image

        if (Seriously.incompatible()) {
            document.body.appendChild(document.createTextNode('Sorry, your browser does not support getUserMedia'));
            document.querySelector('canvas').style.display = 'none';
            return;
        }

        // construct our seriously object
        seriously = new Seriously();

        // time to get serious
        target = seriously.target('#target');
        blend = seriously.effect('blend');
        position = seriously.transform('2d');

        position.source='#front';
        position.scale(0.99); //FIXES THE BUG
        position.translate(-50,-50); //NO BUG WITH 0,0 but yes with other positions

        // connect all our nodes in the right order
        blend.top = position;
        blend.bottom ='#backimg';

        target.source = blend;

        seriously.go();
    }());
    </script>
</body>
</html>

dfliess commented 7 years ago

After further tests we found that the issue is when the top image is smaller, the blend is interpolating pixels instead of using transparent ones, any idea on how to change this ?

brianchirls commented 7 years ago

Yeah, this is super weird. I will look into it.

In the meantime, if you're using "normal" blend mode, you can just use the layers effect instead. It doesn't appear to have the same bug.

var layers = seriously.effect('layers', 2); // second param is # of layers
layers.source0 = '#bottom';
layers.source1 = '#top';

brianchirls commented 7 years ago

See if that fixes it (develop branch).

dfliess commented 7 years ago

HI brian, I went with layers option that it is what I really need. Also I downloaded de develop branch and tested it with the blend. It's working better but there is a new problem, I think this should translate the image but instead it's being cropped, maybe a sizeMode issue ?

brianchirls / Seriously.js

Blend and 2d Translate distorted image #131