Animate HTML5 Canvas/Javascript, Math Help Please

[avtutorials]

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

[Colin Holgate]

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.

[ClayUUID]

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

[avtutorials]

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;

[JoãoCésar]

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

[avtutorials]

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.