Learn VBA & Macros in 1 Week!

JavaScript - Help In Changing Image According To Angle (javascript)

Full Excel VBA Course - Beginner to Expert

Help In Changing Image According To Angle (javascript)	View Content

Hi all,
I am currently working on a boids related project which involves a few fishes swimming around.(decided to start on only 1 fish 1st) Now I just want to make the fish image change accordingly to the angle that it is swimming towards by calculating the angle, assigning a position to it, and load its corresponding image. But its just not working. The fish just move up and down instead of what I programme to move all around. The image doesnt change either. Please help! Thanks!

Here is my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Moving fish, in class 2012-02-08</title>


<!-- include the Sprites library -->
<script src="Sprites3.js"></script>

<script>

var left = 40, top = 40, w = 400, h  =300;//the frame
var tick = 10; //ms between redraws

//position and velocity of moving ball
var x = 40; //x position of ball
var y = 40; //y position of ball
var vx = 1; //x component of velocity
var vy = 2; //y component of velocity
var dt = 1; //simulation time step
var anglePosition=1;
//the moving image
var d = 30; //diameter of ball [w and h of sprite]

var fish = new Sprite("goldfish/fish" + anglePosition + ".png", d, d);


function moveOneStep(){
	x = x + vx*dt; //new x position
	y = y + vy*dt; //new y position
	
	if (x < 0) {//hit left rail
		x = -x;
		vx = -vx;
	}
	
	if (y < 0){//hit bot rail
		y = -y;
		vy = -vy;
	}
	
	if (x > (w-d)){//hit right rail
		x = 2*(w-d) - x;
		vx = - vx;
	}
	
	if (y > (h-d)){//hit top rail
		y = 2*(h-d) - y;
		vy = - vy;
	}
	
	calculateAngle(vx,vy);

	fish.redraw("goldfish/fish" + anglePosition + ".png", x, y); 
	
}//moveOneStep

//cal angle

function calculateAngle(vx,vy)
{	
	var s = Math.sqrt(vx*vx + vy*vy);
	var angle = Math.asin(vy/s) * (180/Math.PI);
	
	if(vx > 0)
	{	
		angle = 90 - (angle);
	}
	else 
	{	
		angle = 270 + (angle);
	}

	anglePosition = Math.round((((angle/360)*16)*1)/1); //16 positions
	
	return anglePosition;

}//end of function



function init(){
	
	initFrame(left, top, w, h, "#ccc");
	
	fish.draw(x, y);
	
	window.setInterval("moveOneStep()", tick);
	

}//init

</script>
</head>

<body onload="init()">

</body>
</html>

Full Excel VBA Course - Beginner to Expert

Changing Image Src With Javascript

Similar Tutorials

JavaScript - Help In Changing Image According To Angle (javascript)

Help In Changing Image According To Angle (javascript)

Similar Tutorials

Changing Image Src With Javascript

Radian Angle - Sine Cos Higher Magnitude..

Changing Image And Image Map Crashes Ie (not Firefox)!

Image And Link Changing

Conditional Image Changing

Changing Background Image.

Changing Php Include With Javascript?

Javascript Dynamically Changing Tab

Href Changing Depending On What Image

Changing An Image Daily For A Month

Changing Background Image On Hover

Changing Background Image With A Button

Selection And Changing Image Problem

Changing The Alignment Of Image Which Is Under Iframe

Problem Changing Div Background Image

Changing Flash Param W/ Javascript

Looking For Help With Photoshop Javascript (changing Variables))

Javascript Color Changing Code...how Is This Done?

Need Help With Changing Image On Link Mouseover Script

Changing Image By Selecting Drop Down Menu