Manually update Matrix

This Fiddle shows how to use the underlying Matrix class directly. It's nice because it allows you to scale by x, y and also gives skew and other parameters that are not possible with the automatic matrix handling in Two.js

by jonobr1

HTML

<script src="http://jonobr1.github.io/two.js/third-party/two.js"></script>

JavaScript

var two = new Two({
    fullscreen: true,
    autostart: true
}).appendTo(document.body);

var circle = two.makeCircle(two.width / 2, two.height / 2, 50);

circle._matrix.manual = true;

two.bind('update', function(frameCount, timeDelta) {

    // There are other baked in methods for Two.Matrix like skew:
    // https://github.com/jonobr1/two.js/blob/master/src/matrix.js
    
    var sx = Math.sin(frameCount / 30);
    var sy = 1;

    circle._matrix
        .identity()
        .translate(circle.translation.x, circle.translation.y)
        .rotate(circle.rotation)
        .scale(sx, sy);

});