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();
});

 

 

 

Views

248

Likes

Translate

Translate

Report

Report
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();
});

 

 

 

Views

249

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 03, 2019 0
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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2019 0
Adobe Community Professional ,
Oct 04, 2019

Copy link to clipboard

Copied

Comment out the part of the AS3/JS code that updates the plane's X/Y coordinates and you'll see a critical difference.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2019 0
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;

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2019 0
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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2019 0
Participant ,
Oct 04, 2019

Copy link to clipboard

Copied

Hi JC, thank you for clarifying. I appreciate it. It is frustrating, though, that there are so many idiosyncrasies with the AS3-to-JS conversion process. It eats up so much time troubleshooting these things.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2019 0