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

Animate HTML5 Canvas/Javascript, Math Help Please

/t5/animate/animate-html5-canvas-javascript-math-help-please/td-p/10649132
Oct 03, 2019
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

5
Replies
5

/t5/animate/animate-html5-canvas-javascript-math-help-please/m-p/10649543#M197012
Oct 04, 2019
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

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

Copy link to clipboard

Copied

Community Guidelines

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

avtutorials
AUTHOR

Contributor
,

/t5/animate/animate-html5-canvas-javascript-math-help-please/m-p/10650861#M197035
Oct 04, 2019
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

/t5/animate/animate-html5-canvas-javascript-math-help-please/m-p/10651011#M197039
Oct 04, 2019
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

Community Guidelines

avtutorials
AUTHOR

Contributor
,

LATEST
/t5/animate/animate-html5-canvas-javascript-math-help-please/m-p/10651117#M197040
Oct 04, 2019
Oct 04, 2019

Copy link to clipboard

Copied

Community Guidelines

Using the Community
Experience League
Terms of Use
Privacy Policy
Cookie preferences
AdChoices
Language:

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

Copyright © 2021 Adobe. All rights reserved.