Question
Animate HTML5 Canvas/Javascript, Math Help Please
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();
});
