I'm making a game where you have to plot a function to hit certain objectives. I already made the plotting function and the animation to display a tiny missile that travels above the function. My problem is that the sprite must rotate following the function path. For example:
Here is the code. To trigger the current animation, just run the animate() function in your browser. In the moveRocket() function is where I render each frame of the animation. This is how I'm currently trying to get the rotation degrees:
var rotationDegrees = Math.atan2(y2 - y1, x2 - x1);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>sin título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.22" />
</head>
<body>
<script>
//Math stuff
var height, width;
var scale = 10; // A factor that does zoom in the function
var landa = 0.15; // Gap between one point and another in the plotted function
var fpsSpeed = 50; //secs per frame
function xNeg () {
return (-1)*(width / 2) //-x limit
}
function xPos() {
return (+1)*(width / 2) //+y limit
}
function plot(context, x1, y1, x2, y2) {
// translate the coordinates to the real canvas points, this is, (-10,-10) to (40.40)
// if we have a 100*100 canvas
x1 = ((width / 2) + x1 * scale);
x2 = ((width / 2) + x2 * scale);
y1 = ((width / 2) - y1 * scale);
y2 = ((width / 2) - y2 * scale);
backgroundContext.moveTo(x1, y1);
backgroundContext.lineTo(x2, y2);
backgroundContext.stroke();
}
function f(x) {
// the sample funcion
return x*x;
}
function inverse(x) {
// the inverse of the sample function, this is to not waste time rendering parts of the function
// that aren't actually displayed.
return Math.sqrt(x);
}
//Animation stuff
var timer;
var fps = 0;
function addFrames(x1,y1,x2,y2) {
addRocketFrame(x1,y1,x2,y2);
//addEnemyHitFrame(x1,y1,x2,y2);
//addSmockeTraceFrame(x1,y1,x2,y2);
}
function animate() {
prepareLayer(rocketContext, rocketCanvas);
timer=setTimeout('animate()', fpsSpeed);
//HOT SPOT **
moveRocket();
//HOT SPOT **
fps++;
restoreLayer(rocketContext);
}
function restoreLayer(ctx) {
ctx.restore();
}
function prepareLayer(ctx, canvas) {
// Store the current transformation matrix
ctx.save();
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
ctx.restore();
}
//Rocket animation stuff
var rocketFrames = new Array();
var rocketFrameCounter = 0;
//Render the rocket frames
function moveRocket() {
if (fps < rocketFrameCounter-1) {
var frame = rocketFrames[fps];
x1 = ((width / 2) + frame.x1 * scale);
y1 = ((width / 2) - frame.y1 * scale);
x2 = ((width / 2) + frame.x2 * scale);
y2 = ((width / 2) - frame.y2 * scale);
var rotationDegrees = Math.atan2(y2 - y1, x2 - x1); //Trying to get the rotation degrees...
var rocketImage = document.getElementById("rocket");
rocketContext.drawImage(rocketImage, x1, y1);
//rocketContext.rotate(rotationDegrees);
}
}
function addRocketFrame(x1,y1,x2,y2) {
var frame = { x1:x1,
y1:y1,
x2:x2,
y2:y2};
rocketFrames[rocketFrameCounter++] = frame;
}
window.onload = function() {
rocketCanvas = document.getElementById("rocketlayer");
rocketContext = rocketCanvas.getContext("2d");
backgroundCanvas = document.getElementById("background");
backgroundContext = backgroundCanvas.getContext("2d");
height = 600;
width = 800;
// Start plotting the function
for ( var x1 = -inverse(xPos()); x1 < inverse(xPos()); x1 += landa) {
var y1 = f(x1); //from
var x2 = x1 + landa;
var y2 = f(x2); //from
plot(backgroundContext, x1, y1, x2, y2);
//Add the frames that we are gonna to use to the animation
addFrames(x1, y1, x2, y2);
}
};
</script>
<div id="container" style="position: relative;">
<canvas id="background" style="position: absolute; top: 0; left: 0;" width="800" height="600"></canvas>
<canvas id="rocketlayer" style="position: absolute; top: 0; left: 0;" width="800" height="600"></canvas>
</div>
<img width="13" height="50" id="rocket" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAyCAYAAACHx1EEAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QwHEA0XEAgoEwAAA95JREFUSMfF1k1oHVUUB/D/ufdO3uR929d8NcEmNppWYmySoiFVSyAbhS7E+gF2IQptBXEhuHHnxoUru+yugis31aVQlOKmEKmISWrMhy9p06Z575nM+5j33szce9wkko83SSgRLwzMzLk/Dvdw59yRaDBGRkaG+vv7v2hvb19fWlpa3BlXjVBLS8s7XV1d7+VyuQqAnwGYrXGxE4yOjp5IJBLnu7u7EY/HXx0fH+/bOWcXam1tPRePx3szmQzi8fjxdDr9yp5oeHjYUkqNRaNRlUwmEYvFpFLqbG9vbyQUSSmbpZQnbNuGbduIRCKQUnYODg5aoahWq2ki8i3LglIKUkoIsWsFu9dERFoIgc2LiPZHG7Dh5P8G7TUEHmMcDmLmbfdbnw8309YihFXx8AvRaD3/c8kfCzXX6wQAolAAANiuS3uiz+bne55eWDiqSiXQxATI99G5uHj09Zs3jzdE14AoarWPj+Tz/YHW0NksWGukcrnnRLH40dUtn/y/qE2pK2B+XwsBGQSwi0UIY2CEADNfeiqbvbIN3U6nX04xfwBjpJYSYAZcFzoIoC0LMEakmS/fzmTGAED8MDAQi1Wrl1NaP6sAGCFgjIF0XagggJYSFoCk1qfi5fKl7/r6EqpjZuZty/ffkgCSABabmiA9D7SRiSyLUwBFAMD3L/Rksz8KYcwFwWwJISpNzc3f3Ovo+NWtVLQql1ErFMyDlpbfIrHY15CyJJiVNOYN+aFlvaCFmKjZ9lfXL178cr5cnq5Vq887zMemgd9nq9VP7w4NXX1xfn4SwApLmaNfAOsMEABgAPjk9Ok3ccy+bmXQXM/pWnVVv3vtzp0bm5X7CVDqDOBvvvgWkKfW5s41DbGtxwToFkdqk3ipHfj+842TYwwItu2Ik6lUMkZ6IHJEi0irIbtTi3Q0OHs+Gm0L3UaWMa1CmScRIwjbgJ5gUAx9MaKTocgwt8FCGhGAFEBJAAnEpeCe8FPDmBgxLNIMrm9EJUAMGYpIiDLV4aECoARQmcFFeIHmlVBUB3LssoMyYNU12CGgyI4gWgpFHpBHnVZQBOADXABQoYd1ovBMq+VyiQPxF9bAxiVgFcxVLBQqFScUvQZ4WmMG62DjCGAVrD26OwbU9+oRzMx/sANf5wQoD89ont7cYqGNxSeaoyKvi0cGcHi9LsTsvt2oQrTMVXog8ga6TMsVovv7oqTr/m18mjOPBKNGM4lKZW1f9AzgBR5N4R4M+zzZD3gH6bAMzVNyTa97TFMHbstGiD8ZNBNIOdso3vDXzRFiGUrdykv58MCZ3FLJKSYSN3KOU2oU/wd85qomyhtgPwAAAABJRU5ErkJggg==" />
</body>
</html>
My problem is that when I try to rotate the sprite with this line:
var rotationDegrees = Math.atan2(y2 - y1, x2 - x1);
This doesn't give me the right rotation degrees, I searched and I think that this is the right algorithm. So any clue of why this isn't working?
