Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.

Highlighted
##

Animate HTML5 Canvas/Javascript, Math Help Please

Participant
,

Oct 03, 2019

Copy link to clipboard

Copied

Hello,

I'm converting my AS3 to JS. My AS3 math code isn't working with JS, and despite around 10 hours spent so far, I cannot figure out what I'm doing wrong. If anyone could kindly help, I would greatly appreciate it!

I am at my wits end! I don't understand what I'm doing wrong. Thank you for any help!

**math_drag_as3.fla code (this works properly):**

```
// VARIABLES
var selectedAircraft:Object;
var myAtan2:Number;
var radians:Number
var radiansAircraftCenter:Number;
var aircraftCenterPointX:Number = 50;
var aircraftCenterPointY:Number = 50;
var movementInProgress:Boolean = false;
var aircraftBuildInProgress:Boolean = false;
// TOWTARGET LISTENERS
towTarget.addEventListener(MouseEvent.MOUSE_DOWN, startMove);
towTarget.addEventListener(MouseEvent.MOUSE_UP, stopMove);
// --- Add parameters to aircraft object
selectedAircraft.aircraftHeight = 100;
selectedAircraft.aircraftWidth = 100;
// --- Position aircraft object
selectedAircraft.aircraftRotation = 0;
selectedAircraft.rotation = 0;
selectedAircraft.aircraftX = 50;
selectedAircraft.aircraftY = 50;
selectedAircraft.x = 50;
selectedAircraft.y = 50;
radians = selectedAircraft.rotation * (Math.PI / 180);
radiansAircraftCenter = (selectedAircraft.rotation-90) * (Math.PI / 180);
towTarget.x = selectedAircraft.x + ((selectedAircraft.aircraftWidth/2) * Math.cos(radians));
towTarget.y = selectedAircraft.y + ((selectedAircraft.aircraftWidth/2) * Math.sin(radians));
aircraftCenterPointX = towTarget.x - ((selectedAircraft.aircraftHeight/2) * Math.cos(radiansAircraftCenter));
aircraftCenterPointY = towTarget.y - ((selectedAircraft.aircraftHeight/2) * Math.sin(radiansAircraftCenter));
function selected(e:MouseEvent):void {
radians = selectedAircraft.rotation * (Math.PI / 180);
radiansAircraftCenter = (selectedAircraft.rotation-90) * (Math.PI / 180);
towTarget.x = selectedAircraft.x + ((selectedAircraft.aircraftWidth/2) * Math.cos(radians));
towTarget.y = selectedAircraft.y + ((selectedAircraft.aircraftWidth/2) * Math.sin(radians));
aircraftCenterPointX = towTarget.x - ((selectedAircraft.aircraftHeight/2) * Math.cos(radiansAircraftCenter));
}
function startMove(evt:MouseEvent):void {
movementInProgress = true;
evt.target.startDrag();
stage.addEventListener(Event.ENTER_FRAME, checkMouse);
}
function stopMove(e:MouseEvent):void {
selectedAircraft.aircraftX = selectedAircraft.x;
selectedAircraft.aircraftY = selectedAircraft.y;
selectedAircraft.aircraftRotation = selectedAircraft.rotation;
movementInProgress = false;
stopDrag();
removeEventListener(MouseEvent.MOUSE_MOVE, checkMouse);
}
function checkMouse(evt:Event ):void {
if (movementInProgress == true) {
myAtan2 = Math.atan2(towTarget.y - aircraftCenterPointY, towTarget.x - aircraftCenterPointX);
selectedAircraft.rotation = (myAtan2 * 180 / Math.PI) + 90;
radians = selectedAircraft.rotation * (Math.PI / 180);
radiansAircraftCenter = (selectedAircraft.rotation-90) * (Math.PI / 180);
selectedAircraft.x = towTarget.x - ((selectedAircraft.aircraftWidth/2) * Math.cos(radians));
selectedAircraft.y = towTarget.y - ((selectedAircraft.aircraftWidth/2) * Math.sin(radians));
aircraftCenterPointX = towTarget.x - ((selectedAircraft.aircraftHeight/2) * Math.cos(radiansAircraftCenter));
aircraftCenterPointY = towTarget.y - ((selectedAircraft.aircraftHeight/2) * Math.sin(radiansAircraftCenter));
}
}
```

**math_drag_js.fla (this doesn't work properly):**

```
// VARIABLES
var myAtan2;
var radians;
var radiansAircraftCenter;
var aircraftCenterPointX = 50;
var aircraftCenterPointY = 50;
var towTarget = this.towTargetObj;
var selectedAircraft = this.selectedAircraftObj;
selectedAircraft.aircraftWidth = 100;
selectedAircraft.aircraftHeight = 100;
// TOWTARGET LISTENERS
towTarget.on("pressmove", function(evt){
this.x = evt.stageX;
this.y = evt.stageY;
myAtan2 = Math.atan2(this.y - aircraftCenterPointY, this.x - aircraftCenterPointX);;
selectedAircraft.rotation = (myAtan2 * 180 / Math.PI) + 0;
radians = selectedAircraft.rotation * (Math.PI / 180);
radiansAircraftCenter = (selectedAircraft.rotation - 0) * (Math.PI / 180);
selectedAircraft.x = this.x - ((selectedAircraft.aircraftWidth/2) * Math.cos(radians));
selectedAircraft.y = this.y - ((selectedAircraft.aircraftWidth/2) * Math.sin(radians));
aircraftCenterPointX = this.x - ((selectedAircraft.aircraftHeight/2) * Math.cos(radiansAircraftCenter));
aircraftCenterPointY = this.y - ((selectedAircraft.aircraftHeight/2) * Math.sin(radiansAircraftCenter));
stage.update();
});
```

Community Guidelines

Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more

Animate HTML5 Canvas/Javascript, Math Help Please

Participant
,

Oct 03, 2019

Copy link to clipboard

Copied

Hello,

I'm converting my AS3 to JS. My AS3 math code isn't working with JS, and despite around 10 hours spent so far, I cannot figure out what I'm doing wrong. If anyone could kindly help, I would greatly appreciate it!

I am at my wits end! I don't understand what I'm doing wrong. Thank you for any help!

**math_drag_as3.fla code (this works properly):**

```
// VARIABLES
var selectedAircraft:Object;
var myAtan2:Number;
var radians:Number
var radiansAircraftCenter:Number;
var aircraftCenterPointX:Number = 50;
var aircraftCenterPointY:Number = 50;
var movementInProgress:Boolean = false;
var aircraftBuildInProgress:Boolean = false;
// TOWTARGET LISTENERS
towTarget.addEventListener(MouseEvent.MOUSE_DOWN, startMove);
towTarget.addEventListener(MouseEvent.MOUSE_UP, stopMove);
// --- Add parameters to aircraft object
selectedAircraft.aircraftHeight = 100;
selectedAircraft.aircraftWidth = 100;
// --- Position aircraft object
selectedAircraft.aircraftRotation = 0;
selectedAircraft.rotation = 0;
selectedAircraft.aircraftX = 50;
selectedAircraft.aircraftY = 50;
selectedAircraft.x = 50;
selectedAircraft.y = 50;
radians = selectedAircraft.rotation * (Math.PI / 180);
radiansAircraftCenter = (selectedAircraft.rotation-90) * (Math.PI / 180);
towTarget.x = selectedAircraft.x + ((selectedAircraft.aircraftWidth/2) * Math.cos(radians));
towTarget.y = selectedAircraft.y + ((selectedAircraft.aircraftWidth/2) * Math.sin(radians));
aircraftCenterPointX = towTarget.x - ((selectedAircraft.aircraftHeight/2) * Math.cos(radiansAircraftCenter));
aircraftCenterPointY = towTarget.y - ((selectedAircraft.aircraftHeight/2) * Math.sin(radiansAircraftCenter));
function selected(e:MouseEvent):void {
radians = selectedAircraft.rotation * (Math.PI / 180);
radiansAircraftCenter = (selectedAircraft.rotation-90) * (Math.PI / 180);
towTarget.x = selectedAircraft.x + ((selectedAircraft.aircraftWidth/2) * Math.cos(radians));
towTarget.y = selectedAircraft.y + ((selectedAircraft.aircraftWidth/2) * Math.sin(radians));
aircraftCenterPointX = towTarget.x - ((selectedAircraft.aircraftHeight/2) * Math.cos(radiansAircraftCenter));
}
function startMove(evt:MouseEvent):void {
movementInProgress = true;
evt.target.startDrag();
stage.addEventListener(Event.ENTER_FRAME, checkMouse);
}
function stopMove(e:MouseEvent):void {
selectedAircraft.aircraftX = selectedAircraft.x;
selectedAircraft.aircraftY = selectedAircraft.y;
selectedAircraft.aircraftRotation = selectedAircraft.rotation;
movementInProgress = false;
stopDrag();
removeEventListener(MouseEvent.MOUSE_MOVE, checkMouse);
}
function checkMouse(evt:Event ):void {
if (movementInProgress == true) {
myAtan2 = Math.atan2(towTarget.y - aircraftCenterPointY, towTarget.x - aircraftCenterPointX);
selectedAircraft.rotation = (myAtan2 * 180 / Math.PI) + 90;
radians = selectedAircraft.rotation * (Math.PI / 180);
radiansAircraftCenter = (selectedAircraft.rotation-90) * (Math.PI / 180);
selectedAircraft.x = towTarget.x - ((selectedAircraft.aircraftWidth/2) * Math.cos(radians));
selectedAircraft.y = towTarget.y - ((selectedAircraft.aircraftWidth/2) * Math.sin(radians));
aircraftCenterPointX = towTarget.x - ((selectedAircraft.aircraftHeight/2) * Math.cos(radiansAircraftCenter));
aircraftCenterPointY = towTarget.y - ((selectedAircraft.aircraftHeight/2) * Math.sin(radiansAircraftCenter));
}
}
```

**math_drag_js.fla (this doesn't work properly):**

```
// VARIABLES
var myAtan2;
var radians;
var radiansAircraftCenter;
var aircraftCenterPointX = 50;
var aircraftCenterPointY = 50;
var towTarget = this.towTargetObj;
var selectedAircraft = this.selectedAircraftObj;
selectedAircraft.aircraftWidth = 100;
selectedAircraft.aircraftHeight = 100;
// TOWTARGET LISTENERS
towTarget.on("pressmove", function(evt){
this.x = evt.stageX;
this.y = evt.stageY;
myAtan2 = Math.atan2(this.y - aircraftCenterPointY, this.x - aircraftCenterPointX);;
selectedAircraft.rotation = (myAtan2 * 180 / Math.PI) + 0;
radians = selectedAircraft.rotation * (Math.PI / 180);
radiansAircraftCenter = (selectedAircraft.rotation - 0) * (Math.PI / 180);
selectedAircraft.x = this.x - ((selectedAircraft.aircraftWidth/2) * Math.cos(radians));
selectedAircraft.y = this.y - ((selectedAircraft.aircraftWidth/2) * Math.sin(radians));
aircraftCenterPointX = this.x - ((selectedAircraft.aircraftHeight/2) * Math.cos(radiansAircraftCenter));
aircraftCenterPointY = this.y - ((selectedAircraft.aircraftHeight/2) * Math.sin(radiansAircraftCenter));
stage.update();
});
```

Community Guidelines

Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more

avtutorials

Oct 03, 2019
0
/t5/animate/animate-html5-canvas-javascript-math-help-please/td-p/10649132
5
Replies
5

Adobe Community Professional
,

Oct 04, 2019

Copy link to clipboard

Copied

In Canvas you have to take into account the scale of the stage. Try this:

towTarget.on("pressmove", function(evt){

this.x = evt.stageX/stage.scaleX;

this.y = evt.stageY/stage.scaleY;

That will get you closer, but the plane will be 90 degrees away from the dot. As you are doing the arithmetic differently in JS it's hard to see where that error is, but one good thing to know is that zero radians is to the right. If you dig into the plane movieclip and rotate the graphics so that the nose points to the right, and also at the main level move the dot to start on the right, everything will work correctly.

Community Guidelines

Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more

Reply

Loading...

Colin Holgate

Oct 04, 2019
0
/t5/animate/animate-html5-canvas-javascript-math-help-please/m-p/10649543#M197012
Adobe Community Professional
,

Oct 04, 2019

Copy link to clipboard

Copied

Community Guidelines

Reply

Loading...

ClayUUID

Oct 04, 2019
0
/t5/animate/animate-html5-canvas-javascript-math-help-please/m-p/10650289#M197022
Participant
,

Oct 04, 2019

Copy link to clipboard

Copied

Solved! Thank you for your help. Apparently, this was the problem: Animate/HTML5 Canvas puts the registration point for a graphic (like a Shape object inside a MovieClip) at the very center of the object during runtime... even though, in the IDE, the registration point is at the upper left corner. How frustrating!

I solved it with these two lines of code:

```
selectedAircraft.regX = 0;
selectedAircraft.regY = 0;
```

Community Guidelines

Reply

Loading...

avtutorials

Oct 04, 2019
0
/t5/animate/animate-html5-canvas-javascript-math-help-please/m-p/10650861#M197035
Adobe Community Professional
,

Oct 04, 2019

Copy link to clipboard

Copied

Hi.

I'm glad you managed to solve the issue.

And I just wanna to point out that in HTML5 Canvas documents the position of objects is determined by the transformation point and not by the registration point.

Regards,

JC

__________________________________________

HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Community Guidelines

Reply

Loading...

JoãoCésar

Oct 04, 2019
0
/t5/animate/animate-html5-canvas-javascript-math-help-please/m-p/10651011#M197039
avtutorials
LATEST

Participant
,

Oct 04, 2019

Copy link to clipboard

Copied

Community Guidelines

Reply

Loading...

avtutorials

Oct 04, 2019
0
/t5/animate/animate-html5-canvas-javascript-math-help-please/m-p/10651117#M197040
Using the Community
Experience League
Terms of Use
Privacy Policy
Cookie preferences
AdChoices
Language:

- Deutsch
- English
- Español
- Français
- 日本語コミュニティ
- Português

Copyright © 2020 Adobe. All rights reserved.