6 Replies - 1956 Views - Last Post: 27 March 2013 - 03:44 AM

#1 donniemateno  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 25-March 13

Rotating an image using vectors

Posted 25 March 2013 - 09:08 AM

Hi Guys

Im new to this and have only been using Java / Notepad ++ for about a month now so I'm still very new!

I basically have a task to create a small app on html5 canvas. I have chosen to get a car to go round a track. I have managed to get the car to move off the start line but it continues to move in that direction as I havent added an angle.

My question to you is how do I add in a vector. After some research I have found I need to change my velocity vector i.e [vx,vy] but I don't know what I would enter as would I have to enter this for every corner I want the vehicle to turn?

My current code is :

<!DOCTYPE HTML>
<html>
	<head>
		<title>Car Game</title>
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
		<script src="http://www.jeromeleary.com/canvas.js" type="text/javascript"></script>
	
		<script type="text/javascript">
			var dt = 0.05;
		
			var track = new Image(); track.src = "track.jpg";
			var car = new Image(); car.src = "car.png";
			var m = 1000, n=1;
			var T = 0, R = 0, L;
			var x = 250, y =50, vx =0, vy= 0, ax,ay;
			
		
			function start (){
			
			}
			
			function loop (){
				// read the controls bpower is T
			
				if (mouseY > 286 && mouseX > 310 && mouseX <380) vx = 50;
				if (mouseY > 700 && mouseX > 280 && mouseX <275) r = 50;
				
				
				// the vx it what moves car to the side not t. this is why the car is now locked in the location above until the mouse passes in the specefic area
				
				//set limits
				if (vx > 0) vx = 50;
				if (vx < 0) vx = 0;
						
				
				//Newtons Laws
						
				//vx = 0;
				
				//vy = vy + ay * dt;
				x = x + vx * dt;
				y = y + vy * dt;
				
				
				//if (y < 1) {ax = 0; vx =0.95 * vx;}
			
				// display the graphics
				drawImage( track, 0, 0, 800, 400);
				drawImageRotate(car, x, 297 - y, 150, 89);
				drawText(T.toFixed(0), 300, 100);
				drawText(y.toFixed(3), 300, 120);
				drawText(mouseX,200,200);
				drawText(mouseY,200,250);
			}
		</script>
	</head>
	
	<body>
		<canvas id = "canvas"width="800px"height="600px">
		This text is displayed if your browser does not support HTML5 Canvas.
		</canvas>
	</body>
	
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Rotating an image using vectors

#2 pbl  Icon User is offline

  • There is nothing you can't do with a JTable
  • member icon

Reputation: 8378
  • View blog
  • Posts: 31,956
  • Joined: 06-March 08

Re: Rotating an image using vectors

Posted 25 March 2013 - 09:11 AM

looks like Javascript to me :)/>
I am afraid you are in the wrong forum.
Moved to Javascript forum

This post has been edited by pbl: 25 March 2013 - 10:01 AM

Was This Post Helpful? 1
  • +
  • -

#3 CasiOo  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1571
  • View blog
  • Posts: 3,529
  • Joined: 05-April 11

Re: Rotating an image using vectors

Posted 25 March 2013 - 09:50 AM

you don't even know the name of the programming language o.o
Was This Post Helpful? 0
  • +
  • -

#4 donniemateno  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 25-March 13

Re: Rotating an image using vectors

Posted 26 March 2013 - 02:08 AM

View PostCasiOo, on 25 March 2013 - 09:50 AM, said:

you don't even know the name of the programming language o.o


thanks....as previously stated I have only used this a few weeks so mistakes I make could be pointed out in a nicer way. for example ah your using javascript not as youve previously stated for some clarity

any HELP would be appreciated...
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,074
  • Joined: 08-June 10

Re: Rotating an image using vectors

Posted 26 March 2013 - 01:24 PM

currently it is not clear to me, what the programme is supposed to do and what it does instead.



PS. dt is undefined
Was This Post Helpful? 0
  • +
  • -

#6 donniemateno  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 25-March 13

Re: Rotating an image using vectors

Posted 27 March 2013 - 02:05 AM

The purchase of the code is to have a 2d picture of a race track from above. this will then have an image of a car from above which will be stationary. when a mouse hovers over the car it moves forward and then the mouse gets to the corner of the track ( ive kept the shape simple just an oval) it follows the mouse round the corner. so you steer the car with the mouse

I have made some progress since yesterday. The car now moves/steers with the mouse BUT it only moves in the x direction and is very "unstable" when it moves accross the screen it isnt smooth it moves up and down quickly and sometimes disappears off the screen. I also want the car to turn as it goes round the corner but the only advice I have found is to set the angle with the drawtextimage. all this does is rotate the image from the start not as I move the mouse. please see updated code below:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Car Game</title>
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
		<script src="http://www.jeromeleary.com/canvas.js" type="text/javascript"></script>
	
		<script type="text/javascript">
			var dt = 0.05;
		
			var track = new Image(); track.src = "track.jpg";
			var car = new Image(); car.src = "car.png";
			var m = 1000, n=1;
			var T = 0, R = 0, L;
			var x = 250, y =50, vx =0, vy= 0, ax,ay;
			var w = 0.001;
			
		
			function start (){
			
			}
			
			function loop (){
				// read the controls bpower is T
			
				if (mouseY > 286 && mouseX > 310 && mouseX <380) vx = 50;
				vx = vx * Math.cos(w) - vy *Math.sin(w);
                vy = vx * Math.sin(w) + vy * Math.cos(w);
				w= mouseX / 4;

				
				
				// the vx it what moves car to the side not t. this is why the car is now locked in the location above until the mouse passes in the specefic area
				
				//set limits
				if (vx > 0) vx = 50;
				if (vx < 0) vx = 0;
						
				
				//Newtons Laws
						
				//vx = 0;
				
				//vy = vy + ay * dt;
				x = x + vx * dt;
				y = y + vy * dt;
					
				
				//if (y < 1) {ax = 0; vx =0.95 * vx;}
			
				// display the graphics
				drawImage( track, 0, 0, 800, 400);
				drawImageRotate(car, x, 297 - y, 150, 89, 315 );
				drawText(T.toFixed(0), 300, 100);
				drawText(y.toFixed(3), 300, 120);
				drawText(mouseX,200,200);
				drawText(mouseY,200,250);
			}
		</script>
	</head>
	
	<body>
		<canvas id = "canvas"width="800px"height="600px">
		This text is displayed if your browser does not support HTML5 Canvas.
		</canvas>
	</body>
	
</html>


This post has been edited by Dormilich: 27 March 2013 - 02:46 AM

Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,074
  • Joined: 08-June 10

Re: Rotating an image using vectors

Posted 27 March 2013 - 03:44 AM

hm, some comments (I would need to test it myself to see the problems...)

well, back to the comments.

I find the canvas.js library awful. no comments, no API, no documentation and way too many globals all over the place.

if you want to use vectors, Id recommend objects to implement vector math (makes it easier to handle).

line #37 looks wrong.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1