http://en.wikipedia.org/wiki/Harmonic_oscillator

I think I know the reason why it’s not working. You need to include tags on to the document. This tutorial only shows the JavaScript.

So effectively, your code should look like this:

body {
margin: 0px;
padding: 0px;
}

#myCanvas {
border: 1px solid #9C9898;
}

function Rectangle(x, y, width, height, borderWidth){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.borderWidth = borderWidth;
}

window.onload = function(){
var canvas = document.getElementById(“myCanvas”);
// instantiate new animation object
var myStage = new Kinetic.Stage(canvas);

var amplitude = 150;
var centerX = 0;
var period = 2000; // in ms
var myRectangle = new Rectangle(250, 70, 100, 50, 5);
centerX = canvas.width / 2 – myRectangle.width / 2;

// set updateStage method
myStage.setUpdateStage(function(){
var nextX = amplitude *
Math.sin(myStage.getTime() *
2 *
Math.PI /
period) +
centerX;
myRectangle.x = nextX;
});
// set drawStage method
myStage.setDrawStage(function(){
var context = myStage.getContext();
context.beginPath();
context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
context.fillStyle = “#8ED6FF”;
context.fill();
context.lineWidth = myRectangle.borderWidth;
context.strokeStyle = “black”;
context.stroke();
});
// start animation
myStage.start();
}