# Rotating an image using vectors

Page 1 of 1

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

### #1 donniemateno

Reputation: 0
• 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>
<title>Car Game</title>

<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>

<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

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

Reputation: 8378
• 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

### #3 CasiOo

• D.I.C Lover

Reputation: 1575
• Posts: 3,541
• 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

### #4 donniemateno

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

## Re: Rotating an image using vectors

Posted 26 March 2013 - 02:08 AM

CasiOo, 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...

### #5 Dormilich

• 痛覚残留

Reputation: 4163
• Posts: 13,187
• 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

### #6 donniemateno

Reputation: 0
• 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>
<title>Car Game</title>

<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>

<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

### #7 Dormilich

• 痛覚残留

Reputation: 4163
• Posts: 13,187
• 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...)