make Two.js work with cocoon.js

[BenjaminHorn]

Hi Jono!

First of all thank you for the excellebt library, exactly what i needed (webgl renderer for performance + vector graphic support, bc im gonna use a lot of SVG paths).
Im trying to use two.js with cocoonjs but im experimenting some problems.

You can see on the two screenshot (2x zoom) the difference between the two circles

i have tried

var elem = document.body; var params = { type: Two.Types.webgl, fullscreen:true };

var two = new Two(params).appendTo(elem);
console.log(two);
two.antialias = true;

but it did not help.

Im trying to implement a drag system, but if i drag the blue square i have this issue:

If i change the Two.Types to canvas it works as expected.

Is there any official support forum/ google group for two.js?

Here is the whole code:

<script src = "libs/two.js"></script>

    <style>
        body{
            background: black;
        }
    </style>
    <script>
    // Make an instance of two and place it on the page.
    var elem = document.body;
    var params = { type: Two.Types.webgl, fullscreen:true };
    var two = new Two(params).appendTo(elem);

    console.log(two);
    two.antialias = true;
    // two has convenience methods to create shapes.
    var circle = two.makeCircle(72, 100, 50);
    var rect = two.makeRectangle(213, 100, 100, 100);

    // The object returned has many stylable properties:
    circle.fill = '#FF8000';
    circle.stroke = 'red'; // Accepts all valid css color
    circle.linewidth = 5;

    rect.fill = 'rgb(0, 200, 255)';
    //rect.opacity = 0.75;
    rect.noStroke();

    // Don't forget to tell two to render everything
    // to the screen


    two.play();


    function pan(deltaX, deltaY){

        rect.translation.x += deltaX;
        rect.translation.y += deltaY;


    }

    var vmousedown = false;
    var mouseX, mouseY;
    var deltaX_old = 0;
    var deltaY_old = 0;
    var deltaX,deltaY;

    elem.addEventListener("touchstart", function(ev)
    {
        vmousedown = true;
        mouseX = ev.touches[0].pageX;
        mouseY = ev.touches[0].pageY;

    });

    elem.addEventListener("touchmove", function(ev)
    {
        deltaX = ev.touches[0].pageX - mouseX - deltaX_old;
        deltaY = ev.touches[0].pageY - mouseY - deltaY_old;

        pan(deltaX,deltaY);

        deltaX_old = ev.touches[0].pageX - mouseX; 
        deltaY_old = ev.touches[0].pageY - mouseY;
    }); 

    elem.addEventListener("touchend", function(ev)
    {
        deltaX_old = 0;
        deltaY_old = 0;

    });             

    </script>
</body>

[jonobr1]

Thanks for posting! I'm on the road today, but will take a look at this tonight. Just curious what does this have to do with cocoon.js? It sounds like these are issues independent of cocoon, right?

[BenjaminHorn]

The texts on the screenshot are maybe missleading. Android means running the code on Android through cocoonjs, and browser means running the very same code on desktop / latest chrome.

To the second issue: if i use mouse events:

    var vmousedown = false;
    var mouseX, mouseY;
    var deltaX_old = 0;
    var deltaY_old = 0;
    var deltaX,deltaY;

    elem.addEventListener("mousedown", function(ev)
    {
        vmousedown = true;
        mouseX = ev.pageX;
        mouseY = ev.pageY;

    });

    elem.addEventListener("mousemove", function(ev)
    {
        if (vmousedown === false)
            return;
        deltaX = ev.pageX - mouseX - deltaX_old;
        deltaY = ev.pageY - mouseY - deltaY_old;

        pan(deltaX,deltaY);

        deltaX_old = ev.pageX - mouseX; 
        deltaY_old = ev.pageY - mouseY;
    }); 

    elem.addEventListener("mouseup", function(ev)
    {
        vmousedown = false;
        deltaX_old = 0;
        deltaY_old = 0;

    });

on the desktop browser is everything ok, but running it on cocoonjs / android with the touch events causes that weird result.

One could think maybe it cocoonsjs's fault, but if i draw this primitives for instanse with pixi.js (2D webgl framework), then it works fine.

[jonobr1]

Interesting, thanks for further context. I won't have access to Android until tomorrow, but I will definitely try to run your example with the cocoon.js adk debug build. Until then, I added a fix so that you'll be probably able to request antialias. Try this and let me know if this fixes the first problem:

var two = new Two({ type: Two.Types.webgl, antialias: true });
// Run code as usual

My guess is that when you're dragging or possibly at all times the gl context is getting confused on what to keep on screen and what if anything to clear. Keep you posted.

[BenjaminHorn]

Thanks for the fix.

var two = new Two({ type: Two.Types.webgl, antialias: true });
console.log(two.antialias);

gave me false with the old build, with the patch its true, as expected. Unfortuneatly the cricle is still edgy on droid.

[jonobr1]

Cool thanks for the update. I'm digging into the ADK of cocoon.js today so hopefully I can help out with some answers or fixes!

[jonobr1]

Download the latest build of two.js — this should fix both your problems 👍

To note, the aliased effect was actually due to the buffer not being cleared. So, by default you shouldn't have to set antialias to true in order to get smooth edges. Don't hesitate to let me know if there's anything else that comes up.

I also put up a test that I've been running to debug here: canvas • webgl

[BenjaminHorn]

thank you!! That was quick;). The dragging works excellent, but unfortunetly i still have same aliased circle. Could you please post an android screenshot from the antialiased circle? What device do you use?

[jonobr1]

Ah, I see you're right. Here's a screenshot from my Nexus 7. Unfortunately this has to do with devicePixelRatio. Two.js automatically tries to upsample your canvas for you based on hdpi, but it looks like Cocoon doesn't have those variables available for reading so it always defaults to 1 instead of what could be a higher ratio like 2.

You can set the ratio yourself in two.js. I tried that and it doesn't seem to help as Cocoon doesn't resolve as expected. Typically when upsampling you would do something like this with your canvas:

// Where ratio can be equal to or larger than 1
canvas.width = x * ratio;
canvas.height = y * ratio;
canvas.style.width = x + 'px';
canvas.style.height = y + 'px';

This effectively stuffs more pixels per "pixel". When setting canvas.width and canvas.height Cocoon just makes the whole canvas that size...

[BenjaminHorn]

According this : http://wiki.ludei.com/cocoonjs:releases they Added “window.devicePixelRatio” and “screenDensity” in version 1.4 Tomorrow im gonna continue to investigate this.