How to create depth in two.js

Question

I have recently been learning how to use two.js and I want to make a circle orbit around another object like a planet. Since it needs to pass behind the object its orbiting around, I'm trying to dynamically change the circle's size as it moves to create the illusion of depth. I saw another overflow question about changing size in two.js using a matrix and tried to apply it here but I cannot get the size changes to match sync with the orbital motion. I would appreciate any help.

JS bin (since it needs two.js library this doesn't produce anything at first but I made it for the convenience of anyone who wants to help): https://jsbin.com/rugakojivu/edit?html,output

<html>
<head>
<script src = "two.js"></script>
</head>
<body>
<div id = "frame"></div>
<script>
var el = document.getElementById("frame");
var two = new Two({fullscreen:true}).appendTo(el);
var bigAngle = 0,
smallAngle  = 0,
distance   = 10,
radius     = 50,
orbit      = 200,
orbits     = two.makeGroup();
var  offset = 300;

function getPositions(angle, orbit) {
return {
    x: Math.cos(angle * Math.PI / 180) * orbit,
    y: Math.sin(angle * Math.PI / 180) * orbit
};
}

var pos = getPositions(bigAngle,orbit),
big = two.makeCircle(pos.x+offset,pos.y+offset,radius);

big.stroke="#123456";
big.linewidth=7;
big.fill="#194878";

big._matrix.manual=true;

two.bind("update",function(frameCount){
  var pos = getPositions(bigAngle++,orbit);
  big.translation.x=pos.x+offset;
  big.translation.y=pos.y+offset;
});

  two.bind("update",function(frameCount,timeDelta){
  var sx=Math.sin(frameCount/200);
  big._matrix
    .identity()
    .translate(big.translation.x, big.translation.y)
    .rotate(big.rotation)
    .scale(sx);

    });
    two.play();


    </script>
    </body>
    </html>

merhoo · Answer 1 · 2019-01-03T00:59:45.433

Your circle doesn't smoothly grow and shrink because the browser can't render it as fast as you need it.

This is from Two.js.org:

two.play() calls two.update() at 60fps. This rate, however, will slowdown if there's too much content to render per frame

Whether you use frameCount or timeDelta this will happen.

The answer in Poor performance - SVG animations reviews some strategies to improve performance in two.js. Additionally you could recreate this using CSS animations with @keystrokes to get the same animation.

I think this is pretty close to what you were doing: https://jsfiddle.net/merhoo/skmz279w/1/

Hope that helps!

How to create depth in two.js

1 Answers1