Question

I have a canvas animation which i’m using with the Kinetic.js Library.

In this code I also have a group of objects which I can make animate and rotate easily enough. What I need is that rotation to oscillate about a center point.

So rather than just go round and round – needs to swing back and forth. I have tried everything and can not find how to do this.

Similar to this tutorial….

HTML5 Canvas Oscillation tuturial

Except rather than oscillating a square backwards on one plane it needs to rotate backwards and forwards.

var carTopLeftGroup = new Kinetic.Group({
        x: stageWidth / 2 - 35,
        y:  stageHeight / 2 - 25,
        rotationDeg: 30,
        offset: [800, 50]
    });

    carTopLeftGroup.add(carTopLeftLight);
    carTopLeftGroup.add(carTopLeft);

    welcomeLayer.add(carTopLeftGroup);

Hope this is clear and have explained as much as I can.

Regards
JS

Answer 1

Do you mean like a pendulum algorithm?

Modeling Physics in Javascript: Introduction

You can take a look and use the math from there and use Kineticjs instead of pure html5 canvas.